CSS 经典导航

最新推荐文章于 2018-07-30 21:31:00 发布

houyanhua1

最新推荐文章于 2018-07-30 21:31:00 发布

阅读量351

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/houyanhua1/article/details/78397760

版权

CSS 专栏收录该内容

65 篇文章 1 订阅

订阅专栏

<!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">
body,ul,li{ margin:0px; padding:0px;border:0px;}
body{background:url(bg.jpg) no-repeat top center;}  /* 背景图不居中的话，背景会随页面的大小改变 */
ul,li{list-style:none;}
.nav{ width:980px; margin:120px auto;height:60px; }  /* 导航的居中，通过导航最外层的div来设置 */
.navleft,.navright{width:17px; height:60px; float:left;}  
.navleft{ background:url(nav_left.jpg);}   /* 导航两端的圆角背景图通过设置单独的div的背景图来实现 */
.navright{ background:url(nav_right.jpg);}
.nav ul{height:60px; background:url(nav_center.jpg) repeat-x; float:left;}  /* 整个导航的背景图通过ul标签来设置 */
.nav li{ float:left; width:105px; line-height:45px; text-align:center; background:url(nav_line.jpg) no-repeat right center;}  /* 分割线通过设置li标签的背景图实现 */
.nav li.nobg{ background:none;}   /* 最后一个li标签没有分割线，不用背景图 */   /* 导航中的所有元素都要设置浮动float，否则会有元素被挤到下一行。宽度设置的不好也有可能被挤到下一行 */
.nav a{ color:#fff; text-decoration:none;}
.nav a:hover{ text-decoration:underline;]
  </style>
 </head>

 <body>
<div class="nav">    <!--导航的最外层要包含一个div，来设置居中-->
	<div class="navleft"></div>  
	<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  class="nobg"><a href="#">联系我们</a></li>
	</ul>
	<div class="navright"></div>
</div>
 </body>
</html>