CSS网页切图实例教程.docx

CSS网页切图实例教程
整体效果图
1、分析网页整体结构，如下图所示，我们把网页分为五个部分。
2、根据上图先写出HTML代码：
<div id=" header ">1</div>
<div id="banner">2<样式方便）。
7、导航的制作，是一个典型的ULLI列表。我们先写出HTML代码，而在我们导航列表之间有一个竖线隔开。
<ul>
<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>
<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="#">这是新闻