css网页切图实例教程

(整体效果图)

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

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

12345

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

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

CSS代码如下

　　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标志

我们先把背景写出来

　　代码如下

#header{height:102px;background:url(images/di.gif) no-repeat;}

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

放网站的标题

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

CSS代码

#header h1{height:82px;width:231px;background:url(images/logo.gif) no-repeat;text-indent:-999px;}

　　代码解释

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

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

HTML代码如下

力争行业典范
STRIVE FOR A MODDEL

CSS样式如下

#banner{height:268px;background:url(images/banner.jpg) no-repeat;}#banner p{color:#FFF;padding-:80px;padding-left:80px;font-size:14px;font-weight:bold;}

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

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

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

#banner p span{color:#FF0;font-size:18px;}

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

7、导航的制作，是一个典型的ULLI列表。我们先写出HTML代码，而在我们导航列表之间有一个竖线隔开。

• |
• |
• |
• |
• |
• |
• |
• |

根据HTML去写CSS样式。

#nav{height:25px;background:#000;}

　　CSS样式代码的解释

导航的父元素DIV设定高度。然后设定背景颜色为黑色

#nav ul{list-style:none;padding-left:10px;}

CSS样式代码的解释

让导航UL去掉默认小圆点。让整体UL居左空一定距离。

#nav ul li{color:#fff;float:left;line-height:25px;}

CSS样式代码的解释

让导航中具体项目文字颜色改成白色，因为LI元素是块元素的。所以我们为其设置浮动。这样就能让导航同一行显示。line-height:25px;是为了让LI在导航垂直居中。

#nav ul li a{color:#FFF;font-size:13px;padding:0px 15px;text-decoration:none;}

CSS样式代码的解释

设置导航的链接状态，为什么设置两次颜色，LI设置白色，最主要是为了竖线用的。而链接只能通过A这个样式进行设置。而且padding:0px 15px;这个属性是针对竖线使其在两个导航文字正中间。

#nav ul li a:hover{color:#FF0;}

CSS样式代码的解释

设置鼠标悬停时。改变一下链接的颜色

8、设置网页主体内容区域在之前已经分析过了。这是一个典型的两列居中布局。我们是让4先设置宽度，并让其居中。然后在这个DIV中再嵌套DIV。然后让嵌套的DIV两列布局

HTML代码

公司新闻

• 2015-5-10
省略……

公司产品

HD32B68S

所属类别: CRT外壳

名称 HD32B68S

浏览数 52 次

HD32B68S

所属类别: CRT外壳

名称 HD32B68S

浏览数 52 次

HTML代码解释

1、 栏目名称标题。我们采用H4或者H3标记，一方面有利于样式的编写，二方面来说。在网站优化方面，相对比较重要的文字，在这里采用H4

2、 新闻典型的ULLI列表

3、 而右侧产品。使用的是DL DT DD叙述式清单。DT往往用于标题。而DD用于描述。这样的话。我们可以认为产品图片是标题。而产品的各个属性是描述。

　　进行样式的编写

#main{clear:both;padding:20px 0px;}

　　CSS样式代码的解释

1、 clear:both;表示清除浮动。为什么要写这个。是因为导航的LI元素写浮动了。 而且如下图所示会有一部分空白。这样就会影响下方网页内容。所以在主体内容上要先清除浮动。

2、 padding:20px 0px;让主体内容居顶与居顶留一定间隔

#main .sider{width:370px;margin:0px 20px;float:left;}

CSS样式代码的解释

是个两列布局，先让左侧新闻模块。设置宽度，并且float浮动。然后设置与产品模块的间距。

#main .sider h4,#main .container h4{background:url(images/libiao.jpg) no-repeat;text-indent:2em;font-size:14px;padding-bottom:5px;}

CSS样式代码的解释

1、 新闻的栏目名称与产品栏目是一样的，所以用到一个群组选择符

2、 我们栏目名称小图标做成背景。让文字缩进，再控制一下文字大小即可。

#main .sider ul{list-style:none;}#main .sider ul li {height:24px;line-height:24px;border-bottom:1px dotted #c;}

CSS样式代码的解释

让新闻列表设置一定高度，并且垂直居中。在底部加一条虚线（border-bottom:1px dotted #c;）#main .sider ul li a{font-size:13px;text-decoration:none;color:#666;}

CSS样式代码的解释

控制新闻列表的链接状态去掉下划线text-decoration:none;设置文字颜色

#main .sider ul li a:hover{color:#F00;}#main .sider ul li span{font-size:13px;color:#666;padding-left:60px;}#main .container{width:570px;margin:0px 20px 0px 0px;float:left;}

CSS样式代码的解释

1、 设置产品内容区域宽度与浮动

2、 570PX+20PX+370PX+40PX 正好1000PX。这个地方是典型的盒模型。要理解。这些值都是怎么得来的。

#main .container dl{width:260px;float:left;}

CSS样式代码的解释

我们采用DL清单列表，这样的话。我们的产品是并列。只需要让DL浮动一下即可。也有利于后台程序循环输出内容

#main .container dl dt{float:left;}

CSS样式代码的解释

让DL中的标题DT浮动

#main .container dl dd{font-size:13px;color:#333;text-indent:1em;height:22px;}

CSS样式代码的解释

控制产品描述的文字具体属性就可以。

建议大家采用DL DT DD去写

大家可以尝试写一下底部信息

作者css教程 .divcss8.