开发者社区> 杰克.陈> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

用ul、li做横向导航

简介: 原文:用ul、li做横向导航 1、生成Site.css文件(注:一定要将该文件的编码格式设置为utf-8,否则ie6有可能出现乱码) /* ul li以横排显示 *//* 所有class为menu的div中的ul样式 */div.
+关注继续查看
原文:用ul、li做横向导航

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


/* ul li以横排显示 */

/* 所有class为menu的div中的ul样式 */
div.menu ul
{
list-style
:none; /* 去掉ul前面的符号 */
margin
: 0px; /* 与外界元素的距离为0 */
padding
: 0px; /* 与内部元素的距离为0 */
width
: auto; /* 宽度根据元素内容调整 */
}
/* 所有class为menu的div中的ul中的li样式 */
div.menu ul li
{
float
:left; /* 向左漂移,将竖排变为横排 */
}
/* 所有class为menu的div中的ul中的a样式(包括尚未点击的和点击过的样式) */
div.menu ul li a, div.menu ul li a:visited
{
background-color
: #465c71; /* 背景色 */
border
: 1px #4e667d solid; /* 边框 */
color
: #dde4ec; /* 文字颜色 */
display
: block; /* 此元素将显示为块级元素,此元素前后会带有换行符 */
line-height
: 1.35em; /* 行高 */
padding
: 4px 20px; /* 内部填充的距离 */
text-decoration
: none; /* 不显示超链接下划线 */
white-space
: nowrap; /* 对于文本内的空白处,不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。 */
}
/* 所有class为menu的div中的ul中的a样式(鼠标移动到元素中的样式) */
div.menu ul li a:hover
{
background-color
: #bfcbd6; /* 背景色 */
color
: #465c71; /* 文字颜色 */
text-decoration
: none; /* 不显示超链接下划线 */
}
/* 所有class为menu的div中的ul中的a样式(鼠标点击元素时的样式) */
div.menu ul li a:active
{
background-color
: #465c71; /* 背景色 */
color
: #cfdbe6; /* 文字颜色 */
text-decoration
: none; /* 不显示超链接下划线 */
}

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绘制列表
使用ul li绘制列表
0 0
自定义美化UL OL发光列表
在线演示 本地下载
529 0
div 等块级标签横向排列的方法总结
块级标签的默认文档流是上下排列的,再配上横向排列的方法,请过适当的嵌套,可以应对几乎所有常见的布局需求,因此,我决定总结一下 div 横向排列的方法。这也是我初学前端时最困扰的问题~ 以下面这组 div 为例,wrap 的高度由内容撑开 ...
920 0
li浮动时ul高度为0,解决ul自适应高度的几种方法
内容提要:  li浮动时ul高度为0,解决ul自适应高度的几种方法 在网页设计中,常常需要对li标签做浮动效果,但是在不同浏览器中会遇到兼容性问题,比如IE中会出现ul高度为0的情况,是效果不能达到预期效果。
558 0
DevExpress Carousel 设置水平滑动列表
DevExpress中Carousel控件的应用 Carousel,直译为旋转木马,即旋转视图,可以做为数据的展示或者菜单项。   要实现触摸左右滑动的效果,其实是比较容易的,直接在CarouselPanel上实现MouseDown/MouseUp事件,在后台添加逻辑,判断是否产生了位置移动,从而控制面板向左或者向右移动子项。
708 0
ul li样式总结
&lt;div id="menu"&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;首页&lt;/a&gt;&lt;/li&gt; &lt;li class="menuDiv"&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;博客&lt;/a&gt;&lt;/li&gt; &lt;li c
1267 0
hmlt ul li 水平排列
引用:http://zhidao.baidu.com/question/441759479.html 通过用css设置li的width,height,以及float:left,可以让列表项水平排列
440 0
+关注
杰克.陈
一个安静的程序猿~
文章
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载