css网页切图实例教程

(整体效果图)

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

 

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

 

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

代码如下：

#header{
height:102px;
background:url(images/topdi.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代码如下：

<div id="banner">
<p>
力争行业<span>典</span>范<br/>
strive for a moddel
</p>
</div>

css样式如下：

#banner{
height:268px;
background:url(images/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是无意义的标签，就是为了添加样式方便)。

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

 

<ul>
<li><a href="#">divcss8.com首页</a>|</li>
<li><a href="#">关于捷福</a>|</li>
<li><a href="#">产品信息</a>|</li>
<li><a href="#">新闻动态</a>|</li>
<li><a href="#">人力资源</a>|</li>
<li><a href="#">公司首页</a>|</li>
<li><a href="#">公司首页</a>|</li>
<li><a href="#">公司首页</a>|</li>
<li><a href="#">公司首页</a></li>
</ul>

 

根据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、设置网页主体内容区域：在之前已经分析过了。这是一个典型的两列居中布局。我们是让<div id="main">4</div>先设置宽度，并让其居中。然后在这个div中再嵌套div。然后让嵌套的div两列布局

 

html代码：

<div class="sider">
<h4>公司新闻</h4>
<ul>
<li><a href="#">这是新闻标题1</a><span>2015-5-10</span></li>
省略……
</ul>
</div>
<div class="container">
<h4>公司产品</h4>
<dl>
<dt><img src="images/chanpin.jpg"/></dt>
<dd>hd32b68s</dd>
<dd>所属类别: crt外壳</dd>
<dd>名称： hd32b68s </dd>
<dd>浏览数： 52 次 </dd>
</dl>
<dl>
<dt><img src="images/chanpin.jpg"/></dt>
<dd>hd32b68s</dd>
<dd>所属类别: crt外壳</dd>
<dd>名称： hd32b68s </dd>
<dd>浏览数： 52 次 </dd>
</dl>
</div>

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 #ccc;
}

css样式代码的解释：

让新闻列表设置一定高度，并且垂直居中。在底部加一条虚线（border-bottom:1px dotted #ccc;
）
#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教程 www.divcss8.com