图片修饰导航实现

最新推荐文章于 2024-07-22 01:00:00 发布

jlhaoran

最新推荐文章于 2024-07-22 01:00:00 发布

阅读量482

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/haoranli/article/details/72882476

版权

HTML 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> new document </title>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <style type="text/css">
    *{margin: 0;padding: 0;}
    .box{width: 980px;
    	height: 60px;
    	margin: 120px auto;
    	
        }
    .left{
    	background: url(nav_left.jpg) no-repeat;
    	width: 17px;
    	height: 60px;
    	float: left;
    }
    .nav{
    	background: url(nav_center.jpg) repeat-x;
    	height: 60px;
    	width: 946px;
    	float: left;
    }
    .right{
    	background: url(nav_right.jpg) no-repeat;
    	width: 17px;
    	height: 60px;
    	float: left;
    }
    .nav ul{
     list-style: none;
    }
    .nav ul li{
    	width: 100px;
    	height: 45px;
    	line-height: 45px;
    	text-align: center;
    	float: left;
    	background: url(nav_line.jpg) no-repeat right center;
    }
    li a{
    	color: #fff;
    	text-decoration: none;
      }
     li a:hover{
     	text-decoration:underline;
     } 
     body{background: url(bg.jpg) top center;}
  </style>
 </head>

 <body>
   <div class="box">
     
     <div class="left"></div>
     
     <div class="nav">
     	<ul>
   		<li><a href="#">网站首页</a></li>
		<li><a href="#">公司新闻</a></li>
		<li><a href="#">行业动态</a></li>
		<li><a href="#">基地管理</a></li>
		<li><a href="#">会员服务</a></li>
		<li><a href="#">网上购物</a></li>
		<li><a href="#">产品展示</a></li>
		<li><a href="#">产品推荐</a></li>
		<li style="background: none"><a href="#">联系我们</a></li>
   	    </ul>
     </div>
   	 <div class="right"></div>

   </div>
 </body>
</html>