html - div的背景颜色属性

html - div的背景颜色属性,第1张

我需要为网站主页中的内容div添加背景颜色。主div的宽度为980px,内容div在主div内。网站设计就像下面的图像。我尝试使用背景图像,但它的位置正在根据屏幕分辨率而变化,而且我只需要在主页上进行此设计。有什么建议吗?

<html>
<head></head>
<body>
<div id="main" style="width:980px; margin: 0 auto;">
<div id="header"><!--div content here--></div>
<div id="des"><!--contents in between header and footer--></div>
<div id="footer"> Footer content here</div>
</div>
</body>
</html>

对于例如顶部的“波浪”形图像,我将其用作标题的背景图像。下面是标题div的样式。但我只能在主要的div中看到波形图像。

<style>
#header {
    width: 100%;
    height: 68px;
    background-image: url(../../image/header_line.png);
    background-repeat: no-repeat;
    background-position: center bottom;
    padding-bottom: 4px;
}
</style>

html - div的背景颜色属性,enter image description here,第2张

最佳答案:

2 个答案:

答案 0 :(得分:1)

试试这段代码:

<强> HTML:

<div class="outer-container blue">
    <div class="main-container"></div>
</div>
<div class="outer-container green">
    <div class="main-container"></div>
</div>
<div class="outer-container red">
    <div class="main-container"></div>
</div>

<强> CSS

.outer-container{width: 100%;}
.outer-container .main-container{width: 980px;margin: 0 auto;height: 100px;}
.blue .main-container{background: blue;}
.green .main-container{background: green;}
.red .main-container{background: red;}

请参阅此小提琴Rperform

答案 1 :(得分:0)

HTML:

<div class="container">
  <div class="content_div"></div>
</div>

<强> CSS:

.container{
width:300px;
height:300px;
background-color:#000;
position:relative;
margin-left:100px;
margin-top:60px;}

.content_div{
position:absolute;
left:0px;
right:0px;
top:0px;
bottom:0px;
height:60px;
width:100%;
background-color:#f00;
margin-top:auto;
margin-bottom:auto;
}

尝试Fiddle:

DABAN RP主题是一个优秀的主题,极致后台体验,无插件,集成会员系统
教程弟学习网站 » html - div的背景颜色属性

0条评论

发表评论

提供最优质的资源集合

立即查看 了解详情