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="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代码解释：
- 栏目名称标题。我们采用H4或者H3标记，一方面有利于样式的编写，二方面来说。在网站优化方面，相对比较重要的文字，在这里采用H4
- 新闻典型的ULLI列表
- 而右侧产品。使用的是DL DT
DD叙述式清单。DT往往用于标题。而DD用于描述。这样的话。我们可以认为产品图片是标题。而产品的各个属性是描述。
最后进行样式的编写
#main{
clear:both;
padding:20px 0px;
}
CSS样式代码的解释：
- clear:both;表示清除浮动。为什么要写这个。是因为导航的LI元素写浮动了。
而且如下图所示：会有一部分空白。这样就会影响下方网页内容。所以在主体内容上要先清除浮动。
- 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样式代码的解释：
- 新闻的栏目名称与产品栏目是一样的，所以用到一个群组选择符
- 我们栏目名称小图标做成背景。让文字缩进，再控制一下文字大小即可。
#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样式代码的解释：
- 设置产品内容区域宽度与浮动
- 最后 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