相关文章
网站制作制作网页需要学习哪些技术？
北京网页设计建设网站制作网页应该懂得的九件大事
网站建设谈功能结构和页面结构的设计
企通互联div在网页页面中的高度自适应的实现
网页设计怎么让按钮更容易被点击
北京网站制作网页设计基本配色参考色谱——活力
网站制作网页设计基本配色参考色谱——传统
北京网站设计网页设计技巧系列之三 再谈布局
北京网页设计浅议 Web 网页 Form 表单设计技巧
网页设计文字在网页上面的应用
品牌理念
北京网站建设最佳合作伙伴
北京网站建设专家企通互联
竭诚为您提供网站建设服务!
友好连接
文章搜索
你的位置：首页 >> 网页设计 >> 北京网站设计企通互联彻底弄懂CSS盒子模式之二
北京网站设计企通互联彻底弄懂CSS盒子模式之二
用CSS做导航栏也是轻而易举的事情，在本人之前发表的教程中其实也有一个简单的横向导航栏制作，那时只给出了样式代码并没有作太多的解释，这次要做一个相对复杂点的导航栏，为了加深大家对CSS盒子模式的理解，特别选做一个有多个盒子嵌套实现的导航栏。网页设计
北京网站设计
先看实现原理动画演示：
站.长.站
站.长站
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">网页设计 Chinaz^com
<html xmlns="http://www.w3.org/1999/xhtml">北京网站设计
<head>北京网站制作
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />网站设计
<title>彻底弄懂CSS盒子模式(导航栏实例详解)</title>网站制作
<style type="text/css">北京网站设计
<!--网站设计
* {北京网站建设
margin: 0px;北京网站建设
padding: 0px;网页设计
}企通互联
#nav {北京网页设计
background: url() repeat-y;企通互联
width: 200px;网站建设
overflow: hidden;网站建设
}网页设计
#nav li {网站设计
background: url() no-repeat left center ;企通互联 网页设计
height: 35px;北京网站设计
width: 190px;北京网站设计
padding-top:15px;网站制作
}
#nav a {企通互联
background: url() no-repeat left center;网站制作
text-decoration: none;企通互联
height: 20px;北京网站建设 企通互联
width: 155px;北京网站制作
display: block;网页设计
float: right;企通互联
padding: 0px 0px 0px 5px;企通互联
font-weight: bold;网站设计
font-size: 9pt;网页设计
line-height: 20px;北京网站建设
color: #630; 北京网站建设北京网站设计
border-left:10px solid #f90;北京网站制作
}
#nav a:hover {网站建设
background-image: url();北京网站设计
color: #FFFFFF;北京网站建设
}企通互联
-->网站建设
</style>北京网站设计
</head> Chinaz_com
<body>北京网站建设
<ul id="nav">网站设计
<li>网页设计
<a href="#">彻底弄懂CSS盒子模式1</a>企通互联 网站制作
</li>网站设计
网站制作
<li>网站建设
<a href="#">彻底弄懂CSS盒子模式2</a>网站制作
</li>网站设计
北京网页设计
<li>企通互联
<a href="#">彻底弄懂CSS盒子模式3</a>网站制作
</li>北京网站设计
网站制作
<li>北京网页设计
<a href="#">彻底弄懂CSS盒子模式4</a>企通互联
</li>企通互联
北京网站制作
<li>北京网站设计
<a href="#">彻底弄懂CSS盒子模式5</a>北京网站设计
</li>网站制作 北京网页设计
</ul>北京网页设计
</body>北京网站建设
</html> 中.国.站.长.站
现在再看结果图：网页设计
北京网站建设
网页设计
中国.站长站
网站制作
这个导航栏中的链接用到了背景图片的切换效果，鼠标移到链接上导航栏背景图片和文字颜色都会跟着改变，整个导航用到下列4幅图片素材：企通互联
中.国.站.长.站 
北京网站建设 北京网站制作
即链接不同状态的两张背景图片，每条导航左边的“勾月”图形，最外边大盒子1像素高的背景图片。北京网站设计
北京网站制作
看了动画演示和结果图，也了解了用到那些素材，现在就请你带着一股好奇和我一起来完成这个导航栏吧，当做完这个导航栏之后你会发现原来DIV排版那么简单。愿你更有信心学好DIV排版！北京网站制作
Chinaz^com
企通互联
网站制作
这个导航栏中的链接用到了背景图片的切换效果，鼠标移到链接上导航栏背景图片和文字颜色都会跟着改变，整个导航用到下列4幅图片素材：北京网站设计
中国站.长站
网站设计
即链接不同状态的两张背景图片，每条导航左边的“勾月”图形，最外边大盒子1像素高的背景图片。企通互联
网站制作
看了动画演示和结果图，也了解了用到那些素材，现在就请你带着一股好奇和我一起来完成这个导航栏吧，当做完这个导航栏之后你会发现原来DIV排版那么简单。愿你更有信心学好 www.qitongnet.comDIV 网站建设排版！网页设计
Www.Chinaz.com
