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 ...

随机推荐

charles工具的使用
charles工具使用 charles除了之前介绍过模拟弱网的功能外,还有很多强大的功能.最近客户端测试用到的功能介绍如下: 一.准备工作 1.手机设置代理 charles设置代理端口号8888:Pr ...
std::map的clear()没有用?
昨天晚上,我徒弟跑过来讲,他的程序的内存占用居高不下,愿意是std::map的clear()没有效果.于是我让他用erase(begin,end); 试试也不行. 代码如下: void release ...
js传值
//传值$('.choose li').click(function(){ //alert('z'); $("#address").empty().prepend($ ...
iOS：消除项目中警告
引言: 在iOS开发过程中, 我们可能会碰到一些系统方法弃用, weak.循环引用.不能执行之类的警告. 有代码洁癖的孩子们很想消除他们, 今天就让我们来一次Fuck 警告!! 首先学会基本的语句: ...
分享一下怎么开发一款图片视频类App，秒拍和prisma
第一步,分解短视频App的功能我们在秒拍官网看到如此描述: [视频拍摄及导入]支持直接拍摄及导入手机本地的视频 [照片电影]照片专属特效,轻松创作照片电影 [MV特效]10余款全新MV特效,让普通视 ...
第九篇 Integration Services：控制流任务错误
本篇文章是Integration Services系列的第九篇,详细内容请参考原文. 简介在前面三篇文章,我们创建了一个新的SSIS包,学习了脚本任务和优先约束,并检查包的MaxConcurrentE ...
Create your first isolated Python environment
# Install virtualenv for Python 2.7 and create a sandbox called my27project: pip2. install virtualen ...
Radius session
1,EAP 中继 client start, NAS require identity, client sent username, NAS sent username to sever, serve ...
centos 6.4下的postgresql 9.2使用
http://www.cnblogs.com/mchina/archive/2012/06/06/2539003.html
PostgreSQL Replication之第十章配置Slony（1）
在PostgreSQL领域中,Slony是最广泛的复制解决方案之一.它不仅是最老的复制方案实现的一个,但也是有最多的外部工具支持的一个,例如PgAdmin3等. 在本章中,我们将深入探究Slony并学 ...

Ul li 竖排 菜单

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

随机推荐

热门专题

Ul li 竖排菜单

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