html css 样式 ul li

html css 样式 ul li

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 


  
  
  
 

ul,li{
margin:0px;
padding:0px;
list-style: none;
}

ul{
height:31px;
border-bottom:1px solid #f46d52;
}

li{
width:100px;
height:30px;
border-radius:5px 5px 0px 0px;
border:1px solid #ccc;
border-bottom:none;
text-align: center;
line-height: 30px;
background-color:#EEEEEE;
float: left;
color:black;
font-weight: 800;
margin-left:5px;
}

li:hover{
height:31px;
background-color: white;
color:#FDE7D2;
border:1px solid #f46d52;
border-bottom:none;
cursor:pointer;
}
 




导航1
导航2
导航3



效果图：

这个只是简单的.hover事件，如果要点击得到效果那个需要写js。。。

追问点击得到的效果 js怎么写？ 跪求大神指教追答我也在学习，暂时还没有学习透，不好意思哈！你再问问别人。。。

这个通常是用 border 样式做出来的
有问题可私信我追问怎么联系你 ？追答百度私信