chenshizero的专栏

仅仅是个人收集

详解学习DIV+CSS之二-导航栏实例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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(http://www.hsptc.com/cssImg/bj.jpg) repeat-y;
 width
: 200px;
 overflow
: hidden;
}

#nav li 
{
 background
: url(http://www.hsptc.com/cssImg/mylan.gif) no-repeat left center ;
 height
: 35px;
 width
: 190px;
 padding-top
:15px;
}


#nav a 
{
 background
: url(http://www.hsptc.com/cssImg/lanbj2.gif) 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(http://www.hsptc.com/cssImg/lanbj3.gif);
 color
: #FFFFFF;
}

-->
</style>
</head>

<body>
<ul id="nav">
 
<li>
   
<href="#">彻底弄懂CSS盒子模式1</a>
 
</li>
 
 
<li>
   
<href="#">彻底弄懂CSS盒子模式2</a>
 
</li>
 
 
<li>
   
<href="#">彻底弄懂CSS盒子模式3</a>
 
</li>
 
 
<li>
   
<href="#">彻底弄懂CSS盒子模式4</a>
 
</li>
 
 
<li>
   
<href="#">彻底弄懂CSS盒子模式5</a>
 
</li>
</ul>
</body>
</html>


 

 原文地址是 http://www.showweb.cn/info.asp?articleid=1384

阅读更多
文章标签: css div url html float
个人分类: WEB
上一篇DIV+CSS学习手册 DIV+CSS之一 DIV排版快速入门
下一篇div 的定位(1)
想对作者说点什么? 我来说一句

左侧导航菜单div+css样式

2015年11月03日 44KB 下载

divcss详解实例

2014年11月02日 261KB 下载

没有更多推荐了,返回首页

关闭
关闭