网页成品图:
一. 自己动手实践:
首先,把网页分为三大部分,定义了三个div,class分别为header,center,footer。然后在定义它们里面的div。代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>麦子学院实战</title>
<link rel="stylesheet" href="css/style2.css" />
</head>
<body>
<div class="header">
<div class="title">
<span class="left z">
<span class="shouye"><a href="">设为首页</a></span>
<span class="shouchang"><a href="">收藏本站</a></span>
</span>
<span class="right y">
<span class="riqi"><a href="">2015年5月1日</a></span>
<span class="tianqi"><a href="">多云16度/30度</a></span>
</span>
</div>
<div class="center"></div>
<div class="nav"></div>
</div>
<div class="center">
<div class="jianjie"></div>
<div class="xingwen"></div>
<div class="chanpintuijian"></div>
</div>
<div class="footer">
</div>
</body>
</html>
- 首先,写上面的头部背景和文字制作
1、首先把通用属性在style2.css里面定义好,比如padding,margin等。然后提前把左浮动,有浮动,位置居中,消除浮动等样式定义好,代码和截图如下:
*{margin:0;padding:0}
body{
font:14/28px "微软雅黑";
}
.z{float:left;}/*左对齐*/
.y{float:right;}/*右对齐*/
.wp{width:960px,margin:auto 0;}/*居中显示*/
.cl{clear:both;}/*清除浮动*/
/*header*/
/*title*/
.title{
background:#303030;
width:100%;
height:28px;
line-height:28px;/*height和line-height一致就可以使div或者span里的字体居中*/
}
.title span.left{
height: 100%;
width:300px;
margin-left:100px;
}
.title span.right{
height: 100%;
width:300px;
margin-right:100px;
}
.title span.shouye{
width:150px;
height:100%;
margin-left:40px;
}
.title span.shouchang{
width:150px;
height:100%;
margin-left:40px;
}
.title span.tianqi{
width:150px;
height:100%;
margin-right:40px;
}
.title span.riqi{
width:150px;
height:100%;
margin-right:40px;
}
.title span a{
text-decoration: none;
color:#D8D8D8;
}
难点在于以下几点:
-
文字在div或者span的中间。
解决办法:定义了高度height之后,同样要定义line-height。它们两个的值要一致。 -
几个文字的布局问题。
解决方法:首先定义两个大的span,使他们分别左浮动和右浮动,并给它们之间margin-left的值调到合适。
html代码:
<div class="title">
<span class="left z">
<span class="shouye"><a href="">设为首页</a></span>
<span class="shouchang"><a href="">收藏本站</a></span>
</span>
<span class="right y">
<span class="riqi"><a href="">2015年5月1日</a></span>
<span class="tianqi"><a href="">多云16度/30度</a></span>
</span>
</div>
css代码:
.title span.left{
height: 100%;
width:300px;
margin-left:100px;
}
.title span.right{
height: 100%;
width:300px;
margin-right:100px;
}
然后里面小的span,同样添加上不同的类名,在css里面定义宽度,并且设置了margin-left。代码如下:
.title span.shouye{
width:150px;
height:100%;
margin-left:40px;
}
.title span.shouchang{
width:150px;
height:100%;
margin-left:40px;
}
.title span.tianqi{
width:150px;
height:100%;
margin-right:40px;
}
.title span.riqi{
width:150px;
height:100%;
margin-right:40px;
}
最后,在去掉a标签的默认样式即可,代码如下:
title span a{
text-decoration: none;
color:#D8D8D8;
}
成品图如下所示:
二.老师使用的方法,代码如下:
htm代码
<div class="header">
<div class="top">
<div class="wp">
<div class="z">
<span>
<a href="">设为首页</a>
</span>
<span>
<a href="">收藏本站</a>
</span>
</div>
<div class="y">
<span>
<a href="">2015年5月1日</a>
</span>
<span class="mr_0">
<a href="">多云16度/30度</a>
</span>
</div>
</div>
</div>
css代码
.top{
width:100%;
height:24px;
line-height:24px;
background:#303030;
color:##D8D8D8;
}
.top span{
margin-right:15px;
}
.top span.mr_0{
margin:0px;
}
.top a{
color:#D8D8D8;
text-decoration: none;
}
.top a:hover{
color:#F60;
}
我们之间的区别总结:
-
它命名为top,我命名为title。
-
它使用了两个大的div作为父容器,我使用了两个大的span。
比较:我觉得它做得好,div作为容器的话,因为它是行间元素,所以不用指定它的大小,一行里有多大它填多大。 -
它在每一个span里使用的是margin-right,我使用的时margin-left.
比较:我觉得它的更方便 -
它在最右边有关天气的span里加了一个类mr_0。去除了最右边的边距。
class=“mr_0”:
.top span.mr_0{
margin:0px;
}
总结:老师写的布局更加简洁,作为一个新手要多学习老师的这种写法
更多推荐
html+css网页开发实战——1、头部背景和文字的制作
发布评论