CSS 實例
阿新 • • 發佈：2017-11-29
css1)垂直導航條
<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:gray;
text-decoration:none;
border-top:1px solid #486b02;
padding:0.3em 1em;
background:url(4.jpg) left center; <此處可以使用背景圖,也可以使用背景色反轉>
text-indent:20px;
}
ul.nav a:hover{
color: #e4ffd3;
background-color: #6da203;
}
</style>
</head>
<body>
<ul class="nav">
<li><a href="">Home1</a></li>
<li><a href="">Home2</a></li>
<li><a href="">Home3</a></li>
<li><a href="">Home4</a></li>
<li><a href="">Home5</a></li>
<li><a href="">Home6</a></li>
</ul>
</body>
2)水平分頁導航條
2.1)浮動實現
<style>
ul.nav {
margin:0;
padding:0;
list-style-type:none;
}
ul.nav li {
float:left; /* 本例采用浮動塊狀元素li實現*/
mergin-right:0.6em;
}
ul.nav a,ul.nav li.selected {
display:block; /* a元素塊狀化,使用盒模型*/
padding:0.2em 0.5em;
border:1px solid #ccc;
text-decoration:none;
}
ul.nav a:hover,ul.nav li.selected{
color: white;
background-color: blue;
}
ul.nav a[rel="prev"],ul.nav a[rel="next"] {
border:none;
}
ul.nav a[rel="prev"]:before {
content:"\00AB";
padding-right:0.5em;
}
ul.nav a[rel="next"]:after {
content:"\00BB";
padding-left:0.5em;
}
</style>
</head>
<body>
<ul class="nav">
<li><a href="" rel="prev">Prev</a></li>
<li><a href="">Home1</a></li>
<li><a href="">Home2</a></li>
<li class="selected">Home3</li>
<li><a href="">Home4</a></li>
<li><a href="">Home5</a></li>
<li><a href="">Home6</a></li>
<li><a href="" rel="next">Next</a></li>
</ul>
</body>
CSS 實例