CSS网页切图实例教程上

CSS网页切图实例教程上

1、分析网页整体结构，如下图所示，我们把网页分为五个部分。

CSS网页切图实例教程上

2、根据上图先写出HTML代码：

<div id=" header ">1</div>

<div id="banner">2</div>

<div id="nav">3</div>

<div id="main">4</div>

<div id="fotter">5</div>

如果是初学者建议，在每个DIV先用12345代表这是第几个。

3、编写统一样式代码。因为默认HTML元素是有间距，先让这些间距归0。然后在设置UL列表元素去掉小圆点。包括统一我们文字的大小。以及链接文字的样式

CSS代码如下：

<style type="text/css">

*{

margin:0px;

padding:0px;

}

Ul{list-style:none;}

A{color:#000;font-size:13px;text-decoration:none;}

A:hover{text-decoration:underline;}

</style>

CSS样式代码解释：

*{

margin:0px;

padding:0px;

}

*代表所有HTML元素，我们让其内外边距归0。这是开始时做法。等全部HTML写完，需要把这个地方根据用到HTML换成群组选择符如 body,div,ul,li等。也就是说。我们只需要把使用的HTML进行归0即可。

Ul{list-style:none;}

让UL没有小圆点

A{color:#000;font-size:13px;text-decoration:none;}

A:hover{text-decoration:underline;}

针对A链接进行设置，首先让A链接的四种状态改变为文字颜色是黑色的，然后文字大小是13PX。去掉A链接的下划线

A:hover：当鼠标悬停时，我们使其出现下划线

4、我们使用PS测量网页实际宽度为1000像素，然后我们为五个DIV设置统一居中。

CSS代码如下：

#header,#banner,#nav,#main,#footer{

margin:0px auto;

width:1000px;

}

5、现在开始制作头部HEAD部分，在这个部分我们通过两步去实现。在顶部下方有一个背景。然后是公司LOGO标志

CSS网页切图实例教程上

首先我们先把背景写出来：

代码如下：

#header{

height:102px;

background:url(p_w_picpaths/topdi.gif) no-repeat;

}

LOGO直接放图也可以。从网站优化角度考虑。我们可以使用以图换字方式。然后我们添加HTML代码：

<h1>放网站的标题</h1>

H1网页认为最重要的标题。所以我们把LOGO放到H1里面

CSS代码：

#header h1{

height:82px;

width:231px;

background:url(p_w_picpaths/logo.gif) no-repeat;

text-indent:-999px;

}

代码解释：

我们为H1先设置宽度与高度。然后添加背景。最后使用text-indent:-999px;让文字从画面缩进走。

6、制作网页的BANNER部分。我们这个显示广告的地方一般有两种情况，要么就是使用轮播图，要么放一个动画。但是我们这个地方只需要完成一个背景然后在背景显示我们的广告语。制作过程。先让DIV中显示背景，然后在DIV里放一个段落去显示文字

HTML代码如下：

<div id="banner">

<p>

力争行业<span>典</span>范<br/>

STRIVE FOR A MODDEL

</p>

</div>

CSS样式如下：

#banner{

height:268px;

background:url(p_w_picpaths/banner.jpg) no-repeat;

}

#banner p{

color:#FFF;

padding-top:80px;

padding-left:80px;

font-size:14px;

font-weight:bold;

}

解释：1、让这个段落文字颜色为白色

2、距顶与距左空一个间隔。

3、设置文字大小与文字加粗

#banner p span{

color:#FF0;

font-size:18px;

}

解释：段落中某个字需要重点强调。可以在这个字的四周添加一个SPAN（PS：SPAN是无意义的标签，就是为了添加样式方便）。