<!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="" />  <link rel="stylesheet" type="text/css" href="" />  <style type="text/css">  *{margin:0; padding:0;}  .nav{  width: 100%;  height: 48px;  background: url(index_x.jpg) repeat-x 0 -100px;  margin-top: 100px;    }    ul{    width: 980px;    margin: 0 auto;    /*居中显示*/    list-style: none;    }    ul li{     width: 87px;     float: left; /*左浮动使列表项横向排列*/     height: 48px;     line-height: 48px;     text-align: center;     background: url(index_x.jpg) no-repeat;    }     li a{    color: #fff;    text-decoration: none;     }     li a:hover{     background: url(menu_hover.jpg) no-repeat;     display: block;  /**行内元素转为块元素*/     }     .clear{clear: both;}  </style> </head> <body>  <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><a href="#">哈哈趣闻</a></li><li><a href="#">段子</a></li><li><a href="#">漫画</a></li><li style="width:2px"></li>    </ul>    <div class="clear"></div> </div>  </body></html>
1.蓝色部分如果不定义一定宽度这个图像就会显示在下面
阅读全文
0 0
导航
