CSS+div

最新推荐文章于 2023-03-25 17:26:45 发布

最新推荐文章于 2023-03-25 17:26:45 发布 · 172 阅读

通过做三星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">联系方式：优快云乐知学院.NET3班重案一组© 版权所有</div></td>
</tr>
</table>
</div>
</div>
</body>
</html>