<!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. php 如何进入mysql数据库

    我是初学者,有两台电脑,进入数据库通用的方法直接找mysql.exe,如下例: F:\Program Files\wamp\bin\mysql\mysql5.5.20\bin

  2. 30天，O2O速成攻略【7.25北京站】

    活动概况 时间:2015年7月25日13:30-16:30 地点:车库咖啡(北京市海淀西大街48号鑫鼎宾馆二层) 主办:APICloud.领通科技.快易行 网址:www.apicloud.com 费用 ...

  3. Xib的使用与File'Owner总结

    Xib的使用与File'Owner总结 一.XIB的适用范围 xib(也叫Nib)与storyboard一样是用来描述界面的. storyboard描述的是比较大型的,大范围.适合描述界面跳转等. 二 ...

  4. ASP.NET Highcharts图表

    js 图表代码,如下: charts[i] = new Highcharts.Chart({ chart: { backgroundColor: { linearGradient: [0, 0, 50 ...

  5. Chrome开发者工具不完全指南

    Chrome开发者工具不完全指南(一.基础功能篇) Chrome开发者工具不完全指南(二.进阶篇) Chrome开发者工具不完全指南:(三.性能篇) Chrome开发者工具不完全指南(四.性能进阶篇) ...

  6. IntelliJ IDEA 一些用法

    查看idea 中jar关系图 快捷键: Ctrl+/ 用于注释,取消注释 Ctrl+Shift+F 全文搜索 Ctrl+F 单页面查找 Ctrl+Alt+Shift+L  格式化代码 ======== ...

  7. 第七篇 Integration Services：中级工作流管理

    本篇文章是Integration Services系列的第七篇,详细内容请参考原文. 简介在上一篇文章,我们创建了一个新的SSIS包,学习了SSIS中的脚本任务和优先约束,并检查包的MaxConcur ...

  8. RANSAC随机一致性采样算法学习体会

    The RANSAC algorithm is a learning technique to estimate parameters of a model by random sampling of ...

  9. 安装Cocoapods(Pods 管理iOS 第三方库）

    安装 可先检测Mac电脑是否安装Pods.打开控制台: $ which pod 如果安装,结果如下;如果没有安装,控制台无反应. /usr/bin/pod 如果没有安装, 以下命令安装之. $ sud ...

  10. Android中三种onClick事件的实现与对比

    方式一:在activity的onCreate()方法中,嵌入如下代码: Button button = (Button)findViewById(R.id.button1); button.setOn ...