导航栏浮动案例

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>行业新闻</li>
				<li>企业动态</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;}, 这个规则有点性能问题, * 是开发中应该尽可能避免的, 因为为误杀友军, 建议你只初始化你用到标签名, 不要这样生猛, 还有, 0px, 应该直接写与: 0, 后面不要加单位 , 这样解析的效率是最快的

导航栏浮动案例

Popular Entries