CSS+div

最新推荐文章于 2024-05-03 14:55:36 发布

LeoHaiTao

最新推荐文章于 2024-05-03 14:55:36 发布

阅读量1.2k

点赞数 2

文章标签： css class div border float url

本文链接：https://blog.csdn.net/haitaodoit/article/details/6892000

版权

通过做三星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班重案一组©      版权所有</div></td>
    </tr>
</table>
</div>
</div>
</body>
</html>

实现效果：

LeoHaiTao

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
CSS+div

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

扫一扫

CSS+div

“相关推荐”对你有帮助么？