此文中使用一个经典的静态网页练习--polo360网页，对HTML/CSS基础入门学习完成后，进行一个总结与实践。
最终要实现的静态网页如下：
.png
分析上图可以将图片分为4部分：如下图
块.png
包括绿色部分的块、红色部分的块、蓝色部分的块、紫色部分的块以及底部的块，大背景由body设置
用来制作静态网页的软件，
这里使用外部的css来设置样式，使得结构和表现完全分离。 本文的图片可以截取，也可以通过它来测量位置
1.最低背景设置
由于是最底层，结构简单，只容纳一块黑色，所以这里编程直接在body中。 可以通过获取网页顶部到黑色边框底部的一小段图片，通过css中的背景设置语句来实现，如下：
css声明.png
2. 块
该块可以细分为以下部分，如图所示：
图片.png
其中，粗体和粗体文字都是超链接，分为两块。 左边是图片超链接，右边是无序列表。 可以通过设置边框边距和浮动来设置元素的位置。 可以使用文字颜色、字体设置、背景、伪类等设置元素的效果，而表现全部在css中设置。
html.png
css.png
3. 块
区块内的结构比较简单。 只需要在html中设置一张图片或者一个超链接，在css中注意协调位置即可。 代码如下
html.png
css.png
4. 块
块可以分为以下部分：
图片.png
右边的两张图和左边的图是一样的。
在html语句中，设置顶部为一级标题标签，左边为图片，从上到下依次为二级标题标签、图片、p标签、图片超链接。 其他好图也类似。 使用css调整位置和样式设置。 代码如下图
html.png
css.png
5. 块
块可以分为以下部分：
图片.png
这里，以中间的图片为例，两侧类似，在这个块中，相对于该块，显示了一个新的表单和按钮。
html语句中，左边第二张图片，从上到下分别是二级标题标签、表单输入文本、表单输入文本、文本字段、按钮。 使用css设置位置和样式。 代码如下：
html.png
css.png
6. 块
该块的html结构设置也比较简单。 它只需要背景颜色和一些文本链接。 在css语句中设置文本位置有点麻烦。 代码如图
html.png
css.png
至此，静态页面的制作就可以实现了。 在制作过程中，图像截取过程比较繁琐。 在css设置中，要注意高度塌陷的问题，这样很容易导致显示结果和设置不一致。
