box模型-导航栏案例
源逸2019-04-21 15:58:43265<!DOCTYPE html>
<html>
<head>
<title>css/box模型导航栏案例/2019/04/21 15:00</title>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico">
<style type="text/css">
*{padding:0px;margin:0px;font-size:20px;}
ul li{list-style:none;}
/* header-top*/
a:link{text-decoration:none;}
a:link{color:rgba(255,255,255,.7);}
a:hover{color:#fff;}
.box-header{
width:100%;
height:60px;
background-color:#000000;
}
.box-header ul li{
float:left;
}
.box-header ul li a{
padding:20px;
line-height:60px;
}
.index{
height:60px;
background-color:#333;
}
.top-item{
float:left;
line-height:60px;
}
/* header-top end */
.box-aoyun{
float:left;
}
.float{margin:0px auto;}
.aoyun-1{
display:inline-block;
width:100px;
height:100px;
border:1px solid #ccc;
border-radius:50px;
}
</style>
</head>
<body>
<div class="box">
<div class="box-header">
<ul>
<li class="index"><a href="#">首页</a></li>
<li><a href="#">html</a></li>
<li><a href="#">css</a></li>
<li><a href="#">javascript</a></li>
<li><a href="#">jquery</a></li>
<li><a href="#">bootstrap</a></li>
<li class="top-item">
<select>
<option>工具下载</option>
<option>在线手册</option>
<option>网站源码</option>
<option>类库下载</option>
</select>
</li>
</ul>
</div>
</div>
<div class="box-aoyun">
<div class="float">
<div class="aoyun-1 center"></div>
<div class="aoyun-1"></div>
<div class="aoyun-1"></div>
</div>
</div>
</body>
</html>