http://devoirtechnologies.in/localhealthorganization/Untitled.png
我刚刚开始学习 css，目前我面临很多问题。 对于这样的图像，我希望背景是灰色的，中心空间是白色的，红色、蓝色和粉色应该在白色部分之间，我试过的代码是
<body style="background-color:#E6E6E6">
<div class="page" style="background-color:white; margin-left:18%; margin-right:18%; height:100%;">
<div style="background-color:pink; margin-left:18%; margin-right:18%;">
<p>demo text </p>
</div>
</div>
</body>
但是我一开始就错了，我无法纠正它。谁能告诉我如何编写这样的页面
最佳答案
您需要尝试使用颜色和实际值来匹配，但这里有一个模板:
<!-- Define your own background -->
<body style="background-color: yellow;">
<div class="container" style="background-color: white; margin: 5%;">
<div class="header">
<!--- This is your header -->
<div style="height: 100px;">
<img src="..." alt="Logo Space"/>
</div>
<div style="background-color: red; width: 100%; min-height: 100px;">
The red bar
</div>
</div>
<div class="page" style="background-color: white; ">
<div style="float: left; margin: 5%; width: 25%; background-color: blue; min-height: 400px;">
The blue sidebar
</div>
<div style="float: left; margin: 5%; width: 50%; background-color: pink; min-height: 200px;">
The pink content
</div>
<div style="clear: both"></div>
</div>
</div>
</body>
http://jsfiddle.net/9o645fe9/3/
祝你好运!
编辑
但在理想情况下，你真的不想将 css 和 html 混合在一起
body {
background-color: yellow;
}
.container {
background-color: white;
margin: 0 auto;
width: 90%;
}
.logo-space {
height: 100px;
}
.header-red {
background-color: red;
width: 100%;
min-height: 100px;
}
.blue-sidebar {
float: left;
margin: 5%;
width: 25%;
background-color: blue;
min-height: 400px;
}
.pink-content {
float: left;
margin: 5%;
width: 50%;
background-color: pink;
min-height: 200px;
}
.clear {
clear: both;
}
HTML:
<body>
<div class="container">
<div class="header">
<div class="logo-space">
<img src="..." alt="Logo Space"/>
</div>
<div class="header-red">
The red stripe
</div>
</div>
<div class="page">
<div class="blue-sidebar">
</div>
<div class="pink-content">
</div>
<div class="clear"></div>
</div>
</div>
</body>
关于html - 希望扩展 css div 并将其合并到标题中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27187774/