用 HTML 和 CSS 制作一个带有彩色标题的框
我正在尝试用 HTML 和 CSS 制作一个如下所示的框：
我有以下代码：
订单.html：
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="utf-8">
<title>Orders Page</title>
<link rel="stylesheet" type="text/css" href="orders.css">
</head>
<body>
<div class="order-container">
<div class="order-header">
<p>ORDER #10980<p>
</div>
<div class="order-list">
</div>
<div class="order-footer">
</div>
</div>
</body>
</html>
订单.css：
.order-container {
border-style: solid;
height: 400px;
width: 400px;
}
.order-header {
text-align: center;
background-color: #a9dbde;
height: 60px;
}
我希望蓝色标题与框的顶部对齐。但是，蓝色标题和框顶部之间有一个空白，如下图所示。我不知道如何使标题的顶部与框的顶部对齐。任何见解表示赞赏。
慕神84474893回答
-
明月笑刀无情
浏览器具有您必须覆盖的默认样式，并且您使用的浏览器正在向p元素添加边距。我建议您为您的元素使用标头标签之一（更具语义）。<h1 class="order-header">ORDER #10980<h1>并删除边距.order-header { margin: 0; ...}您可以使用font-size调整文本大小并使line-height文本垂直居中（height如果执行此操作，则可以将其删除）。 -
至尊宝的传说
HTML 有一些默认值，你也可以尝试CSS中的flex属性，它在做一些元素对齐操作时会有很大帮助。<!DOCTYPE html><html><head> <title>Making a box with a coloured header in HTML and CSS</title> <style type="text/css"> .order-container{ border: 1px solid #999; height: 200px; width: 300px; } .order-header{ text-align: center; height: 50px; background: #81CCD3; } .order-header p{ margin:0 ; } </style></head><body> <div class="order-container"> <div class="order-header"> <p>ORDER #10980</p> </div> <div class="order-list"> </div> <div class="order-footer"> </div> </div></body></html> -
四季花海
删除标签的默认边距p。这是默认值的列表。p { margin: 0;}p { margin: 0;}.order-container { border-style: solid; height: 400px; width: 400px;}.order-header { text-align: center; background-color: #a9dbde; height: 60px;}<div class="order-container"> <div class="order-header"> <p>ORDER #10980 <p> </div> <div class="order-list"> </div> <div class="order-footer"> </div></div>
随时随地看视频慕课网APP
相关分类
Html5