佳佳的博客

Appearance

精通 CSS - 高级 Web 标准解决方案 6. 对列表应用样式和创建导航条 ​

🏷️ 《精通 CSS - 高级 Web 标准解决方案》

6.1 基本列表样式 ​

html
<ul>
    <li>Winterfell</li>
    <li>A Knight of the Seven Kingdoms</li>
    <li>The Long Night</li>
    <li>The Last of the Starks</li>
    <li>The Bells</li>
    <li>The Iron Throne</li>
</ul>

去除缩进（设置外边距（margin）和内边距（padding）为零）；去掉默认的项目符号（将列表样式类型（list-style-type）设置为 none）；

css
ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

使用图片作为项目符号。也可以使用 list-style-image 属性，但这种方式对项目符号图像的位置的控制能力不强。

css
li {
    background: url(/img/bullet.gif) no-repeat 0 50%; /* 指定符号图片 水平居左 垂直居中 */
    padding-left: 30px; /* 为符号留出所需的空间 */
}

6.2 创建基本的垂直导航条 ​

css
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 5% 50%;
    padding: 0.3em 1em;
}

/* 鼠标悬浮或选中时翻转颜色 */
ul.nav a:hover,
ul.nav a:focus,
ul.nav .selected a {
    color: #E4FFD3;
    background-color: #6DA203,
}

6.3 在导航条中突出显示当前页面 ​

在每个页面的主体元素中添加一个 ID 或类名，从而指定用户当前在哪个页面或部分中。

css
#home .nav .home a,
#about .nav .about a,
#news .nav .news a {
    background-position: right bottom;
    color: #fff;
    cursor: default; /* 鼠标经过时光标不会改变 */
}

6.4 创建简单的水平导航条 ​

翻页的导航条

