CSS 经典导航

来源：互联网发布：python 登录界面编辑：程序博客网时间：2024/06/08 04:43
<!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>
阅读全文
0 0