图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图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>。
本文关键词：亚搏手机版全站app下载，亚搏手机app下载体育官网，亚搏手机版官方登录网站登录入口，亚搏手机app客户端下载
本文来源：亚搏手机版全站app下载，亚搏手机app下载体育官网，亚搏手机版官方登录网站登录入口，亚搏手机app客户端下载-www.chiweilawfirm.com
