CSS——对列表应用样式和创建导航栏

来源：互联网发布：linux corosync 编辑：程序博客网时间：2024/06/08 01:34

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

基本样式

对ul应用列表图片，设置方式为设置background图片。例如：

    <style>        ul {            margin: 0;            padding: 0;            list-style-type: none;        }        ul li{            background: url("image/tick.png") no-repeat 0 50%;            padding-left: 30px;        }    </style>

效果如下：
这里写图片描述

另一种方式：

ul.stars li:before {content: url(star.gif); margin-left: 8px}ul.stars li {text-indent: -20px; list-style: none;}

基本垂直导航条

主要CSS样式为：

        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("image/arrow.gif") no-repeat 5% 50%;            padding: 0.3em 1em;        }        ul.nav li:last-child a {            border-bottom: 0;        }        ul.nav a:hover {            color: #e4ffd3;            background-color: #6da203;        }

效果如下：
这里写图片描述

水平分页导航条

HTML为：

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

CSS为：

    <style>        ol.pagination {            padding: 0;            margin: 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 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>

最终结果为：
这里写图片描述

水平导航栏

主要CSS样式为：

        ul.nav {            margin: 0;            padding: 0;            list-style: none;            /*width: 72em;*/            background: #FAA819 url("image/mainNavBg.gif") repeat-x;            /*让父元素包含浮动子元素*/            overflow: hidden;            display: inline-block;        }        ul.nav li {            /*元素浮动时，不再占据文档中的任何空间。父列表实际没有内容，就会收缩，会隐藏列表背景*/            float: left;        }        ul.nav a {            display: block;            padding: 0 3em;            line-height: 2.1em;            text-decoration: none;            color: #fff;            /*分隔线*/            background: url("image/divider.gif") repeat-y left top;        }        ul.nav li:first-child a {            /*取消第一项的背景图片*/            background-image: none;        }        ul.nav a:hover {            color: #333;        }

效果为：
这里写图片描述

下拉菜单

CSS样式为：

        ul.nav, ul.nav ul {            margin: 0;            padding: 0;            list-style-type: none;            /*ul浮动来包含列表项*/            float: left;            border: 1px solid #486b02;            background-color: #8bd400;        }        ul.nav li {            float: left;            width: 8em;            background-color: #8bd400;        }        ul.nav li ul {            width: 8em;            /*设定position为absolute*/            position: absolute;            left: -999em;        }        ul.nav a {            display: block;            color: #2b3f00;            text-decoration: none;            padding: 0.3em 1em;            border-right: 1px solid #486b02;            border-left: 1px solid #e4ffd3;        }        ul.nav li li a {            border-top: 1px solid #e4ffd3;            border-bottom: 1px solid #486b02;            border-left: 0;            border-right: 0;        }        ul.nav li:last-child a {            border-right: 0;            border-bottom: 0;        }        ul a:hover {            color: #e4ffd3;            background-color: #6DA203;        }        .nav li:hover ul {            left:  auto;        }

最终结果为：
这里写图片描述

搜索框

搜素框为一个表单，例如：

    <header>        <form class="stylin_form_search1" action="#" method="post">            <label for="search">search</label>            <input type="search" id="search" name="search" placeholder="search">        </form>    </header>

CSS样式为：

     <style>        * {            margin: 0;            padding: 0;        }        header {            font-family: helvetica, arial, sans-serif;            display: block;            overflow: hidden;            width: 500px;            margin: 30px;            border-radius: 6px;            background-color: #ddd;        }        form.stylin_form_search1 {            float: right;            width: 400px;            margin: 5px;            padding: 5px;        }        form.stylin_form_search1 input {            float: right;            width: 70px;            padding: 2px 0 3px 5px;            /*去掉默认的突显轮廓框*/            outline: none;            font-size: 0.8em;            border-color: #eee #ccc #ccc #eee;            border-radius: 10px;            /*过渡*/            -webkit-transition: 2s width;            -moz-transition: 2s width;            -ms-transition: 2s width;            -o-transition: 2s width;            transition: 2s width;        }        form.stylin_form_search1 input:focus {            width: 200px;        }        form.stylin_form_search1 label {            display: none;        }    </style>

最终结果为：
这里写图片描述

弹出层

HTML为：

    <figure>        <img src="image/pink_heels.jpg" alt="pink heels">        <figcaption>            <h3>Pink Platforms</h3>            <a href="#">More info</a>        </figcaption>    </figure>    <figure class="click_me">        <img src="image/leopard_heels.jpg" alt="leopard heels">        <figcaption>            <h3>Leopard Platforms</h3>            <a href="#">More info</a>        </figcaption>    </figure>    <figure>        <img src="image/red_heels.jpg" alt="red heels">        <figcaption>            <h3>Red Platforms</h3>            <a href="#">More info</a>        </figcaption>    </figure>

CSS样式为：

        figure {            width: 144px;            height: 153px;            margin: 20px;            border: 1px solid #666;            /*为弹出层提供定位上下文*/            position: relative;            /*让图片并排显示*/            float: left;        }        img {            /*去掉图片下方的基线空白*/            display: block;        }        figcaption {            display: none;            /*相对于容器*/            position: absolute;            left: 74%;            top: 14px;            width: 130px;            padding: 10px;            background: #f2eaea;            border: 3px solid red;            border-radius: 6px;        }        figure:hover figcaption {            /*鼠标悬停在图片上时显示弹出层*/            display: block;            /*防止堆叠*/            z-index: 2;        }        figcaption h3 {            font-size: 14px;            color: #666;            margin-bottom: 6px;        }        figcaption a {            display: block;            text-decoration: none;            font-size: 12px;            color: #000;        }        /*红色三角形的盒子*/        figcaption::after {            /*需要有内容，这里是一个空字符串*/            content: " ";            /*相对于弹出层定位*/            position: absolute;            border: 12px solid;            border-color: transparent red transparent transparent;            right: 100%;            top: 17px;            height: 0px;            width: 0px;        }

最终效果为：
这里写图片描述

0 0