导航栏
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了导航栏相关的知识，希望对你有一定的参考价值。
<!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> <title>简约导航栏</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <link href="images/shs.png" rel="shortcut icon" /> <link rel="stylesheet" type="text/css" href="jian_css.css" /> </head> <body> <header id="header"> <nav id="hd_nav"> <ul> <li> <a href="#">回旧版</a> </li> <li> <a href="#">设为主页</a> </li> <li class="skin"> <a href="#">换肤 <span class="ico"></span> </a> </li> <li class="login"> <img class="avatar" src="http://quc.qhimg.com/dm/20_20_80/t014987b2ab2e751b14.png"/> <a class="a1" href="#">登陆</a> <a class="a2" href="#">注册</a> </li> </ul> </nav> </header> </body> </html>
*{
margin:0;
padding:0;
}
body{
background: url("imgs/bg.jpg");
font-size:12px;
font-family:"Lantinghei SC","Microsoft Yahei",宋体，Arial,Helvetica,sans-serif;
font-style:normal;/*font-style表示为斜体还是正常*/
}
#header{
height:31px;
min-width:990px;
padding:9px 10px 0 0;/*指定内边距*/
position:relative;
}
#hd_nav{
float:right;
}
ul{
list-style:none;
}
#hd_nav li{
border-right:1px solid red;
float:left;
height:14px;
padding:0 10px;/*每个li内容距离自己的li的边距*/
}
a{
text-decoration:none;/*没有下划线*/
cursor:pointer;/*当鼠标移动到上面时，变为小手*/
color:#fff;/*白色*//*注：li标签的颜色不能改变a标签的颜色，只能单独设置a 标签的颜色*/
height:14px;
line-height:14px;
}
#hd_nav .skin a{
padding-left:22px;/*因为换肤两个字和图片均在a标签内，设置两个的间距用padding*/
position:relative;
}
#hd_nav li .ico{
background:url("http://p7.qhimg.com/d/inn/774669ac/t01bc32feb0bbb5c4e0.png" ) no-repeat;
left:0;
position:absolute;
}
#hd_nav .skin .ico{
/*设置图片位置，从而取得小衣服的图片*/
background-position:0 -270px;
height:15px;
top:-1px;
width:16px;
}
a:hover{
text-decoration:underline;/*当鼠标移动到下面时有下划线*/
}
.avatar{
/*将登陆前的图片设置为圆形的*/
/*两个不同，一个是背景，一个是图片*/
border-radius:18px;
box-shadow:0 1px 5px gray;
position:absolute;/*后面两个要上来，所以设为相对定位*/
height:17px;
margin-top:-2px;
}
.a1{
margin-left:28px;/*和左边图片的距离*/
}
.a2{
margin-left:6px;/*和登陆的距离*/
}
以上是关于导航栏的主要内容，如果未能解决你的问题，请参考以下文章