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. django http 403 错误

    在使用android的xUtils框架提交post请求到django服务器上面,出现错误,返回Forbiddeen.解决方法记录于此. 参考链接 http://blog.csdn.net/liangp ...

  2. 学习GitHub

    学习GitHub: GitHub教程:http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b00 ...

  3. iOS WIFI

    一.公共WIFI综述 现在很多公司都在做免费WIFI,车站.公交.地铁.餐厅,只要是人员密集流动的地方就有WIFI,免费WIFI从最初的网页认证方式也逐渐向客户端认证方式偏移.本文主要讨论iOS认证上 ...

  4. SpringMVC 406 accept请求错误，没有加入将json序列化的包

    在spring中使用@responsebody发现请求报406错误 jar包中缺少json序列化的相关的包!

  5. Group的操作

    1. 概述 “Group By”从字面意义上理解就是根据“By”指定的规则对数据进行分组 示例 2. group by的简单操作 3. Group By中Select指定的字段限制 select指定的 ...

  6. C# 集合-并发处理-锁OR线程

    每次写博客,第一句话都是这样的:程序员很苦逼,除了会写程序,还得会写博客!当然,希望将来的一天,某位老板看到此博客,给你的程序员职工加点薪资吧!因为程序员的世界除了苦逼就是沉默.我眼中的程序员大多都不 ...

  7. Python:安装mssql模块功能，并实现与sqlserver连接、查询

    由于我系统是x64系统,所以下载python2.7 x64.下载地址:https://www.python.org/downloads/release/python-2712/, 经过测试发现这个版本 ...

  8. JavaScript----marquee滚动标签 图片无缝滚动 插入百度地图

    页面的自动滚动效果,可由javascript来实现, 但是有一个html标签 - <marquee></marquee>可以实现多种滚动效果,无需js控制. 使用marquee ...

  9. HUD 5086 Revenge of Segment Tree（递推）

    http://acm.hdu.edu.cn/showproblem.php?pid=5086 题目大意: 给定一个序列,求这个序列的子序列的和,再求所有子序列总和,这些子序列是连续的.去题目给的第二组 ...

  10. "数学口袋精灵"bug的发现及单元测试

    1.项目内容: 团队项目:二次开发 至此,我们有了初步的与人合作经验,接下来投入到更大的团队中去. 也具备了一定的个人能力,能将自己的代码进行测试.接下来尝试在别人已有的基础上进行开发. 上一界51冯 ...