网页切图的CSS和布局经验与要点

初学者在网页切图时，往往感到无从下手。在此，我将分享一些网页设计的经验和要点，帮助大家更好地进行网页制作。

关于网站LOGO部分的设计。我们通常使用H1+a链接的方式，并采用以图换字技术。在CSS中，我们指定对象的宽与高，将A元素设为块状元素。这样的设计有利于后期的网站优化。代码示例如下：

```css

background:url(../images/logo.jpg) left top no-repeat;

width:300px;

height:75px;

text-indent:300px;

white-space:nowrap;

overflow:hidden;

```

网站中的LOGO右侧通常会有一个电话图标。我们可以将其视为两列布局，同样可以采用以图换字技术，并结合两列布局来实现。这样，你就可以轻松完成这一部分的设计。

接下来，关于两列布局中间空出的间距问题。要注意的是，实现布局不一定非得是多个DIV元素，任何块状元素都可以实现布局，如div、h1、li等。这些块状元素都可以实现浮动。

在网页布局过程中，我们可能会遇到两种情况。一是宽度计算精确，毫无误差；二是宽度没有计算到位，中间产生间距。对于第二种情况，我们需要在下方的布局中考虑清除浮动。清除浮动的代码示例如下：

```css

.clear{clear:both;}

```

导航的制作通常基于UL和LI，大多时候是通过背景图片进行控制。

很多网站上都会有产品展示，这时要学会使用dl、dt、dd元素。这些元素可以方便地展示图片、标题和描述。

网站的主要内容区域通常是两列、三列或四列布局。重要的是要以盒模型的方式去计算块元素。宽类加起来不能超过外侧DIV的宽度。即：width+border+padding+margin=外层宽度。

对于初学者，建议先写出三列内容，然后进行CSS控制，先把浮动和宽度全部计算好，再为每一列填充内容。

希望这些经验和要点能对大家有所帮助。在网页切图的过程中，还需要不断实践、学习和，才能不断提升自己的技能。