摘要：<!DOCTYPE html> <html> <head> <title>導(dǎo)航欄浮動(dòng)案例</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css
<!DOCTYPE html> <html> <head> <title>導(dǎo)航欄浮動(dòng)案例</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">產(chǎn)品中心</a> <a href="#" class="nav_a">服務(wù)案例</a> <a href="#" class="nav_a">新聞資訊 <ul> <li>行業(yè)新聞</li> <li>企業(yè)動(dòng)態(tài)</li> </ul> </a> <a href="#" class="nav_a">關(guān)于我們</a> </div> <div class="nav_right"> <a href="#" class="nav_right_a">立即登陸</a> <a href="#" class="nav_right_a">免費(fèi)注冊(cè)</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%; }
批改老師：天蓬老師批改時(shí)間：2019-01-13 09:21:19
老師總結(jié)：class="nav_a">, class和id的值, 中間推薦使用中連(-)線連接, 這也是行業(yè)規(guī)范, 并不是強(qiáng)制的, 但大家都在遵守的, 希望你也能采用,如果你堅(jiān)持用下劃線, 請(qǐng)堅(jiān)持一個(gè)項(xiàng)目采用統(tǒng)一的風(fēng)格就好