源码：
<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-repeat: no-repeat;//背景偏移实现；
//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; float: left; 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'); background-repeat: no-repeat; } .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>效果分享：
