CSS 浮动应用实例，列表横向显示(导航)

最新推荐文章于 2022-09-12 21:08:40 发布

houyanhua1

最新推荐文章于 2022-09-12 21:08:40 发布

阅读量2.5k

点赞数

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

本文链接：https://blog.youkuaiyun.com/houyanhua1/article/details/78394417

版权

CSS 专栏收录该内容

65 篇文章

订阅专栏

这篇博客通过CSS浮动属性展示了如何将列表项横向排列，创建一个导航菜单。利用`float:left`使`<li>`元素横排显示，并通过设置宽度、背景图片等样式，实现了一个具有视觉效果的导航栏。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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,li{list-style-type:none;}
ul{ width:980px; height:48px;  margin:0 auto;}
li{ float:left; width:87px; height:48px; text-align:center;line-height:48px;   /* float属性，li标签就会横排显示 */
background:url(index_x.jpg) no-repeat;
}
li a{ color:#fff; text-decoration:none; display:block;}
li a:hover{ color:#fff; text-decoration:none; background:url(menu_hover.jpg) no-repeat;}
  </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 style="clear:both;"></div>
</div>
 	
	</body>
</html>