导航栏浮动案例

abstract：<!DOCTYPE html> <html> <head> <title>导航栏浮动案例</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css

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

*{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%; }

Correcting teacher：天蓬老师Correction time：2019-01-13 09:21:19
Teacher's summary：class="nav_a">, class和id的值, 中间推荐使用中连(-)线连接, 这也是行业规范, 并不是强制的, 但大家都在遵守的, 希望你也能采用,如果你坚持用下划线, 请坚持一个项目采用统一的风格就好

导航栏浮动案例

Popular Entries