码迷,mamicode.com
首页 > 其他好文 > 详细

用ul、li做横向导航

时间:2017-12-14 00:02:49      阅读:154      评论:0      收藏:0      [点我收藏+]

标签:运行   pos   pac   移动   col   oid   工作   utf-8   color   

1、生成Site.css文件(注:一定要将该文件的编码格式设置为utf-8,否则ie6有可能出现乱码)

 1 /* ul li以横排显示 */
 2 
 3 /* 所有class为menu的div中的ul样式 */
 4 div.menu ul
 5 {
 6     list-style:none; /* 去掉ul前面的符号 */
 7     margin: 0px; /* 与外界元素的距离为0 */
 8     padding: 0px; /* 与内部元素的距离为0 */
 9     width: auto; /* 宽度根据元素内容调整 */
10 }
11 /* 所有class为menu的div中的ul中的li样式 */
12 div.menu ul li
13 {
14     float:left; /* 向左漂移,将竖排变为横排 */
15 }
16 /* 所有class为menu的div中的ul中的a样式(包括尚未点击的和点击过的样式) */
17 div.menu ul li a, div.menu ul li a:visited
18 {
19     background-color: #465c71; /* 背景色 */
20     border: 1px #4e667d solid; /* 边框 */
21     color: #dde4ec; /* 文字颜色 */
22     display: block; /* 此元素将显示为块级元素,此元素前后会带有换行符 */
23     line-height: 1.35em; /* 行高 */
24     padding: 4px 20px; /* 内部填充的距离 */
25     text-decoration: none; /* 不显示超链接下划线 */
26     white-space: nowrap; /* 对于文本内的空白处,不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。 */
27 }
28 /* 所有class为menu的div中的ul中的a样式(鼠标移动到元素中的样式) */
29 div.menu ul li a:hover
30 {
31     background-color: #bfcbd6; /* 背景色 */
32     color: #465c71; /* 文字颜色 */
33     text-decoration: none; /* 不显示超链接下划线 */
34 }
35 /* 所有class为menu的div中的ul中的a样式(鼠标点击元素时的样式) */
36 div.menu ul li a:active
37 {
38     background-color: #465c71; /* 背景色 */
39     color: #cfdbe6; /* 文字颜色 */
40     text-decoration: none; /* 不显示超链接下划线 */
41 }

 

2、前台引用上述CSS样式文件

<link href="Styles/Site.css" rel="stylesheet" type="text/css" />

 

3、前台数据

<div class="menu">
        <ul>
            <li><a href="javascript:void(0);">主页</a></li>
            <li><a href="javascript:void(0);">工作日志</a></li>
            <li><a href="javascript:void(0);">设备运行记录</a></li>
            <li><a href="javascript:void(0);">其他</a></li>
        </ul>
    </div>

 

用ul、li做横向导航

标签:运行   pos   pac   移动   col   oid   工作   utf-8   color   

原文地址:http://www.cnblogs.com/qingchunshiguang/p/8034752.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!