Ul li 竖排



 <!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">

 <style type="text/css">

     /*--------------------------公共样式------------------*/

     .com-left

     {

         float: left;

     }

     /*公用分割线 宽度自行指定*/

     .com_divhr_solid

     {

         margin: 10px;

         height: 1px;

         border-top: 1px solid #D2CFCA;

         margin-top: 0px;

     }

     /*公用分割线虚线 宽度自行指定*/

     .com_div_dashedhr

     {

         margin: 10px;

         height: 1px;

         border-top: 1px dashed #D2CFCA;

         margin-top: 0px;

     }

     .align-center

     {

         margin: 0 auto; /* 居中 这个是必须的，，其它的属性非必须 */

         width: 1024px; /* 给个宽度 顶到浏览器的两边就看不出居中效果了 */

         margin-top: 70px;

         margin-bottom: 10px; /*text-align:center; 文字等内容居中 */

     }

     .nav

     {

         width: 180px; /* 控制导航总宽度 */

     }

     /* 取消列表样式，内外补间为零 */

     .nav ul

     {

         list-style: none;

         margin: 0;

         padding: 0;

     }

     /* 竖排：控制导航高度*/

     .nav li

     {

         height: 35px;

         line-height: 35px; /* 文字垂直居中 指定行高为li高度 自动垂直居中 */

     }

     /* 鼠标放上效果 */

     .nav a:hover

     {

         background-color: #007ACC;

         color: #FFFFFF;

         cursor: hand;

     }

     /* 将a标签区块化就可以指定高度 */

     .nav a

     {

         display: block;

         height: 100%;

         text-decoration: none; /* 取消a标签下划线 */

         background-color: #fff;

         color: #000;

         text-align: left; /* 文字水平居中显示 */

     }

     .nav a span

     {

         text-align: left; /* 文字水平居中显示 */

         margin-left: 20px;

         font-size: 14px;

         font-family: '微软雅黑';

     }

     /*-点击后选中-*/

     li.current a

     {

         background-color: #007ACC;

         color: #FFFFFF;

         cursor: hand;

     }

 </style>

 </head>

 <script type="text/javascript">

     $(function () {

         $("#ulMenu> li").click(function () {

             $("#ulMenu> li.current").attr("class", "")

             $(this).attr("class", "current")

             /*-设置要显示的DIV链接-*/

 　　　　　　　// $("div[name='" + div.attr('id') + "']").show();

         });

     });

 </script>

 <body>

    <div class="align-center">

     <div class="nav">

         <ul id="ulMenu">

             <li class="current"><a href="#"><span>导航1</span></a></li>

             <li><a href="#"><span>导航2</span></a></li>

             <li><a href="#"><span>导航3</span></a></li>

             <li><a href="#"><span>导航4</span></a></li>

             <li><a href="#"><span>导航5</span></a></li>

             <li><a href="#"><span>导航6</span></a></li>

             <li><a href="#"><span>导航7</span></a></li>

             <li><a href="#"><span>导航8</span></a></li>

             <li><a href="#"><span>导航9</span></a></li>

         </ul>

     </div>

     <div>

     </div>

 </div>

 </body>

 </html>

Ul li 竖排 菜单的更多相关文章

  1. Ul li 横排 菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. [转载] ul li css 做横向菜单

    原文地址: http://www.cnblogs.com/amylis_chen/archive/2011/09/24/2188398.html 第一步:建立一个无序列表 我们先建立一个无序列表,来建 ...

  3. DIV+CSS布局重新学习之css控制ul li实现2级菜单

    竖状菜单: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...

  4. 菜单制作:ul li横向排列

    CSS菜单制作 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  5. jQuery实现竖排菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

  6. ul li设置横排，并除去li前的圆点

    效果预览:http://hovertree.com/texiao/css/ 如何用CSS制作横向菜单 让ul li横向排列及圆点处理 我们先建立一个无序列表,来建立菜单的结构.代码是: <ul& ...

  7. ul li横向排列及圆点处理

    如何用CSS制作横向菜单 让ul li横向排列及圆点处理   第一步:建立一个无序列表 我们先建立一个无序列表,来建立菜单的结构.代码是:<ul> <li><a href ...

  8. [div+css]竖排菜单

             }          #box{              width:120px;              font-size: 12px;              font- ...

  9. css案例学习之div ul li a 实现导航效果

    效果 代码 <html> <head> <title>无需表格的菜单</title> <style> body{ background-co ...

随机推荐

  1. JMeter学习-013-JMeter 逻辑控制器之-如果（If）控制器

    前文简述了 JMeter 如何通过 HTTP Cookie管理器,实现了在不执行登录操作的情况下,通过 Cookie 实现登录态的操作,具体请参阅:JMeter学习-012-JMeter 配置元件之- ...

  2. 我就是认真：Linux SWAP 深度解读（必须收藏）

    我就是认真:Linux SWAP 深度解读(必须收藏) http://mp.weixin.qq.com/s?__biz=MzA4Nzg5Nzc5OA==&mid=2651660097& ...

  3. linux mknod命令解析

    linux mknod命令解析 http://www.cnblogs.com/cobbliu/archive/2011/07/05/2389014.html mknod:make node  生成设备 ...

  4. Android ListView与ExpandableListView设置分割线divider

    listview设置分割线需要以下操作: lv.setDivider(getResources().getDrawable(R.drawable.diyline)); ExpandableListVi ...

  5. SQLSERVER执行计划详解

    序言 本篇主要目的有二: 1.看懂t-sql的执行计划,明白执行计划中的一些常识. 2.能够分析执行计划,找到优化sql性能的思路或方案. 如果你对sql查询优化的理解或常识不是很深入,那么推荐几骗博 ...

  6. Trace-导出已有的服务器端跟踪

    跟踪(Trace)常被我们用来检查性能问题.通常我们会有针对CPU.Duration.Reads的创建跟踪定义,这一类的脚本一般不会包含太多的事件和列,筛选条件也相对简单.假如某一天你使用GUI定义了 ...

  7. 逻辑卷管理LVM (Logical Volume Manager)

    什么是LVM? LVM(Logical Volume Manager)逻辑卷管理,是一种将一个或多个硬盘的分区在逻辑上集合,相当于一个大硬盘来使用,当硬盘的空间不够使用的时候,可以继续将其它的硬盘的 ...

  8. Web开发学习

    这几天天天学习网络开发的一些东西,接触了好些概念.原本打算自己弄个个人博客,BlogEngine.net已经做的很好了,可以直接拿来用而且源码开放.做的很不错,是WebForm的.本来打算好好学习一下 ...

  9. python复杂网络分析库NetworkX

    NetworkX是一个用Python语言开发的图论与复杂网络建模工具,内置了常用的图与复杂网络分析算法,可以方便的进行复杂网络数据分析.仿真建模等工作.networkx支持创建简单无向图.有向图和多重 ...

  10. Hadoop学习（2）-- HDFS

    随着信息技术的高度发展,数据量越来越多,当一个操作系统管辖范围存储不下时,只能将数据分配到更多的磁盘中存储,但是数据分散在多台磁盘上非常不方便管理和维护,迫切需要一种系统来管理多台机器上的文件,因此诞 ...