html+css网页开发实战

网页成品图： 一. 自己动手实践： 首先，把网页分为三大部分，定义了三个div，class分别为header，center，footer。然后在定义它们里面的div。代码如下：

难点在于以下几点：

文字在div或者span的中间。 解决办法：定义了高度height之后，同样要定义line-height。它们两个的值要一致。

几个文字的布局问题。 解决方法：首先定义两个大的span，使他们分别左浮动和右浮动，并给它们之间margin-left的值调到合适。

html代码：

css代码：

然后里面小的span，同样添加上不同的类名，在css里面定义宽度，并且设置了margin-left。代码如下：

最后，在去掉a标签的默认样式即可，代码如下：

成品图如下所示： 二.老师使用的方法，代码如下：

htm代码

css代码

我们之间的区别总结：

它命名为top，我命名为title。

它使用了两个大的div作为父容器，我使用了两个大的span。 比较：我觉得它做得好，div作为容器的话，因为它是行间元素，所以不用指定它的大小，一行里有多大它填多大。

它在每一个span里使用的是margin-right，我使用的时margin-left. 比较：我觉得它的更方便

它在最右边有关天气的span里加了一个类mr_0。去除了最右边的边距。

class=“mr_0”:

总结：老师写的布局更加简洁，作为一个新手要多学习老师的这种写法