css div ul li 导航栏(竖)

代码

<! 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=utf-8" />
< title > 无标题文档 </ title >
</ head >
< style >
#left {
float : left ;
background-image : url(../images/menu.jpg) ;
width : 290px ;
height : 550px ;
padding-top : 350px ;
/* #first*中height值等于#left中height值和padding-top值的和 */
}
/* 左侧导航部分 */
#nav {
width : 220px ;
margin-left : 70px ;
text-align : right ;
}


#nav a {
color : #000 ;
height : 24px ;
display : block ;
text-decoration : none ;
}

#nav a:hover {
width : 220px ;
background : url(../images/left_background_1.gif) ;
list-style : none ;
color : #f1dcb1 ;
}

#nav li {
width : 170px ;
padding-right : 50px ; /* li的width值与padding-right值和不能超过nav的width值 */
line-height : 25px ;
list-style : none ;
background : url(../images/left_background_2.gif) ;
font : Verdana, Geneva, sans-serif ;
float : left ;
}



</ style >
< body >
<!-- 左边的层 -->
< div id ="left" >

< div id ="nav" >
< ul >
< li >< a href ="index.html" > HOME &nbsp;&nbsp;&nbsp;&nbsp; 网站首页 </ a ></ li >
< li >< a href ="dywh.html" > CULTURE &nbsp;&nbsp;&nbsp;&nbsp; 公司简介 </ a ></ li >
< li >< a href ="service.html" > SERVICE &nbsp;&nbsp;&nbsp;&nbsp; 解决方案 </ a ></ li >
< li >< a href ="design.html" > DESIGN &nbsp;&nbsp;&nbsp;&nbsp; 设计展示 </ a ></ li >
< li >< a href ="plans.html" > PLANS &nbsp;&nbsp;&nbsp;&nbsp; 策划案例 </ a ></ li >
< li >< a href ="about.html" > ABOUT &nbsp;&nbsp;&nbsp;&nbsp; 关于我们 </ a ></ li >
< li >< a href ="link.html" > CONTACT &nbsp;&nbsp;&nbsp;&nbsp; 联系我们 </ a ></ li >
</ ul >
</ div >
</ div >



</ body >
</ html >

 

转载于:https://www.cnblogs.com/dudu837/archive/2010/11/16/1878497.html