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

来源：互联网发布：神奇先生知乎编辑：程序博客网时间：2024/06/05 04:23

<!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>

阅读全文

0 0