CSS网页切图实例教程下

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>

<li><a href="#">这是新闻标题2</a><span>2015-5-10</span></li>

<li><a href="#">这是新闻标题1</a><span>2015-5-10</span></li>

<li><a href="#">这是新闻标题2</a><span>2015-5-10</span></li>

</ul>

</div>

<div class="container">

<h4>公司产品</h4>

<dl>

<dt><img src="p_w_picpaths/chanpin.jpg"/></dt>

<dd>HD32B68S</dd>

<dd>所属类别: CRT外壳</dd>

<dd>名称： HD32B68S </dd>

<dd>浏览数： 52 次 </dd>

</dl>

<dl>

<dt><img src="p_w_picpaths/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(p_w_picpaths/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