<!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. c#基础，面试前迅速巩固c#最基础知识点

    n年前为了面试,搜罗的C#基础知识,记在了文档里.今天写到博客园里,与人分享,因为不是专家,所以仅供参考. 1.面向对象 在面向对象概念提出之前,语言都是面向过程的,说到面向对象,应该与面向过程比较, ...

  2. iOS：app直播---采集篇

    [如何快速的开发一个完整的iOS直播app](采集篇) 转载自简书@袁峥Seemygo:http://www.jianshu.com/p/c71bfda055fa 前言 开发一款直播app,首先需要采 ...

  3. 微信公众平台开发(98) UnionID

    关键字 微信公众平台 微信开放平台 UnionID作者:方倍工作室原文:http://www.cnblogs.com/txw1958/p/weixin98-get-user-UnionID.html ...

  4. 数据库字段Pointer的操作方法

    多数情况下要要是Pointer字段实现了类似传统关系数据库的关联操作,联合查询能够减少提交次数,今天带来几种过滤器的使用方法: 首先确定2个Class,也就是表: A表:user表,用户个人信息,字段 ...

  5. 正确统计SQLServer的慢日志

    RDS的一个富有吸引力的服务是为用户提供慢日志的运行状况报告.报告从不同的维度(总执行时间,总执行次数,总逻辑读,总物理读)为用户提供TOP20的SQL.RDS希望在为用户提供稳定,快速服务的同时,用 ...

  6. Jboss 安全和优化

    一．        Jboss后台启动:添加后台修改命令:vi run.shwhile true; do   if [ "x$LAUNCH_JBOSS_IN_BACKGROUND" ...

  7. javaScript常用工具库

    对应于百度前端技术学院2015年春季的课程2相关内容 https://github.com/baidu-ife/ife/tree/master/2015_spring/task/task0002 ht ...

  8. instancetype

  9. ARC机制下组合关系

    // //  Person.h //  01-autorelease基本概念 // //  Created by apple on 14-3-18. //  Copyright (c) 2014年 a ...

  10. Oracle Hang Manager

    名词术语1.Cross Boundary Hang 交叉边界hang.在12.1.0.1中,hang manager可以检测database和asm之间的hang.2.Deadlock or Clos ...