<!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. 3. 如何封装查询条件与查询结果到map中

    public Map<String, Object> queryOrderStatus(String orderNo) { // 查询到的结果与查询的条件一一对应,封装到map中! Str ...

  2. 进度太慢了,扫频仪PCB

    实在是画过最纠结的一块PCB,左边布线很轻松,但是右边32芯片用到FSMC,还有很多个引出的IO口,相互交叉纠结在了一起,有几根线一路打了3,4个过孔,实在是难布. 工程查了下是6月17号画原理图的, ...

  3. [代码片段]读取BMP文件

    文件名mybmp.c //实现了读取24位BMP文件,还有一些测试信息 //定义mybmp.c里面用到的函数和相关头文件.常量 //参考了网友sailinghz在CSDN论坛的帖子:http://bb ...

  4. (转)Eclipse New Server 【无法输入server name】

    I was trying to add Tomcat 7 in my Eclipse in Ubuntu. When I click “Add new server” in Eclipse and s ...

  5. Linux 中的零拷贝技术,第 2 部分

    技术实现 本系列由两篇文章组成,介绍了当前用于 Linux 操作系统上的几种零拷贝技术,简单描述了各种零拷贝技术的实现,以及它们的特点和适用场景.第一部分主要介绍了一些零拷贝技术的相关背景知识,简要概 ...

  6. java yum安装的环境变量设置

    如何(怎样)在CentOS 6.X 或 redhat 上使用安装JDK runtime environment (openjdk) ? CentOS 6.X 和 5.X 自带有OpenJDK runt ...

  7. RAID讲解

    RAID定义 RAID(Redundant Array of Independent Disk 独立冗余磁盘阵列)技术是加州大学伯克利分校1987年提出,最初是为了组合小的廉价磁盘来代替大的昂贵磁盘, ...

  8. JavaScript学习笔记之BOM

    BOM的核心对象是window,它既表示浏览器窗口以及页面可见区域,同时也是ECMAScript中的Globe对象,所有的全局变量和函数都是它的属性,并且所有的原声函数以及其他函数也都存在于它的命名空 ...

  9. 在Android平台下的基于Linux-C 的测试程序

    iTOP-4412 开发板可以运行的文件系统很多,在具体的文件系统上实现特定功能前,可以 使用Linux-C 程序来测试硬件以及驱动.而且这些程序很容易移植到Android.Qt/E 以及最小文件系统 ...

  10. JAX-WS(一)之使用wsgen从Java创建简单的WebService

    概念 JAX-WS2.0的全称Java API for XML-Based Web Service 2.0.JAX-WS2.0是对JAX-RPC1.0规范的扩展,是JAX-RPC1.1的后续版本,JA ...