导航条和翻页代码

来源：互联网发布：mac修容粉价格编辑：程序博客网时间：2024/05/17 22:09

1.翻页的静态页面实现

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style>        .fy{            width:958px;            height:40px;            list-style:none;            border:1px solid red;            padding:0;            text-align:center;        }        .fy li{            display:inline-block;            line-height:40px;            font-size:12px;        }        .fy a{            font-family:'Microsoft Yahei';            color:#000;            background-color:gold;            padding:5px 10px;            text-decoration:none;        }        .fy span{            background-color:#fff;        }    </style></head><body>    <ul class="fy">        <li><a href="">上一页</a></li>        <li><a href="">1</a></li>        <li><a href="">2</a></li>        <li><a href="">3</a></li>        <li><a href="">4</a></li>        <li>...</li>                <li><a href="">17</a></li>        <li><a href="">18</a></li>        <li><a href="">19</a></li>        <li><a href="">20</a></li>        <li><a href="">下一页</a></li>    </ul></body></html>

2.导航条带竖线分隔符的实现

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>导航条01</title>    <style type="text/css">        .menu{            width:958px;            height:42px;            border:1px solid blue;            list-style:none;            text-align:center;            padding:0px;            font-size:0px;            margin:auto;        }                .menu li{            display:inline-block;            line-height:40px;            font-size:14px;            margin:-1px;        }        .menu a{            text-decoration:none;             font-size:14px;            padding:0px 20px;            border-left:1px solid #333;            font-family:"Microsoft Yahei";            color:#333;        }    </style></head><body>    <ul class="menu">        <li><a href="" style="border:0px">首页</a></li>        <li><a href="">网站建设</a></li>        <li><a href="">程序开发</a></li>        <li><a href="">网络销售</a></li>        <li><a href="">企业VI</a></li>        <li><a href="">案例展示</a></li>        <li><a href="">练习我们</a></li>    </ul></body></html>

3.导航条常见类型

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style type="text/css">        .menu{            width:960px;            height:40px;            background-color:#55a8ea;            list-style:none;            padding:0;            font-size:0;        }        .menu li{            display:inline-block;            width:100px;            font-size:14px;            text-align:center;        }        .menu li:hover{            background-color:#00619f;        }        .menu a{            text-decoration:none;/*去掉下划线*/            font:normal 14px/40px 'Microsoft Yahei';            color:#FFF;        }    </style></head><body>    <ul class="menu">        <li><a href="">首页</a></li>        <li><a href="">网站建设</a></li>        <li><a href="">程序开发</a></li>        <li><a href="">网络营销</a></li>        <li><a href="">企业VI</a></li>        <li><a href="">案例展示</a></li>        <li><a href="">联系我们</a></li>    </ul></body></html>

阅读全文

0 0