Ul li 竖排菜单

 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 竖排菜单的更多相关文章

Ul li 横排菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
[转载] ul li css 做横向菜单
原文地址: http://www.cnblogs.com/amylis_chen/archive/2011/09/24/2188398.html 第一步:建立一个无序列表我们先建立一个无序列表,来建 ...
DIV+CSS布局重新学习之css控制ul li实现2级菜单
竖状菜单: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...
菜单制作:ul li横向排列
CSS菜单制作 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
jQuery实现竖排菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...
ul li设置横排，并除去li前的圆点
效果预览:http://hovertree.com/texiao/css/ 如何用CSS制作横向菜单让ul li横向排列及圆点处理我们先建立一个无序列表,来建立菜单的结构.代码是: <ul& ...
ul li横向排列及圆点处理
如何用CSS制作横向菜单让ul li横向排列及圆点处理第一步:建立一个无序列表我们先建立一个无序列表,来建立菜单的结构.代码是:<ul> <li><a href ...
[div+css]竖排菜单
} #box{ width:120px; font-size: 12px; font- ...
css案例学习之div ul li a 实现导航效果
效果代码 <html> <head> <title>无需表格的菜单</title> <style> body{ background-co ...

随机推荐

JS之mouseover和mouseenter
mouseenter事件只会触发一次,触发对象是注册对象或者注册对象的子元素 mouseover事件可以触发多次,触发对象是注册对象或者注册对象的子元素 <!DOCTYPE html> & ...
leetcode算法
Given a linked list, return the node where the cycle begins. If there is no cycle, returnnull. Follo ...
linux命令之echo
echo可以用来输出显示变量和常量,还可以用来写文件. 最简单的方式:使用 echo 命令 #echo abcbedf>>a.txt 将abcdef追加到a.txt文件末尾往文件中写入内 ...
iOS block里的self
block是可以捕捉上下文的特殊代码块. block可以访问定义在block外的变量,当在block中使用时,它就会为其在作用域内的每个标量变量创建一个副本. 如果通过self拥有一个block,然后 ...
Android 使用shape来画线
注意:Android3.0以上系统开始支持硬件加速特性hardwareAccelerated,默认是启用的.当你的某个activity用到了“虚线”效果的时候,必须要设置AndroidManifest ...
.net平台下深拷贝和浅拷贝
在.net类库中,对象克隆广泛存在于各种类型的实现中,凡是实现了ICloneable接口的类型都具备克隆其对象实例的能力.所以本文讲述的深拷贝和浅拷贝也是在实现ICloneable接口的基础上进行的. ...
jboss漏洞导致服务器中毒
中毒现象 1. 网络出现拥塞,访问延迟增加. 2. 系统定时任务表中出现异常的定时任务. 3. 出现异常进程. 4. $JBOSS_HOME/bin或/root目录下出现大量的异常文件. 现象 ...
python_字符串
1. 字符串的格式化格式: 说明: (1)转换说明符 (2)格式化操作符右操作数可以是任何东西,如果是元组的话,每一个元素都会被单独格式化. 2. 字符串常用的方法 (1)find int = fi ...
MongoDB Map Reduce
介绍 Map-Reduce是一种计算模型,简单的说就是将大批量的工作分解(MAP)执行,然后再将结果合并成最终结果(REDUCE). MongoDB提供的Map-Reduce非常灵活,对于大规模数据分 ...
Add Digits
Given a non-negative integer num, repeatedly add all its digits until the result has only one digit. ...

Ul li 竖排 菜单

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

随机推荐

热门专题

Ul li 竖排菜单

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