[读书笔记]<CSS Mastery> 第6章 对列表应用样式和创建导航条

<CSS Mastery>

第6章

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

读书笔记

1， 具有自定义项目符号的简单列表样式

<ul>

       <li></li>

<li></li>

<li></li>

…

</ul>

常用方法是关闭项目符号，将定制的项目符号作为背景添加在列表元素上。利用背景图像的定位属性精确地控制自定义列表符号的对准方式。

ul {

 margin: 0;          /*去掉缩进*/

 padding: 0;         /*去掉缩进*/

 list-style-type: none;         /* 去掉默认的项目符号*/

}

li {

 background: url(img/tick.png) no-repeat 0 50%;            /*若列表项内容不跨越多行，将垂直位置设置为middle或50% */

 padding-left: 30px;           /*列表左边添加内边距，为符号预留空间*/

}

2， 垂直导航条

<ul class=”nav”>

       <li><a></a></li>

       <li><a></a></li>

       <li><a></a></li>

…

</ul>

ul.nav {

 margin: 0;

 padding: 0;

 width: 8em;        /*不显示设置锚的宽度，设置父列表的宽度，代码更易维护*/

 list-style-type: none;

       float:left;

       background-color:#8BD400;

       border:1px solid #486B02;

       border-bottom:none;           /*消除链接底边框与列表底边框形成的双线*/

}

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;

}

/*当鼠标悬停在锚链接上时，锚链接样式*/

/*类selected的父列表项中的锚的样式*/

ul.nav a:hover,

ul.nav a:focus,

ul.nav .selected a {

       color:#E4FFD3;

       background-color:#6DA203;

}

ul.nav li {

　　display: inline: /* 消除IE6在列表上下添加的额外空间 将元素显示为行元素 */

}

----- 未完，待续 -----