box模型-导航栏案例

abstract：<!DOCTYPE html> <html> <head> <title>css/box模型导航栏案例/2019/04/21 15:00</title> <meta charset="utf-8"> <link rel="shortcut i

<!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>

Correcting teacher：天蓬老师Correction time：2019-04-22 10:17:04
Teacher's summary：尽管现在有了很多种布局模型, 使用弹性布局, 风格布局, 但本质上都是于盒模型来实现的, 所以一定要打好基础

box模型-导航栏案例

Popular Entries