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

图0

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

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

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

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

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

图1

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

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

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

图2

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

图3

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

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

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

图4

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

图5

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

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

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

图6

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

图7

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

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

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

图8

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

图9

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

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

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

图10

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

图11

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

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

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

图12

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

图13

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

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

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

图14

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

图15

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

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

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

图16

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

图17

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

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

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

图18

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

图19

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

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

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

图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>

本文来自网络,不代表唯米智能立场,转载请注明出处。如有侵权请联系删除。http://www.weiseo.cc/b/3632.html

作者: 小易

上一篇
下一篇
联系我们

联系我们

在线咨询: QQ交谈

邮箱: 2013723@qq.com

工作时间:周一至周五,9:00-17:30,节假日休息

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

返回顶部
在线客服系统