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. 什么是webshell？

    webshell是web入侵的脚本攻击工具. 简单的说来,webshell就是一个asp或php木马后门,黑客在入侵了一个网站后,常常在将这些 asp或php木马后门文件放置在网站服务器的web目录中 ...

  2. 美国大学排名之本科中最用功的学校top15

    美国大学排名之本科中最用功的学校top15 威久留学2016-07-29 13:15:59美国留学 留学新闻 留学选校阅读(490)评论(1)   去美国留学的同学可能都知道USnews美国大学排名, ...

  3. disable jboss JMXInvokerServlet .

    jboss 默认有几个控制台,都是可能存在漏洞被黑客利用,除了web console .jmx console. 还有JMXInvokerServlet,访问路径是ip/invoker/JMXInvo ...

  4. Linux权限值问题

    0660:从左向右:第一位:(我不清楚,也没有用过)第二位:当前用户的经权限:6=110(二进制),每一位分别对就 可读,可写,可执行,,6说明当前用户可读可写不可执行第三位:group组用户,6的意 ...

  5. SQL SERVER2005 的三种复制类型概述

    一.事务复制 事务性复制通常从发布数据库对象和数据的快照开始.创建了初始快照后,接着在发布服务器上所做的数据更改和架构修改通常在修改发生时(几乎实时)便传递给订阅服务器.数据更改将按照其在发布服务器上 ...

  6. ClassLoader，Thread.currentThread().setContextClassLoader，tomcat的ClassLoader

    实际上,在Java应用中所有程序都运行在线程里,如果在程序中没有手工设置过ClassLoader,对于一般的java类如下两种方法获得的ClassLoader通常都是同一个 this.getClass ...

  7. IOS Suppot Font 苹果默认支持的字体一览2(普通,加粗,倾斜)

  8. csuoj 1022: 菜鸟和大牛

    http://acm.csu.edu.cn/OnlineJudge/problem.php?id=1022 1022: 菜鸟和大牛 Time Limit: 1 Sec  Memory Limit: 1 ...

  9. Java基础(33):StringBuilder的方法与应用实例（String相关类）

    Java 中的 StringBuilder 类的常用方法 重要的事情说三遍: 在需要频繁对字符串进行修改操作时使用 StringBuilder 的效率比 String 要高 在需要频繁对字符串进行修改 ...

  10. C++之路进阶——codevs2460（树的统计）

    2460 树的统计 2008年省队选拔赛浙江  时间限制: 2 s  空间限制: 128000 KB  题目等级 : 大师 Master       题目描述 Description 一棵树上有n个节 ...