css
ol.pagination {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

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"],
ol.pagination a[rel="next"] {
    border: none;
}
/* 开头和末尾添加箭头 */
ol.pagination a[rel="prev"]:before {
    content: "\00AB"; /* 链接前添加双左箭头 « */
    padding-right: 0.5em;
}
ol.pagination a[rel="next"]:after {
    content: "\00BB"; /* 链接后添加双右箭头 » */
    padding-right: 0.5em;
}

6.5 创建图形化导航条 ​

页眉的导航条

css
ul.nav {
    margin: 0;
    padding: 0;
    list-style-type: 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;
    line-height: 2.1em;
    text-decoration: none;
    color: #fff;
}
/* 设置鼠标悬浮时字体色 */
ul.nav a:hover,
ul.nav a:focus {
    color: #333;
}

6.6 简化的 “滑动门” 标签页式导航 ​

使用第四章中介绍的 滑动门技术 实现标签式的导航。

css
ul.nav {
    margin: 0;
    padding: 0;
    list-style-type: none;
    width: 72em;
    overflow: hidden;
}
ul.nav li {
    float: left;
    background: url(img/tab-right.gif) no-repeat right top; /* 浮动右圆角的大图片到右上角 */
}
ul.nav li a {
    display: block;
    padding: 0 2em;
    line-height: 2.5em;
    background: url(img/tab-left.gif) no-repeat left top; /* 浮动左边圆角的小图片到左上角 */
    text-decoration: none;
    color: #fff;
    float: left;
}
ul.nav a:hover,
ul.nav a:focus {
    color: #333;
}

6.7 Suckerfish 下拉菜单 ​

使用纯 CSS 实现下拉菜单的效果。把子导航嵌套在无序列表中，把列表定位到屏幕之外，然后当鼠标悬停在父列表项上时重新定位它。

html
<ul class="nav">
    <li><a href="/home">Home</a></li>
    <li><a href="/products">Products</a>
        <ul>
            <li href="/products/a">A</li>
            <li href="/products/b">B</li>
        </ul>
    </li>
</ul>
css
ul.nav, ul.nav ul {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
    float: left; /* 清除浮动 */
    border: 1px solid #486B02;
    background-color:#8BD400;
}
/* 浮动列表项 */
ul.nav li {
    float: left;
    width: 8em;
    background-color: #8BD400;
}
ul.nav li ul {
    width: 8em; /* 保持和父列表项宽度相同 */
    /* 隐藏子导航到屏幕之外 */
    position: absolute;
    left: -999em;
}
/* 父列表项悬停时，把子导航的位置改回正常位置 */
ul.nav li:hover ul {
    left: auto;
}
/* 设置列表外观 */
ul.nav a {
    display: block;
    color: #2B3F00;
    text-decoration: none;
    padding: 0.3em 1em;
    border-right: 1px solid #486B02;
    border-left: 1px solid #E4FFD3;
}
ul.nav li li a {
    border-top: 1px solid #E4FFD3;
    border-bottom: 1px solid #486B02;
    border-left: 0;
    border-right: 0;
}
/* 移除最后一个列表项的边框 */
ul.nav li:last-child a {
    border-right: 0;
    border-left: 0;
}
ul.nav a:hover,
ul.nav a:focus {
    color: #E4FFD3;
    background-color: #6DA203;
}

6.8 CSS 图像映射 ​

利用图像映射可以将图像的一些区域指定为热点。

html
<div id="imagemap">
    <img src="img/members.jpg" width="333" heigh="500" alt="Some of the Clearleft team" />
    <ul>
        <li class="jiajia">
            <a href="https://www.liujiajia.me" title="Jia Ja">Jia Jia</a>
        </li>
    </ul>
</div>
css
.imagemap {
    /* 高度和宽度和图片大小保持一致 */
    width: 333px;
    height: 500px;
    position: relative; /* 实现的关键 */
}
/* 隐藏项目符号和边距 */
.imagemap ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
/* 对锚进行绝对定位 */
.imagemap a {
    position: absolute;
    display: block;
    width: 50px;
    height: 60px;
    text-indent: -1000em; /* 所用大缩进使文本显示到屏幕之外 */
}
/* 将每个连接定位到相应的人身上（即人在图片中的位置） */
.imagemap .jiajia a {
    top: 50px;
    left: 80px;
}
/* 创建翻转效果（鼠标悬浮到链接框上时显示其边框） */
.imagemap a:hover,
.imagemap a:focus {
    border: 1px solid #fff;
}

6.9 远距离翻转 ​

远距离翻转是一种鼠标悬停事件，它在页面的其他地方触发显示方式的改变。
实现方法：在锚元素内嵌套一个或多个元素；然后使用绝对定位对嵌套的元素分别定位。
尽管显示在不同的地方，但是它们包含在同一个父锚内，所以可以对同一个鼠标悬停事件作出反应。

html
<div id="imagemap">
    <img src="img/members.jpg" width="333" heigh="500" alt="Some of the Clearleft team" />
    <ul>
        <li class="jiajia">
            <a href="https://www.liujiajia.me" title="Jia Ja">
                <span class="hotspot"></span>
                <span class="link">» Jia Jia</span>
            </a>
        </li>
    </ul>
</div>

具体的 CSS 代码和上面的 6.8 类似。

6.10 对于定义列表的简短说明 ​

定义列表由两个核心组件组成：定义术语 <dt> 和 一个或多个 定义描述 <dd>

html
<dl>
    <dt>Apple</dt>
        <dd>Red, yellow or green fruit</dd>
        <dd>Computer company</dd>
    <dt>Bananna</dt>
        <dd>Curved yellow fruit</dd>
</dl>

顾名思义，定义列表的主要用途是组成“定义”。但是，HTML 规范相当含糊，它建议可以将定义列表用于产品属性或会话等其它用途。

附 1. 引用 ​

  1. 《精通 CSS - 高级 Web 标准解决方案（第 2 版）》 - Andy Budd, Simon Collison, Cameron Moll 著；陈剑瓯 译。