HTML导航栏样式设计-优快云博客

本文链接：https://blog.youkuaiyun.com/haoranli/article/details/72875110

<!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.蓝色部分如果不定义一定宽度这个图像就会显示在下面