效果
1.HTML：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link type="text/css" rel="stylesheet" href="css/style.css"> </head> <body> <div id="header"> <div class="navbar"> <img class="navbar-left" src="assets/images/navbar_logo.png"> <ul class="narbar-right"> <li> <a class="active" href="">Home</a> </li> <li> <a class="" href="">product</a> </li> <li> <a class="" href="">About</a> </li> <li> <a class="" href="">JoinUs</a> </li> <li> <a class="" href="">Contact</a> </li> </ul> </div> </div> </body> </html>
2.CSS
body{ background-color: #f9f9f9; margin: 0; padding: 0; } #header{ background-color: #ffffff; width: 100%; height: 52px; border-bottom: 1px solid #e9e9e9; position: fixed; top: 0; left: 0; } .navbar{ margin: 4px 20px; display: block; } .navbar-left{ float: left; width: 44px; } .narbar-right{ float: right; } .navbar li{ list-style-type: none; margin-left: 20px; display: inline-block; } .navbar li .active{ color: #ff7d0a; } .navbar a{ font-size: 16px; font-weight: 800; color: #636363; text-decoration: none; } .navbar a:hover{ color: #ee7204; }
导航栏修改
1.HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link type="text/css" rel="stylesheet" href="css/navbar.style.css"> </head> <body> <div id="header"> <div class="layout"> <ul class="nav"> <li><a class="icon icon-home" href="#">Home</a> </li> <li><a class="icon icon-hot" href="#">Hot</a> </li> <li><a class="icon icon-find" href="#">Find</a> </li> <li><a class="icon icon-game" href="#">Game</a> </li> <li><a class="active" href="#">About</a> </li> <li><a href="#">Contact</a> </li> </ul> </div> </div> </body> </html>
2.CSS
*{ margin: 0; padding: 0; } ul{ list-style: none; } ul li{ display: inline-block; } li a{ text-decoration: none; color: #3b3b3b; font-size: 16px; font-weight: 500; } .layout{ width: 900px; margin: 0 auto; } #header{ margin-top: 20px; } #header .nav{ border-top: 2px solid rgba(227, 19, 220, 0.95); border-bottom: 1px solid rgba(227, 19, 220, 0.95); padding: 15px; } #header .nav li{ width: 120px; height: 20px; line-height: 20px; text-align: center; background-image: url("../assets/images/nav_cutline.png"); background-repeat: no-repeat; } #header .nav li a{ padding: 4px 20px; display: inline-block; } #header .nav li:first-of-type{ margin-left: 60px; } #header .nav li:last-of-type{ /*background-position: right;*/ } #header .nav .active{ color: #ffffff; padding: 2px 15px; border-radius: 20px; display: inline-block; background-color: #e313dc; } #header .nav .icon{ padding-left:40px; background-position: 15px 2px; background-repeat: no-repeat; background-size: 20px 20px; } #header .nav .icon-home{ background-image: url("../assets/images/nav_home.png"); } #header .nav .icon-hot{ background-image: url("../assets/images/nav_hot.png"); } #header .nav .icon-find{ background-image: url("../assets/images/nav_find.png"); } #header .nav .icon-game{ background-image: url("../assets/images/nav_game.png"); }
每个<a>标签前面加入小的背景图片元素