第 6 章 对列表应用样式和创建导航条

1、基本列表样式

<ul>
    <li>Write chapter</li>
    <li>Go shopping</li>
    <li>Cook diner</li>
    <li>Watch Lost</li>
</ul>

ul {
    margin:0;
    padding: 0;
    list-style-type: none; //关闭项目符号，用定制的项目符号
}

//项目符号作为背景图像应用于列表项
li {
    background: url("./img/bullet.gif") no-repeat 0 50%;
    padding-left: 30px; //为符号留空间
}

2、创建基本的垂直导航条

<ul class="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
</ul>

//设置父列表的宽度，代码更容易维护
ul.nav {
    margin:0;
    padding: 0;
    list-style-type: none;
    width: 8em;
    background-color: #8bd400;
    border: 1px solid #486B02;
}

//对锚链接而不是列表项应用样式，提高浏览器兼容性
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 8px 50%;
    padding: 0.3em 1em;
}

:last-child伪类指定属于其父元素的最后一个子元素

//最后一个链接的底边框与列表的底边框形成了双线
//用:last-child去掉最后一个链接的底边框
ul.nav :last-child {
    border-bottom: 0;
}

//悬停时翻转
ul.nav a:hover,
ul.nav a:focus {
    color: #e4ffd3;
    background-color: #6da203;
}

3、创建简单的水平导航条

创建有序列表，浮动列表项

<ol class="pagination">

    <li><a href="#" rel="prev">Prev</a></li> //表示前一个页面 
    <li><a href="#">1</a></li>
    <li class="selected">2</li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#" rel="next">Next</a></li> //表示后一个页面 
</ol>

如果在样式表开头用全局reset则省略下步骤

//去掉默认的浏览器外边距，内边距和列表样式
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;
}

为prev和next链接取消边框

//用属性选择器寻找rel属性
ol.pagination a[rel="prev"],
ol.pagination a[rel="next"] {
    border: none;
}

在列表开头和末尾添加箭头
使用:before :after content 插入生成内容
:before前面不能有空格！！要不就不显示双箭头了！！

//在。。。。。。。。。。。。 。之前
ol.pagination a[rel="prev"]:before {
    content: "\00AB"; //ASC2码对应双左箭头
    padding-right: 0.5em;//???
}
ol.pagination a[rel="next"]:after {
    content: "\00BB"; //ASC2码对应双右箭头
    padding-left: 0.5em;

}

4、创建图形化导航条

<ul class="nav">
    <li><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="#">clients</a></li>
</ul>

注意：元素浮动时，不再占据文档流中的任何空间。父列表没有内容时会收缩，从而隐藏列表背景
利用overflow:hidden技术，内容被修剪，其余内容不可见

//
ul.nav {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 72em;
    overflow: hidden;//清理内部的浮动元素，显示背景图
    background: #faa819 url("./img/mainNavBg.gif") repeat-x;
}

ul.nav li {
    float: left; //左浮动以水平显示导航
}

希望每个按钮具有固定的尺寸，若显示的设置高度和宽度会导致可维护性问题。
所以每个按钮的宽度应由锚文本的尺寸决定。

ul.nav a {
    display: block; // 使链接像按钮一样 
    padding: 0 3em; //为锚文本左右应用3em内边距
    line-height: 2.1em; //使链接文本垂直居中
    text-decoration: none; //关闭链接下划线
    color:#fff; 

    /*为导航中每个链接之间创建分割线,有两种方法
    1、在列表项或锚上设置水平边框
    2、在锚链接中应用一个背景图像
    */
  /*1、  border-right: 0.1em dotted #fff;*/
  //2、
    background: url("./img/divider.gif") repeat-y left top;

}

:first-child伪类：第一个子元素

//为导航条中第一个链接去掉不必要的分隔线
ul.nav li:first-child a {
    background: none;
}

ul.nav a:hover,
ul.nav a:focus {
    color: #333;
}

5、简化的“滑动门”标签页式导航