ch6 列表和导航条
Posted L_mj
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ch6 列表和导航条相关的知识，希望对你有一定的参考价值。
为列表添加定制的项目符号
可使用list-style-image属性：缺点是对项目符号图像的位置的控制能力不强。
常用的方法：使用list-style-type来关闭项目符号，将定制的项目符号作为背景添加在列表元素上，使用背景图像的定位属性精准的控制自定义项目符号的对准方式。
-
-
- 在列表项左边添加内边距，为符号留出所需的空间。
- 将项目符号作为背景图像应用于列表项
- 如果知道列表项的内容不会跨越多行，可以将垂直位置设置为middle或50%，从而让项目符号垂直居中。
-
<ul> <li>Read emails</li> <li>Write chapter</li> <li>Go shopping</li> <li>Cook dinner</li> <li>Watch Lost</li> </ul> <style type="text/css"> ul { margin: 0; padding: 0; width: 20em; list-style-type: none; //关闭项目符号 } li { background: url(img/tick.png) no-repeat 0 50%; //项目符号垂直居中 padding-left: 30px; } </style>
得到的结果：
创建基本的垂直导航条
<ul class="nav"> <li class="selected"><a href="home.htm">Home</a></li> <li><a href="about.htm">About</a></li> <li><a href="services.htm">Our Services</a></li> <li><a href="work.htm">Our Work</a></li> <li><a href="news.htm">News</a></li> <li class="last"><a href="contact.htm">Contact</a></li> </ul> <style type="text/css"> ul.nav { margin: 0; //外边距设置为0 padding: 0; //内边距设置为0 width: 8em; //设置福列表的宽度，代码更容易维护 list-style-type: none; //去掉默认的项目符号 background-color: #8BD400; //设置浅绿色背景 border: 1px solid #486B02; //设置深绿色的边框 border-bottom: none; } ul.nav li { display: inline; /* 在IE6上列表项下添加了额外的空间，所以需要在列表项上设置display为inline*/ } ul.nav a { display: block; //创建与按钮相似的单击区域 color: #2B3F00; //设置链接文本的颜色 text-decoration: none; //关闭下划线 border-top: 1px solid #E4FFD3; //为创建斜面效果，顶边框设置比背景浅 border-bottom: 1px solid #486B02;//为创建斜面效果，顶边框设置比背景深 background: url(img/arrow.gif) no-repeat 5% 50%; //列表项前面的图标，及位置 padding: 0.3em 1em; } ul.nav a:hover, ul.nav a:focus, ul.nav .selected a { color: #E4FFD3; background-color: #6DA203; } </style>
结果如下：
创建简单的水平导航条
<ol class="pagination"> //rel属性表示结果集中的前一个和下一个页面，规定当前文档与被链接文档之间的关系 <li><a href="search.htm?page=1" rel="prev">Prev</a></li> <li><a href="search.htm?page=1">1</a></li> <li class="selected">2</li> <li><a href="search.htm?page=3">3</a></li> <li><a href="search.htm?page=4">4</a></li> <li><a href="search.htm?page=5">5</a></li> <li><a href="search.htm?page=3" rel="next">Next</a></li> </ol> <style type="text/css"> body { font-family: "Myriad Pro", Frutiger, "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Verdana, sans-serif; font-size: 1.4em; margin-top: 4em; } ol.pagination { margin: 0; //去掉外边距 padding: 0; //去掉内边距 list-style-type: none; //去掉列表样式 } //让列表水平排列而不是垂直排列，可以将display属性设置为inline，但是对于比较复杂的水平列表样式，如果浮动列表项，然后使用外边距把它们分开，会更灵活。 ol.pagination li { float: left; //向左浮动 margin-right: 0.6em; //设置右外边距 } ol.pagination a, ol.pagination li.selected { //对列表项应用样式 display: block; padding: 0.2em 0.5em; border: 1px solid #ccc; //设置边框 text-decoration: none; //去掉下划线 } ol.pagination a:hover, ol.pagination a:focus, ol.pagination li.selected { //当鼠标悬停在链接上时，应用不同样式 background-color: blue; color: white; } ol.pagination a[rel="prev"], //对于prev和next链接应用不同的样式 ol.pagination a[rel="next"] { border: none; //去掉边框 } ol.pagination a[rel="prev"]:before { //在列表的前面加箭头 content: "\\00AB"; //“00AB”添加双左箭头 padding-right: 0.5em; } ol.pagination a[rel="next"]:after { //在列表的后面加箭头 content: "\\00BB"; “00BB”添加双右箭头 padding-left: 0.5em; } </style>
让列表水平排列而不是垂直排列，可以将display属性设置为inline，但是对于比较复杂的水平列表样式，如果浮动列表项，然后使用外边距把它们分开，会更灵活。
创建图形化导航条（水平）
<ul class="nav"> <li class="first"><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">News</a></li> <li><a href="#">Products</a></li> <li><a href="#">Services</a></li> <li><a href="#">Clients</a></li> <li><a href="#">Case Studies</a></li> </ul> <style type="text/css"> body { font: 76%/1.8 "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; background-color: #fff; } ul.nav { margin: 0; padding: 0; overflow: hidden; //清理li浮动造成的父元素高度为0 width: 74em; //设置整个导航条的宽度 background: #FAA819 url(img/mainNavBg.gif) repeat-x; //以重复的橘红色渐变作为背景 list-style: none; text-transform: uppercase; //让链接全部大写 } ul.nav li { float: left; //利用浮动让列表垂直显示 white-space: nowrap; // 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。 } ul.nav a { display:block; //让链接表现的像按钮 padding: 0 2.96em; line-height: 2.1em; //使用行高让链接文本垂直居中 background: url(img/divider.gif) repeat-y left top; //在链接之间创建分隔线，可以通过在列表项或锚上设置水平边框。为简单，在锚链接应用一个背景图像 text-decoration: none; //关闭下划线 color: #fff; //链接颜色设置为白色 } ul.nav a:hover , ul.nav a:focus { //设置翻转状态 color: #333; } ul.nav li:first-child a { //去掉第一个链接不必要的分割线 background: none; } </style>
当li元素浮动时，不再占据文档流中的任何空间，所以，它的父元素实际上没有内容，它就会收缩，从而会隐藏列表背景，所以需要办法让父元素包含浮动的子元素，方法为3种清除浮动的方法 ，最常用的是overflow:hidden技术.
结果如下：
简化的“滑动门”标签页式导航
使用一个大图像和一个侧边图像创建标签页，随着标签页中文本的扩展，大图像的更多部分露出来，较小的图像留在左边，盖住大图像的硬边缘，下述实例中，大图像为tab-right.gif，侧边图像为tab-left.gif
tab-left.gif(应用于锚链接)
tab-right.gif（应用于li）
<ul id="mainNav"> <li class="first"><a href="#">Home</a></li> <li><a href="about.htm">About</a></li> <li><a href="news.htm">News</a></li> <li><a href="products.htm">Products</a></li> <li><a href="services.htm">Services</a></li> <li><a href="clients.htm">Clients</a></li> <li><a href="casestudies.htm">Case Studies</a></li> </ul> <style type="text/css"> body { font: 76%/1.8 "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; background-color: #fff; } ul { margin: 0; padding: 0; overflow: hidden; //清除li浮动 width: 72em; list-style: none; text-transform: uppercase; } ul li { float: left; //向左浮动，以产生水平效果 background: url(img/tab-right.gif) no-repeat top right; //应用right背景图像，形成标签页的右边缘 } li a { display: block; //让锚显示为块级元素使得整个区域可单击 padding: 0 2em; line-height: 2.5em; //设置行高控制高度，宽度由内容的宽度控制 background: url(img/tab-left.gif) no-repeat top left; //应用left背景，并向左对齐。 当标签页改变尺寸时，这个图像总是对准左边，盖在大图上面，盖住左边的硬边缘 text-decoration: none; color如何在Android中的主/细分片段之间进行适当的导航？Android：如何在选项卡内从一个片段导航到另一个片段？ [关闭]