此文中使用一个经典的静态网页练习--polo360网页，对HTML/CSS基础入门学习完成后，进行一个总结与实践。
所要实现的最终静态网页polo360网页如下图：
polo360.png
分析上图可把图片分4个部分：如下图
分块.png
包括绿色部分的header块，红色部分的banner块，蓝色部分的content块，紫色部分contact块以及底部的footer块，大背景使用body设置
静态网页制作使用到的软件HBuilder 、photoshop2015
这里使用外联方式的css设置样式，使得结构与表现完全分开，本文中的图片均可通过photoshop截取，位置也可通过其测量
1.最底层背景设置
由于最低层，结构简单只有一块黑色举行，所以这里直接在body中编程。这里可以通过photoshop取得小段从网页顶部到黑色边框底部的图片，通过css中背景设置语句实现，如下：
css语句.png
2.header块
header块可细分为以下几个部分，如图：
图片.png
其中POLO360和粗体的文字均为超链接，分为两个块，左边为图片超链接，右边为一个无序列表，可通过设置框边距，浮动对元素进行位置设定，可用过文字颜色，字体设置，背景，伪类等对元素实现效果进行设置，表现均在css中设置。
html.png
css.png
3.banner块
banner块中结构比较简单,html中只需要设置一张图片即个超链接,css中注意协调位置.代码如下
html.png
css.png
4.content块
content块可分为以下几个部分:
图片.png
右边两图如左边.
在html语句中,顶端设置为一个一级标题标签,左一图,从上到下,依次为二级标题标签,图片,p标签,图片超链接.另良图类似.使用css进行位置及样式设置.代码如下图
html.png
css.png
5.contact块
contact块可分为以下几个部分:
图片.png
此处以中间图为例,两边类似,此块中相对于content块,显示上新增表单和按钮.
在html语句中,左二图,从上到下,依次为二级标题标签,表单输入文本,表单输入文本,文本域,按钮.使用css进行位置及样式设置.代码如下图:
html.png
css.png
6.footer块
此块html结构设置也较为简单.只需要一块背景颜色及一些文字链接.在css语句中在设置文字位置上稍微有些繁琐.代码如图
html.png
css.png
至此就可以实现一个静态页面的制作,在制作过程中,图片的截取过程,相对比较繁琐,在css设置中要注意高度塌陷问题,这里容易导致显示结果与设置不一致.
网友评论