CSS入门 0x4 列表样式和导航条
基本列表样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>List</title>
<style>
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
li {
background: url(./images/tick.png) no-repeat 0 50%;
padding-left:30px;
}
</style>
</head>
<body>
<ul>
<li>西游记</li>
<li>三国演义</li>
<li>水浒传</li>
<li>红楼梦</li>
</ul>
</body>
</html>
创建基本的垂直导航条
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>导航条</title>
<style>
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(./images/arrow.gif) no-repeat 5% 50%;
padding:0.3em 1em;
}
ul.nav .last a {/*去除底边重叠*/
border-bottom: 0;
}
ul.nav a:hover,
ul.nav a:focus,
ul.nav .selected a {
color: #E4FFD3;
background-color: #6DA203;
}
/*突出显示当前页*/
#home .nav .home a,
#about .nav .about a,
#services .nav .services a,
#work .nav .work a,
#news .nav .news a,
#contact .nav .contact a {
background-position: right bottom;
color: #fff;
cursor: default;
}
</style>
</head>
<body id="home">
<ul class="nav">
<li class="home"><a href="home.html">Home</a></li>
<li class="about"><a href="about.html">About</a></li>
<li class="services"><a href="services">Our Services</a></li>
<li class="work"><a href="work.html">Our Work</a></li>
<li class="news selected"><a href="news.html">News</a></li>
<li class="contact last"><a href="contact.html">Contact</a></li>
</ul>
</body>
</html>
创建简单的水平导航条
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>水平导航条</title>
<style>
/*去掉内外边距和默认列表样式*/
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-left: 0.5em;
}
</style>
</head>
<body>
<ol class="pagination">
<li><a href="serach.htm?page=1" rel="prev">Prev</a></li>
<li><a href="serach.htm?page=1">1</a></li>
<li class="selected">2</li>
<li><a href="serach.htm?page=3">3</a></li>
<li><a href="serach.htm?page=4">4</a></li>
<li><a href="serach.htm?page=5">5</a></li>
<li><a href="serach.htm?page=3" rel="next">Next</a></li>
</ol>
</body>
</html>
创建图像化导航条
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图形化导航条</title>
<style>
ul.nav{
margin: 0;
padding: 0;
list-style: none;
width: 72em;
overflow: hidden;/*以防隐藏*/
background: #FAA819 url(./images/mainNavBg.gif) repeat-x;
}
/*水平显示*/
ul.nav li {
float: left;/*当元素浮动不占据文档流,相当于父元素为空,会收缩导致背景隐藏*/
}
ul.nav a {
display: block;
padding: 0 3em;
line-height: 2.1em;
background: url(./images/divider.gif) repeat-y left top;/*添加分割条*/
text-decoration: none;
color: #fff;
}
/*去掉第一个的分割条*/
ul.nav .first a{
background-image: none;
}
ul.nav a:hover,
ul.nav a:focus{
color:#333;
}
</style>
</head>
<body>
<ul class="nav">
<li class="first"><a href="home.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="news.html">News</a></li>
<li><a href="products.html">Products</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="clients.html">Clients</a></li>
<li><a href="case-studies.html">Case Studies</a></li>
</ul>
</body>
</html>