Ul li 横排 菜单

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>CSS练习</title>
 6  <style type="text/css">
 7      #nav{
 8          width:400px;·/* 控制导航总宽度 */
 9      }
10
11      /* 取消列表样式,内外补间为零 */
12      #nav ul{
13          list-style:none;
14          margin:0;
15          padding:0;
16      }
17
18      /* 横排:控制导航高度 ,使用float 指定每个li的宽度和高度 */
19      #nav li{
20          float:left;
21          width:100px;
22          height:30px;
23          line-height:30px;  /* 文字垂直居中 指定行高为li高度 自动垂直居中 */
24      }
25
26      /* 将a标签区块化就可以指定高度 */
27      #nav a{
28          display:block;
29          height:100%;
30          text-decoration:none;   /* 取消a标签下划线 */
31          text-align:center;      /* 文字水平居中显示 */
32          background-color:#000;
33          color:#fff;
34      }
35
36      /* 鼠标放上效果 */
37      #nav a:hover{
38          background-color:#eee;
39          color:#000;
40      }
41  </style>
42 </head>
43
44 <body>
45     <div id="nav">
46         <ul>
47             <li><a href="#">首页</a></li>
48             <li><a href="#">个人介绍</a></li>
49             <li><a href="#">作品展示</a></li>
50             <li><a href="#">联系我们</a></li>
51         </ul>
52     </div>
53 </body>
54 </html>
时间: 2024-10-08 19:38:34

Ul li 横排 菜单的相关文章

Ul li 竖排 菜单

1 Ul li 竖排 2 3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4 <html xmlns="http://www.w3.org/1999/xhtml"> 5 <head> 6 <meta http

[转载] ul li css 做横向菜单

原文地址: http://www.cnblogs.com/amylis_chen/archive/2011/09/24/2188398.html 第一步:建立一个无序列表 我们先建立一个无序列表,来建立菜单的结构.代码是: <ul> <li><a href="1">首页</a></li> <li><a href="2">产品介绍</a></li> <li

DIV+CSS布局重新学习之css控制ul li实现2级菜单

<!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> <meta http-equiv="Content-

Html用ul li实现多级横向菜单

<html> <head> <meta charset="utf-8"/> <title>UL LI 实现多级横向菜单</title> <style> #menu1 li{width:50px;height:20px;background:red;margin-left:2px;float:left} #menu1 li ul{display:none;} #menu1 li:hover ul{display:bl

UL/LI

如何用CSS制作横向菜单 让ul li横向排列及圆点处理    我们先建立一个无序列表,来建立菜单的结构.代码是: <ul><li><a href="1">首页</a></li><li><a href="2">产品介绍</a></li><li><a href="3">服务介绍</a></li>

为什么要使用ul li布局网站导航条?使用ul li布局网站网页导航必要性

会布局的都知道网站导航条布局非常重要,可能一个导航条最终布局效果有时可以使用ul li列表标签布局,有时可以不用ul li布局,而是直接一个div盒子里直接放锚文本超链接的栏目名称,也能实现,看下图. 假如要布局出这样简单导航条效果 比如以下代码: 1.可以使用Ul li布局导航条 <ul> <li><a href="http://www.divcss5.com/">网站首页</a> <li><a href="

ul li 好友列表

<div class="col-md-4 mt"> <div class="friend-list"> <h4 class="title" id="fri-title"><i class="fa fa-angle-down" id="i-icon"></i>选择收件人</h4> <ul class="

ul li做横向导航栏例子

/* ul li以横排显示 */ /* 所有class为menu的div中的ul样式 */ div.menu ul { list-style:none; /* 去掉ul前面的符号 */ margin: 0px; /* 与外界元素的距离为0 */ padding: 0px; /* 与内部元素的距离为0 */ width: auto; /* 宽度根据元素内容调整 */ } /* 所有class为menu的div中的ul中的li样式 */ div.menu ul li { float:left; /*

竖向折叠二级导航JS代码(可防刷新ul/li结构)

<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server">    <title></title>      <style type="text/css">         *{margin:0;padding:0;border:0;}        body         {         font-family: