实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
width: 1200px;
margin: 0 auto;
}
ul{
list-style: none;
}
a{
text-decoration: none;
color: #000;
}
a:hover{
color:#CC3333;
}
.nav{
height: 50px;
background-color: #fff;
border-bottom: 1px solid #e2e2e2;
text-align: center;
line-height: 50px;
}
.nav li{
float: left;
}
.login-info{
float: left;
height: 50px;
}
#line{
margin: 0 10px;
}
.qq{
background-position: 0 -22px;
display: inline-block;
width: 23px;
height: 22px;
background-image: url(../img/login-info.png);
margin: -2px 8px 0 0;
vertical-align: middle;
}
.admin{
float: right;
width: 150px;
height: 50px;
}
.dow{
width: 50px;
height: 50px;
line-height: 50px;
background: #66CCFF;
margin-right: 5px;
}
/*-------------------属性选器---------------------------------*/
/**[class] {
background-color: red;
}*/
/*li[class="dow"] {
background:red;
}*/
/*li[class ~= "dow"] {
background:red;
}
*/
/* li[class ^= "d"] {
background-color: red;
}*/
/*li[class $= "w"] {
background-color: red;
}*/
li[class *= "o"] {
background-color: red;
}
</style>
</head>
<body>
<div class="nav">
<ul class="login-info">
<li><a href="#" class="qq"></a></li>
<li><a href="">登录</a></li>
<li id="line">|</li>
<li><a href="">註冊</a></li>
</ul>
<ul class="admin">
<li><a href="">admin</a></li>
<li id="line">|</li>
<li class="dow"><a href="">注销</a></li>
</ul>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
