视觉艺术

HTML/CSS制作一个静态网页

2019-05-16  本文已影响252人  飞灰非辉
 此文中使用一个经典的静态网页练习--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设置中要注意高度塌陷问题,这里容易导致显示结果与设置不一致.
上一篇下一篇

猜你喜欢

热点阅读