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;
}