本例参考了网上的例子，唯一不一样的是，我这里的操作是一步一步讲解，网上仅是源码。
一、我们先创建一张空缺的网页，网页要自适应手机。
图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
图31
<!DOCTYPE html><html lang=\"大众en\"大众><head> <meta charset=\"大众UTF-8\"大众> <meta name=\公众viewport\"大众 content=\公众width=device-width, initial-scale=1.0\"大众> <!-- 以上这句是设备适用，让网页适用于手机 --> <title>Document</title> <style> .header{ background: #ccc; text-align: center; padding: 20px; / 形成内部间隔 / } body{ margin: 0; / 去掉网页边的空隙 / } .navmenu{ background: #333; } .navmenu a{ text-decoration: none; / 去掉链接下划线 / color: white; / 链接字的颜色 / display: inline-block; / 让元素变成可调块 / padding: 10px 20px; / 元素内部间隔高下为10旁边为20 / } .navmenu a:hover{ / 鼠标在链接上时 / color: black; / 字的颜色 / background: #ddd; / 背景色 / } .column{ float: left; / 三个块都要左浮动 / padding: 10px; / 设置内部间隔10px / } .side{ width: 25%; / 宽度为父元素的25% / } .main{ width: 50%; / 宽度为父元素的50% / } { box-sizing: border-box; / 这句的浸染便是让盒子的padding不算入盒子的宽度 / } .footer{ width: 100%; float: left; / 左浮动 / background: #ccc; / 背景色 / padding: 10px; / 设置内部间隔10px / text-align: center; / 内容水平居中 / } @media screen and (max-width: 600px) { .side,.main { width: 100%; } } / 屏幕宽度底于600像素时，侧栏和主内容垂直排列。 / </style></head><body> <div class=\"大众header\"大众> <h1>我是网页的头部</h1> <p>这里一样平常放网站名logo和banner广告等</p> </div> <!-- 先做网页的头部 --> <div class=\"大众navmenu\"大众> <a href=\公众#\"大众>导航项</a> <a href=\公众#\"大众>导航项</a> <a href=\"大众#\"大众>导航项</a> </div> <!-- 以上是导航条 --> <div class=\"大众row\"大众> <div class=\公众column side\"大众> <h2>我是侧栏</h2> <p>我是侧栏我是侧栏我是侧栏我是侧栏我是侧栏我是侧栏我是侧栏我是侧栏</p> </div> <!-- 这里的盒子用了两个样式，分别是column和side --> <div class=\"大众column main\公众> <h2>我是主内容</h2> <p>我是美女我是美女我是美女我是美女我是美女我是美女我是美女我是美女 我是美女我是美女我是美女我是美女我是美女我是美女我是美女我是美女 </p> </div> <!-- column算是一个公用的样式，三个栏都有 --> <div class=\"大众column side\"大众> <h2>我是侧栏</h2> <p>我是侧栏我是侧栏我是侧栏我是侧栏我是侧栏我是侧栏我是侧栏我是侧栏</p> </div> </div> <!-- 以上是网页的主体内容块 --> <div class=\"大众footer\公众> <p>底部，一样平常声明版权，交情链接或是备案信息等等。</p> </div> <!-- 以上是网页的底部内容块 --></body></html>
