吉軟—Java-Css+Div 實現導航
阿新 • • 發佈：2020-10-22
原始碼：
<ul裡面的li向左浮動以及塊狀顯示來實現導航的橫排列 以及新增背景>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Demo</title>
<!-- 以下是關鍵程式碼 -->
<style type="text/css">
body {
background-image: url("images/body_bg.jpg");
//背景偏移實現；
//background-position: -200px 0px;
}
.zong {
width: 1350px;
height: 50px;
margin: 0 auto;
}
.Kong {
width: 100%;
height: 113px;
}
.div_1 ul {
margin: 0;
background-color: #000000;
}
.div_1 ul li {
text-align: center;
line-height: 45px;
height: 60px;
list-style: none;
width: 140px;
//塊級顯示;
display: block;
background-image: url("images/nav_bg.jpg");
}
.div_1 ul li a {
font-weight: bold; text-decoration : none;
color: #FFFFFF;
text-decoration: none;
}
.leftDiv {
margin-left: 20px;
float: left;
height: 100px;
width: 20px;
background-image: url('images/left.jpg');
}
.rightDiv {
float: left;
height: 100px;
width: 20px;
background-image: url('images/right.jpg');
background-repeat: no-repeat;
}
.line {
float: right;
margin-top: 3px;
}
</style>
</head>
<body>
<!-- 上方空白區域 -->
<div class="Kong"></div>
<!-- nav導航 -->
<div class="zong">
<div class="div_1">
<!-- 導航左邊背景 -->
<div class="leftDiv"></div>
<ul>
<li><a href="#">網站首頁</a><img src="images/line.jpg" class="line" alt=""></li>
<li><a href="#">公司新聞</a><img src="images/line.jpg" class="line" alt=""></li>
<li><a href="#">行業動態</a><img src="images/line.jpg" class="line" alt=""></li>
<li><a href="#">基地管理</a><img src="images/line.jpg" class="line" alt=""></li>
<li><a href="#">會員服務</a><img src="images/line.jpg" class="line" alt=""></li>
<li><a href="#">網上購物</a><img src="images/line.jpg" class="line" alt=""></li>
<li><a href="#">產品展示</a><img src="images/line.jpg" class="line" alt=""></li>
<li><a href="#">關於我們</a><img src="images/line.jpg" class="line" alt=""></li>
<li><a href="#">ENGLISH</a></li>
</ul>
<div class="rightDiv"></div>
</div>
</div>
</body>
</html>
效果分享：
轉載於:https://my.oschina.net/ZxArvin/blog/1815379