导航条和翻页的伪制作

作者: 心软脾气硬01 | 来源:发表于2018-09-11 20:11 被阅读0次

导航条和翻页的伪制作
练习二导航条
脱离文档流（1-3）
前端知识特征布局实例
前端(塌陷)
动画翻页书 —— 不忘初心童心童趣
制作翻页动画
html的翻页制作
前端（05）
周六日作业

2018-09-11 19-31-14.jpg

2018-09-11 19-31-32.jpg

很多网页都会有时候需要导航条或者翻页
比如淘宝网，你要找一个商品，根据导航条来找会更方便一些，今天我们一起来做一个简易的导航条，可以根据你的聪明才智把他做的更完美
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导航条</title>
    <style type="text/css">
        /*清除默认样式*/
        *{
            margin: 0;
            padding: 0;
        }
        .nav{
            /*去除项目符号*/
            list-style: none;
            border: 1px black solid;
            width: 960px;
            height: 42px;
            /*设置居中*/
            margin: 50px auto;
            /*解决高度塌陷*/
            overflow: hidden;
        }

        .nav li{
            /*设置li向左浮动*/
            float: left;
            width: 12.5%;
        }

        .nav a{
            /*将a转换为块元素*/
            display: block;
            /*!*设置文字居中*!*/
            text-align: center;
            /*设置一个内边距*/
            padding: 15px 5px 30px 5px;
            /*去除下划线*/
            text-decoration: none;
            /*设置字体*/
            color: #333;
            font-family: "微软雅黑";
            font-size: 14px;
            }
        /*设置a的鼠标移入的效果*/
        /*.nav a:hover{*/
            /*background-color: #cc0000;*/
        /*}*/
        .nav li span{
            padding: 20px;
        }

    </style>
<body>
    <ul class="nav">
        <li><a href="#">首页<span>|</span></a></li>
        <li><a href="#">网站建设<span>|</span></a></li>
        <li><a href="#">程序开发<span>|</span></a></li>
        <li><a href="#">网络营销<span>|</span></a></li>
        <li><a href="#">企业VI<span>|</span></a></li>
        <li><a href="#">案例展示<span>|</span></a></li>
        <li><a href="#">联系我们<span>|</span></a></li>
    </ul>

</body>
</html>

最后效果图如下，还可以做一些美化，使它看起来跟舒心

2018-09-11 19-46-15.jpg

而翻页更是经常见到，通常内容没有办法在一页上显示，这时候一个翻页是非常必要的
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>翻页</title>
    <style type="text/css">
        /*清除默认样式*/
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            width: 960px;
            height: 42px;
            background-color: white;
            border: 1px #deddd9 solid;
            /*设置居中*/
            margin: 50px auto;
            /*解决高度塌陷*/
            overflow: hidden;
            text-align: center;
            padding-top: 15px;
        }
        .box1 a{
            background-color: gold;
            padding: 5px 10px;
            font-family: "微软雅黑";
            font-size: 12px;
            color: black;
            /*去除下划线*/
            text-decoration: none;


        }
    </style>
</head>
<body>
    <div class="box1">
        <a href="#">上一页</a>
        <a href="#">1</a>
        <a href="#">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
        ...
        <a href="#">17</a>
        <a href="#">18</a>
        <a href="#">19</a>
        <a href="#">20</a>
        <a href="#">下一页</a>
    </div>
</body>
</html>

效果图如下：