CSS+div

      通过做三星SmartTV项目对于CSS样式表有了更深刻的理解,运用的更加熟练,比如,利用CSS+DIV对网页做固定宽度且居中操作,做相对定位。对于多个模块的布局应该多用div嵌套,这样做能够使得网页做出来更加稳定,不容易弄得乱起八糟的。对于div内的div它的margin属性都是相对于大比它高一级的div而言的;假如一个div内有好多个div 的话,那么margin属性就是相对于挨着它的div而言的;

下面是我写的一段代码:


<html>
<head><title>麦当劳</title>
<style type="text/css">
body,html{
margin:0px;
padding:0px;
text-align:center;
}
#container{
position:relative;
width:1000px;
height:540px;
background-color:red;
text-align:left;
background-color:
#990000;
/*background-image:url('resource/mac/bg.gif');*/
}
.mhead
{
width:1000px;
height:88px;
}
.main
{
height:452px;
width:1000px;
}
.mmiddle
{
  height:200;
  width:1000px;
  text-align:left;
}
.mbottom
{
height:200px;
width:1000px;
text-align:left;
}
.m1
{
width:160px;
height:160px;
border:solid yellow 1px;
margin-left:130px;
margin-top:20px;
float:left;
}
.m2
{
height:160px;
width:160px;
  border:solid yellow 1px;
  float:left;
  margin-top:20px;
  margin-left:100px;
  float:left;
}
.m3
{
height:160px;
width:160px;
  border:solid yellow 1px;
  margin-left:100px;
  margin-top:20px;
  float:left;
}
.m4{
height:160px;
width:160px;
  border:solid yellow 1px;
  margin-left:130px;
  margin-top:20px;
  float:left;
  }
.m5
{
height:160px;
width:160px;
  border:solid yellow 1px;
  margin-left:100px;
  margin-top:20px;
  float:left;

}
.m6
{
height:160px;
width:160px;
  border:solid yellow 1px;
  margin-left:100px;
  margin-top:20px;
  float:left;
}
.STYLE1 {color: #FFCC33}
.STYLE4 {
 color: #CCFF33;
 font-size: 14px;
}
</style>
</head>
<body>
<div id="container">
<div name="mhead" class="mhead" style="background-image:url('mheader.jpg')"></div>
<div class="main">
<div class="mmiddle">
<div class="m1" style="background-image:url('m1.jpg')">
</div>
  <div class="m2" style="background-image:url('m2.jpg')"><img src="m2.jpg"> </div>
  <div class="m3" style="background-image:url('m3.jpg')"></div>
</div>
<div class="mbottom">
<div class="m4" style="background-image:url('m4.jpg')"></div>
<div class="m5" style="background-image:url('m5.jpg')"></div>
<div class="m6"style="background-image:url('m6.jpg')"></div>
</div>
  <table width="984" height="44">
    <tr>
      <td width="840" height="38"><div align="center" class="STYLE1">联系方式:CSDN乐知学院.NET3班重案一组&copy;      版权所有</div></td>
    </tr>
</table>
</div>
</div>
</body>
</html>

实现效果:

 

你可能感兴趣的:(CSS+div)