CSS入门 0x4 列表样式和导航条

最新推荐文章于 2024-03-24 19:52:31 发布

cellinlab

最新推荐文章于 2024-03-24 19:52:31 发布

阅读量292

点赞数

分类专栏： CSS 前端基础文章标签： CSS列表 CSS导航条水平导航垂直导航

本文链接：https://blog.csdn.net/funkstill/article/details/88691900

版权

前端基础同时被 2 个专栏收录

167 篇文章 0 订阅

订阅专栏

CSS

29 篇文章 0 订阅

订阅专栏

基本列表样式

<!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>