CSS——读书笔记-06-列表&导航条-1

第六章 对列表应用样式和创建导航条-1

 

1.基本列表样式

<ul>
　　<li>list1</li>
　　<li>list2</li>
　　<li>list3</li>
</ul>

样式: 关闭项目符号去掉内外边距，自定义项目符号

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

li {
    background: url(/img/test.gif) no-repeat 0 50%;
}

　　

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

<ul class="nav">
    <li><a href="home.htm">Home</a></i>
    <li><a href="about.htm">About</a></i>
    <li><a href="work.htm">Work</a></i>
    <li><a href="news.htm">News</a></i>
    <li><a href="contact.htm">Contact</a></i>
</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-color: url(/img/arrow.gif) no-repeat 5% 50%;
　　padding: 0.3em 1em;
}

　　

3.创建简单的水平导航条（如页码）

<ol class="pagination">
　　<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>

样式：

》》水平显示列表

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

ol.pagination li {
    float: left;
    margin: 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-left: 0.5em;
}