<!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. TestNG学习-002-annotaton 注解概述及其执行顺序

    此文主要讲述用 TestNG 基础的 annotation (注解)知识,及其执行的顺序,并通过一个 TestNG 简单的实例演示 annotation 的执行顺序. 希望能对初学 TestNG 测试 ...

  2. A linked list is given such that each node contains an additional random pointer which could point to any node in the list or null. Return a deep copy of the list.

    图解: 此题过程分为三个阶段,分别是 1.负责后面一个节点,并且将这个节点插入到原来链表中  2.复制后面一个节点的random指针. 3 拆分组合链表为两部分. 第一部分代码: while(curr ...

  3. SET Statements for SQLServer

    SET SHOWPLAN_ALL { ON | OFF } It will not execute the TSQL statements. It cannot be specified inside ...

  4. T4模版生成多个实体文件时，提示找不到 Host

    T4模版生成多个实体文件时,提示找不到 Host 使用以下方法,把hostspecific改为true就可以了 hostspecific:有效值true.false,默认为false.如果将此特性的值 ...

  5. Activity的四种启动模式-图文并茂

    1.对于使用standard 模式的活动,系统不会在乎这个活动是否已经在返回栈中存在,每次启动都会创建该活动的一个新的实例.   例如A启动A,A再接着启动A,A继续启动A,然后再分别出栈,如图所示 ...

  6. ASP.NET HighStock

    参考博客HighCharts/Highstock使用小结,使用汉化及中文帮助文档 参考博客highcharts与highstock实例

  7. Thinkphp关闭缓存方法总结（转）

    ThinkPHP在数据缓存方面包括文件方式.共享内存方式和数据库方式在内的多种方式进行缓存,通过插件方式还可以增加以后需要的缓存类,让应用开发可以选择更加适合自己的缓存方式,从而有效地提高应用执行效率 ...

  8. CString + UINT Error:有多个运算符"+="与这些操作数匹配

    在OnChar中,参数UINT nChar 有一个CString str,现在执行 str += nChar报错:Error:有多个运算符"+="与这些操作数匹配 解决办法:把UI ...

  9. Oracle RAC inventory.xml损坏后如何修复

    不建议直接修改该文件 1.从其它节点拷贝一份 2.使用runInstaller工具(这个工具位于<GI_HOME>/oui/bin路径下)重建inventory.xml文件 步骤1:添加G ...

  10. redhat linux 安装mysql5.6.27

    1.yum安装mysql(root身份) yum install mysql-server mysql-devel mysql -y 如没有配置yum,请参见博客:http://www.cnblogs ...