<!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. oracle 中的存储过程

      oracle 中的存储过程 --oracle 中的存储过程, --不带任何参数的 CREATE OR REPLACE PROCEDURE PRO_TEST AS -- AS 和is 没有任何区别 ...

  2. ASP.NET中application对象的用法

    一.Application对象的理解 Application对象在实际网络开发中的用途就是记录整个网络的信息,如上线人数.在线名单.意见调查和网上选举等.在给定的应用程序的多有用户之间共享信息,并在服 ...

  3. empty()函数经典详解

    <?php /** * 当var不存在,返回TRUE; * 当var存在,并且是一个非空非零的值(真值)时返回 FALSE 否则返回 TRUE . * 以下的东西被认为是空的: * * 1.&q ...

  4. iOS：crash崩溃日志分析

    一.前言: 作为一个合格的iOS开发者,除了具有规范强悍的编码能力外,还应该具有过硬的查错纠错能力.在项目运行时,程序崩溃是不可避免的,遇到这个问题,有时会出现一大堆的crash日志,艹,貌似看不懂呀 ...

  5. FreeMarker惯用内置函数

    1.sequence?first 返回sequence的第一个值. 2.sequence?last 返回sequence的最后一个值. 3.sequence?reverse 将sequence的现有顺 ...

  6. Android Studio IDE 主题设置

    1.界面主题设置,如下图: 2.代码字体设置,如下图:

  7. instancetype

  8. linux:主机规划和磁盘分割

    1>.在linux系统中,每个装置都被装成一个档案来对待: 2>.各硬体装置在linux当中的档案名:SATA介面的硬碟的档案名为/dev/sd[a-d];在linux中,几乎所以的硬体装 ...

  9. swift语言实战晋级-第9章 游戏实战-跑酷熊猫-7-8 移动平台的算法

    在上个小节,我们完成了平台的产生.那么我们来实现一下让平台移动.平台的移动,我们只需要在平台工厂类中写好移动的方法,然后在GameScene类中统一控制就行了. 在GameScene类中,有个upda ...

  10. Swift语言实战晋级-第9章 游戏实战-跑酷熊猫-1

    学习目标 一.进一步学习Swift的游戏制作 二.掌握SKNode,SKSpriteNode的运用 三.了解SpriteKit的物理系统 四.掌握动作(SKAction)的运用 在这一章,我们要通过制 ...