吉软—Java-Css+Div 实现导航

最新推荐文章于 2024-08-10 10:05:30 发布

weixin_33950035

最新推荐文章于 2024-08-10 10:05:30 发布

阅读量114

点赞数

文章标签： java python

原文链接：https://my.oschina.net/ZxArvin/blog/1815379

版权

2019独角兽企业重金招聘Python工程师标准>>>

源码：

<ul里面的li向左浮动以及块状显示来实现导航的横排列以及添加背景>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Demo</title>

//背景偏移实现；

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

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