对列表应用样式和创建导航条

用css对列表应用样式

用背景图像作为项目符号

创建垂直和水平导航条

用滑动门标签页式导航

纯css下拉菜单

创建css图像映射，创建远距离翻转

使用定义列表

一.基本列表样式

1.ul>li*4

<ul id="dot">
    <li class="active">1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

添加定制的项目符号可以用属性list-style-image但是对符号的位子控制能力不强

所以把这个属性设置为空，list-style-image:none;然后将符号作为背景图像应用于列表项

background: url("") no-repeat 0 50%;//使符号居中显示

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        ul.nav{
            padding: 0;
            margin: 0;

            list-style-type: none;
            width: 8em;
            background: #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/zhixiang.png") no-repeat 5% 50%;
            /*padding: 0.3em 1em;*/
            padding:5px 0 5px 34px;
        }
        ul.nav a:hover,ul.nav a:focus,ul.nav selected a{
            color: #e4ffd3;
            background: #6da203;
        }
    </style>
</head>
<body>
<ul class="nav">
    <li><a href="home.htm">Home</a></li>
    <li><a href="about.htm">About</a></li>
    <li><a href="services.htm">Our Service</a></li>
    <li><a href="work.htm">Our Work</a></li>
    <li><a href="news.htm">News</a></li>
    <li><a href="contact.htm">Contact</a></li>
</ul>
</body>
</html>

效果

鼠标滑过：

三.在导航条中突出当前页面

在每个页面的主体元素中添加一个ID或类名，指出用户当前在哪个页面或部分

四.水平导航条

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">

        *{
            margin: 0;
            padding: 0;
        }
        ol.pagination{
            list-style-type: none;
        }
        /*列表项水平排列*/
        ol.pagination li{
            float: left;
            margin-left: 0.6em;
        }
        ol.pagination a,ol.pagination li.selected{
            display: block;
            padding: 0.2em 0.5em;
            border: 1px solid #cccccc;
            text-decoration: none;
        }
        ol.pagination a:hover,ol.pagination a:focus,ol.pagination li::selection{
            background: blue;
            color: white;
        }
        /*prev 和next把边框取消*/
        ol.pagination a[rel="prev"],ol.pagination a[rel="next"]{
            border: none;
        }
        /*给列表的开头结尾添加一个箭头，使用：before和：after伪选择器及content属性*/
        /*分别为了列表开头的锚链接，用字符编码00AB，在这个链接前面添加双左箭头，结束的锚链接后添加双右链接*/
        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="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>
</body>
</html>

效果

五.创建图形化导航条

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        ul.nav {
            list-style: none;
            width: 690px;
            background: #faa819 url("img/mainNavBg.gif")no-repeat;
            /*清除浮动*/
            overflow: hidden;
        }
        ul.nav li{
            float: left;
        }
        ul.nav a{
            display: block;
            padding: 0 1em;
            line-height: 2.1em;
            text-decoration: none;
            background: url("img/divider.gif") repeat-y left top;
            color: #fff;
        }
        ul.nav .first a{
            background-image: none;
        }
        ul.nav a:hover{
            color: #333;
        }
    </style>
</head>
<body>
<ul class="nav">
    <li class="first"><a href="home.htm">Home</a></li>
    <li><a href="about.htm">About</a></li>
    <li><a href="new.htm">News</a></li>
    <li><a href="products.htm">Products</a></li>
    <li><a href="services.htm">Services</a></li>
    <li><a href="clients.htm">Clients</a></li>
    <li><a href="case-studies.htm">Case Studies</a></li>
</ul>
</body>
</html>

效果

鼠标滑过：

六.简化的滑动门标签页式导航（滑动门技术可以创建圆角框）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        ul.nav {
            list-style: none;
            width: 690px;
            /*清除浮动*/
            overflow: hidden;
        }
        ul.nav li{
            float: left;
            /*列表左浮，使他们水平显示而不是垂直显示。*/
            /*这次将组成标签页的两个图像中较大的图像作为背景图像应用于列表项。由于这个图像形成标签页的右边缘，所以将它定位到右边*/
            background: url("img/tab-right.gif") no-repeat right top;
        }
        ul.nav a{
            /*锚显示为块级元素可单击*/
            display: block;
            padding: 0 1em;
            /*行高控制高度*/
            line-height: 2.1em;
            text-decoration: none;
            background: green url("img/tab-left.gif") no-repeat left top;
            color: #fff;
            float: left;
        }
        ul.nav a:hover{
            color: #333;
        }
    </style>
</head>
<body>
<ul class="nav">
    <li class="first"><a href="home.htm">Home</a></li>
    <li><a href="about.htm">About</a></li>
    <li><a href="new.htm">News</a></li>
    <li><a href="products.htm">Products</a></li>
    <li><a href="services.htm">Services</a></li>
    <li><a href="clients.htm">Clients</a></li>
    <li><a href="case-studies.htm">Case Studies</a></li>
</ul>
</body>
</html>

七.Suckerfish 下拉菜单（多级导航）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
       ul.nav,ul.nav ul{
           list-style-type: none;
           float: left;
           border: 1px solid #486b02;
           background: #8bd400;
       }
        ul.nav li{
            float: left;
            /*width: 120px;*/
            width: 8em;

            /*background: #8bd400;*/
        }
        /*下拉菜单中的菜单项垂直对齐。需要把列表的宽度设置为与列表项相同*/
        /*在激活前隐藏实际的下拉菜单，需甚至position为absolute，然后隐藏到屏幕左边之外*/
        ul.nav li ul{
            width: 8em;
            position: absolute;
            left: -999em;
        }
        /*在父列表项中添加鼠标悬停伪选择器，把下拉菜单的位置改回正常位置，使下拉菜单就会重新出现*/
        .nav li:hover ul{
            left: auto;
        }
        /*最后几个样式把导航链接设置为块级元素，然后修改列表外观，设置背景颜色和斜面边框*/
        ul.nav a{
            display: block;
            color: #2b3f00;
            text-decoration: none;
            padding: 0.3em 1em;
            border-left: 1px solid #e4ffd3;
            border-right: 1px solid #486b02;
        }
        ul.nav li li a{
            border-left: 0;
            border-right: 0;
            border-top: 1px solid #e4ffd3;
            border-bottom: 1px solid #486b02;
        }
        ul a:hover,ul a:focus{
            color: #e4ffd3;
            background: #6da203;
        }
    </style>
</head>
<body>
<ul class="nav">
    <li><a href="/home/">Home</a></li>
    <li><a href="/products/">Products</a>
        <ul>
            <li><a href="/products/silverback/">Silverback</a></li>
            <li><a href="/products/fontdeck/">Font Deck</a></li>
        </ul>
    </li>
    <li><a href="/services/">Services</a>
        <ul>
            <li><a href="/services/design/">Design</a></li>
            <li><a href="/services/development/">Development</a></li>
            <li><a href="/services/consultancy">Consultancy</a></li>
        </ul>
    </li>
    <li><a href="/contact/">Contact Us</a></li>
</ul>
</body>
</html>

效果

鼠标在主菜单上时：

放在有子菜单的菜单上时：

八.css图像映射

九.远距离翻转

十.对于定义列表的简短说明

列表有无序列表，有序列表，定义列表

定义列表：由两个核心组件组成：定义术语<dt>和一个或多个定义描述<dd>

<dl>
    <dt>Apple</dt>
    <dd>Red, yellow or green fruit</dd>
    <dd>Computer company</dd>
    <dt>Banana</dt>
    <dd>Curved yellow fruit</dd>
</dl>

css知识点整理（六）

对列表应用样式和创建导航条

猜你喜欢