【例】一个标准完整的Html网页版面制作【213】

图0

本例参考了网上的例子，唯一不一样的是，我这里的操作是一步一步讲解，网上仅是源码。

一、我们先创建一张空白的网页，网页要自适应手机。

图1

二、我们再创建网页的头部。

图2

图3

三、做出来的网页头部太丑了，我们要去掉盒子与浏览器的间隙，还有给头部加内部距离。

图4

图5

四、给网页头部添加一些内容。

图6

图7

五、接下来开始做导航条了。

图8

图9

六、发现没，导航条居然看不见，没有东西在里面自然是看不见的，我们加三个链接吧。

图10

图11

七、这回是看见了，不过样式太丑，我们改改样式。

图12

图13

八、加上内部距离，就好看了许多，即然是链接，我们加点动态吧，当鼠标在链接上面时，链接块变色。

图14

图15

九、开始做网页内容，网页内容我分为三块，左右两边是侧栏，中间是主要内容。

图16

图17

十、我想让它横着排，它却是竖着排，改改各个块的样式。

图18

图19

十一、给主体的各个块加点内容。

图20

图21

十二、内容是有了，但你会发现各块之间没有间隙，贴得太近了，我们改一下样式，加个内部距离。

图22

图23

十三、距离是有了，但有一个侧栏跑到了另一行，怎么回事？原来padding是会改变盒子的整体宽度，我们原本是100%，现在多了padding的宽度，自然就换行了，解决一下吧。

图24

图25

十四、这回终于在一行了，接下来可以做网页底部了。

图26

图27

十五、改改样式，让底部好看一点。

图28

图29

十六，这个时候，网页的整体版面就完成了，再补充一个小内容，让网页浏览器在小于600像素宽的时候，主体内容的三个块由横变竖。

图30