<!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-Type" content="text/html; charset=utf-8" />

 <title>CSS练习</title>

  <style type="text/css">

      #nav{

          width:400px;·/* 控制导航总宽度 */

      }

      /* 取消列表样式，内外补间为零 */

      #nav ul{

          list-style:none;

          margin:0;

          padding:0;

      }

      /* 横排：控制导航高度 ，使用float 指定每个li的宽度和高度 */

      #nav li{

          float:left;

          width:100px;

          height:30px;

          line-height:30px;  /* 文字垂直居中 指定行高为li高度 自动垂直居中 */

      }

      /* 将a标签区块化就可以指定高度 */

      #nav a{

          display:block;

          height:100%;

          text-decoration:none;   /* 取消a标签下划线 */

          text-align:center;      /* 文字水平居中显示 */

          background-color:#000;

          color:#fff;

      }

      /* 鼠标放上效果 */

      #nav a:hover{

          background-color:#eee;

          color:#000;

      }

  </style>

 </head>

 <body>

     <div id="nav">

         <ul>

             <li><a href="http://www.cnblogs.com/Orange-C/p/4042459.html">首页</a></li>

             <li><a href="http://www.cnblogs.com/Orange-C/p/4042459.html">个人介绍</a></li>

             <li><a href="http://www.cnblogs.com/Orange-C/p/4042459.html">作品展示</a></li>

             <li><a href="http://www.cnblogs.com/Orange-C/p/4042459.html">联系我们</a></li>

         </ul>

     </div>

 </body>

 </html>

Ul li 横排 菜单的更多相关文章

  1. Ul li 竖排 菜单

    Ul li 竖排 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...

  2. ul li设置横排，并除去li前的圆点

    效果预览:http://hovertree.com/texiao/css/ 如何用CSS制作横向菜单 让ul li横向排列及圆点处理 我们先建立一个无序列表,来建立菜单的结构.代码是: <ul& ...

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

    原文地址: http://www.cnblogs.com/amylis_chen/archive/2011/09/24/2188398.html 第一步:建立一个无序列表 我们先建立一个无序列表,来建 ...

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

    竖状菜单: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...

  5. 菜单制作:ul li横向排列

    CSS菜单制作 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  6. ul li横向排列及圆点处理

    如何用CSS制作横向菜单 让ul li横向排列及圆点处理   第一步:建立一个无序列表 我们先建立一个无序列表,来建立菜单的结构.代码是:<ul> <li><a href ...

  7. css案例学习之div ul li a 实现导航效果

    效果 代码 <html> <head> <title>无需表格的菜单</title> <style> body{ background-co ...

  8. ul li 好友列表

    <div class="col-md-4 mt"> <div class="friend-list"> <h4 class=&qu ...

  9. 竖向折叠二级导航JS代码（可防刷新ul/li结构）

    <html xmlns="http://www.w3.org/1999/xhtml"><head runat="server">    ...

随机推荐

  1. pages 元素（ASP.NET 设置架构）web.config 详解

    pages 元素(ASP.NET 设置架构)    buffer="[True|False]"   enableEventValidation="[True|False] ...

  2. linux type命令用法_转

    转自:http://codingstandards.iteye.com/blog/831504 在脚本中type可用于检查命令或函数是否存在,存在返回0,表示成功:不存在返回正值,表示不成功. $ t ...

  3. gdb使用_转

    在编程调试中,经常出现段错误,此时可用gdb调试.具体方法为注册段错误信号处理函数,在处理函数中启动gdb.具体代码如下:void segv_handler(int no) { char buf[51 ...

  4. hadoop wordcount

    Mapper // map的数量与数的分片有关系 public class WCMapper extends Mapper<LongWritable, Text, Text, LongWrita ...

  5. 在CDialog::OnInitDialog设置DEFAULT-BUTTON的注意事项

    如果你的Dialog是在资源编辑器里面创建的,那么你首先要去资源编辑器把对应的Button的Default Button选项设置为True 另外,如果你使用GotoDlgCtrl,那么记得OnInit ...

  6. LUA 模块化编程例子

    LUA module lua语言中module接口用于定义一个模块, 将模块的实现封装到一个文件中, 开放的 函数 和 数据, 不以local标识,然后在其他文件中, 引用此模块, 使用模块名(一个命 ...

  7. curl获得http响应码 302 和绑定host

    shell curl 取得HTTP返回的状态 获取状态码 curl -I -m 10 -o /dev/null -s -w %{http_code} www.baidu.com 获取时间   curl ...

  8. 伪类写border， transform: scale3d() 及兼容性

    .top::before { content: ""; position: absolute; left: 0; width: 200%; height: 0; border-to ...

  9. Java基础之访问文件与目录——移动或复制文件和目录（MoveAndCopyFiles）

    控制台程序,创建和删除目录以及复制和移动文件. import java.nio.file.*; import java.nio.file.attribute.*; import java.io.IOE ...

  10. ssh两台机器建立信任关系无密码登陆

    在建立信任关系之前先看看基于公钥.私钥的加密和认证. 私钥签名过程 消息-->[私钥]-->签名-->[公钥]-->认证 私钥数字签名,公钥验证 Alice生成公钥和私钥,并将 ...