亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

導航欄浮動案例

Original 2019-01-13 01:52:44 247
abstract：*{margin: 0px;padding: 0px;} a{text-decoration: none;color: #000} .clear{clear: both;} .header_nav{width: 1400px;height: 80px;background-color: #F5F5F5;} .nav_l 
*{margin: 0px;padding: 0px;}
a{text-decoration: none;color: #000}
.clear{clear: both;}
.header_nav{width: 1400px;height: 80px;background-color: #F5F5F5;}
.nav_left{height: 80px;width: 400px;float: left;}

.logo{height: 37px;width: 120px;margin-top: 12px;margin-left: 55px;}
.logo_span{margin-left: 55px;}
.logo_txt{border: 3px solid;width: 138px;height: 22px;margin-left: 195px;}
.nav_center{height: 80px;width: 600px;float: left;}
.nav_center ul{list-style: none;display: none;position: absolute;}
.nav_center ul li{text-align: center;line-height: 60px;width: 100px;height: 60px;}
.nav_center ul li:hover{background-color: #00D094;}
.nav_a{display: inline-block;width: 100px;text-align: center;line-height: 80px;font-size: 18px;position: relative;}
.nav_a:hover{border-bottom: 3px solid #00D094;}
.nav_a:hover ul{display: block; border: 2px solid #F5F5F5;border-top:none;}
.nav_right{height: 80px;width: 400px;float: left;}
.nav_right_a{text-align: center;display: inline-block;line-height: 40px;width: 120px;background-color: #00D094;height: 40px;
color: #fff;margin-top: 20px;margin-left: 20px;border-top-left-radius: 40%;border-bottom-right-radius:50%; }
<!DOCTYPE html>
<html>
<head>
	<title>導航欄浮動案例</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<div class="header_nav">
	<div class="nav_left">	
		<img src="images/logo.png" class="logo">
		<div class="logo_span">人工智能名片</div>
		
		<div class="logo_txt">做最好的名片</div>
	</div>
	<div class="nav_center">
		<a href="#" class="nav_a">首頁</a>
		<a href="#" class="nav_a">產品中心</a>
		<a href="#" class="nav_a">服務案例</a>
		<a href="#" class="nav_a">新聞資訊
			<ul>
				<li>行業(yè)新聞</li>
				<li>企業(yè)動態(tài)</li>
			</ul>
		</a>
		<a href="#" class="nav_a">關于我們</a>
	</div>
	
	<div class="nav_right">
		<a href="#" class="nav_right_a">立即登陸</a>
		<a href="#" class="nav_right_a">免費注冊</a>
	</div>
<div class="clear"></div>
</div>
</body>
</html>


Correcting teacher：天蓬老師Correction time：2019-01-13 09:19:45
Teacher's summary：*{margin: 0px;padding: 0px;}, 這個規(guī)則有點性能問題, * 是開發(fā)中應該盡可能避免的, 因為為誤殺友軍, 建議你只初始化你用到標簽名, 不要這樣生猛, 還有, 0px, 應該直接寫與: 0, 后面不要加單位 , 這樣解析的效率是最快的

Release Notes

Popular Entries