html 定义一个方框,方框内容有标题和结果两个不同字段,带css调整
时间: 2024-09-15 11:14:56 浏览: 91
汉字乱码全部展示为方框解决方案
要使用HTML定义一个包含标题和结果的方框,并使用CSS进行样式调整,你可以创建一个简单的`div`元素并结合`header`和`section`标签。下面是一个基础的例子:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<style>
.info-box {
width: 300px;
border: 1px solid #ccc;
border-radius: 5px;
padding: 20px;
margin: 10px auto;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
display: flex;
justify-content: space-between;
align-items: center;
}
.info-box header {
font-weight: bold;
margin-bottom: 10px;
}
.info-box section {
margin-top: 10px;
}
</style>
</head>
<body>
<div class="info-box">
<header>标题:</header>
<section>结果:</section>
</div>
</body>
</html>
```
在这个例子中:
- `.info-box` 是一个用于包含标题和结果的容器,设置了固定的宽度、边框、内边距、阴影以及居中显示。
- `header` 和 `section` 分别用于放置标题和结果,分别应用了适当的间距和样式。
可以根据需要自定义CSS样式,比如更改颜色、字体、字体大小等。
阅读全文