希望扩展 CSS div 并将其合并到标头中

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>

http://jsfiddle.net/vL1pu6da/

像这样的东西是格式化页面的常用方法，就像你问的那样：

.HTML：

<div class="container">
    <div class="header">Header</div>
    <div class="nav">Nav</div>
    <div class="content"> Content</div>
</div>

.CSS：

body {
    background-color:grey;
}
.container {
    margin: 0 10% 0 10%;
    padding: 0;
    width: 80%:
}
.header {
    background-color: red;
    padding: 10px 0 10px 10px;
    width: calc(100% - 10px);
}
.nav, .content {
    float:left;
}
.nav {
    width:20%;
    background-color: blue;
    height: 300px;
}
.content {
    width: 80%;
    background-color:yellow;
    height: 300px;
}

JSFiddle

编辑

相关内容

最新更新

热门标签：