响应式个人导航模板(HTML+CSS)

mybokenav.png
写了一下午,鼓捣了半天的成果,尽管还有些小瑕疵。但是还算看得过去,毕竟第一次弄响应式的网页,支持PC、手机端。我把源代码放到下方,当然图片就不放了,你自己随意更改喜欢的即可。当然如果不想打开编辑器的话我把源文件也放到下方,你自行下载。如果你与更好的意见欢迎下方评论留言。
mybokenav2.png

HTML代码

<!DOCTYPE html>
<html>

    <head class="bg">
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <title>Hello·MrLinn-导航</title>
        <link rel="stylesheet" href="css/boke_nav.css" />
        <link rel="icon" href="https://wlinn.xyz/usr/uploads/Site-pictures/favicon.ico" mce_href="https://wlinn.xyz/usr/uploads/Site-pictures/favicon.ico" type="image/x-icon">
    </head>

    <body>
        <div id="main">
            <div class="logo">
                <img src="img/touxaing.png" />
            </div>
            <br />
                <h2>Hello·MrLinn</h2>
            <br />
            <hr class="hr_width" />
            <br /><br />
                <p class="typing">心中有暖,又何惧人生荒凉。</p>
            <br /><br />
            <hr class="hr_width" />

            <!--导航栏-->
            <div class="boke_nav_style">
                <ul class="nav_style">
                    <li>
                        <a href="https://www.wlinn.xyz/">博客</a>
                    </li>
                    <li>
                        <a href="https://music.163.com/#/user/home?id=505570905">网易云</a>
                    </li>
                    <li>
                        <a href="https://console.upyun.com/login/">又拍云</a>
                    </li>
                    <li>
                        <a href="https://account.aliyun.com/">阿里云</a>
                    </li>
                    <li>
                        <a href="https://sso.qiniu.com/">七牛cdn</a>
                    </li>
                    <li>
                        <a href="http://120.79.142.18:8888/login">宝塔后台</a>
                    </li>
                    <li>
                        <a href="https://www.wlinn.xyz/admin/">后台编辑</a>
                    </li>
                </ul>
            </div>
            <!--导航栏2-->
            <div class="boke_nav_style2">
                <ul class="nav_style2">
                    <li>
                        <a href="https://www.wlinn.xyz/">博客</a>
                    </li>
                    <li>
                        <a href="https://music.163.com/#/user/home?id=505570905">网易云</a>
                    </li>
                    <li>
                        <a href="https://console.upyun.com/login/">又拍云</a>
                    </li>
                    <li>
                        <a href="https://account.aliyun.com/">阿里云</a>
                    </li>
                    <li>
                        <a href="https://sso.qiniu.com/">七牛cdn</a>
                    </li>
                    <li>
                        <a href="http://120.79.142.18:8888/login">宝塔后台</a>
                    </li>
                    <li>
                        <a href="https://www.wlinn.xyz/admin/">后台编辑</a>
                    </li>
                </ul>
            </div>

        </div>
        <!--版权信息-->
        <div class="foot">
            <p>Copyright © 2019 Hello·MrLinn导航 心中有暖,又何惧人生荒凉。 </p>
        </div>
        <!--版权信息2-->
        <div class="foot2">
    <p>Copyright © 2019 Hello·MrLinn导航 心中有暖,又何惧人生荒凉。 </p>
</div>

    </body>

</html>

CSS代码

/*初始化浏览器样式*/

* {
    margin: 0;
    padding: 0;
    font-family: "宋体;

}


/* 全局设置 */

body {
    color: #fff;
    /*background-image: url(../img/bg2.jpg);*/
    background-image: linear-gradient(160deg, #b100ff 20%, #00b3ff 80%);
    /* 渐变背景效果 */
    background-repeat: no-repeat;
    /* 背景不重复 */
    min-height: 800px;
}

#main {
    margin: 0 auto;
    margin-top: 100px;
}

.logo img {
    border-radius: 65px;
    max-width: 130px;
    max-height: 130px;
    border: 2px solid #fff;
    display: block;
    margin: 50px auto;
    border-radius: 50%;
    transition: all 2.0s;
}

.logo img:hover {
    transform: rotate(360deg);
    border: 2px solid #FF7401;
}

#main h2 {
    text-align: center;
    font-size: 2rem;
}

hr {
    margin: 0 auto;
    width: 30%;
}

.typing {
    margin: 0 auto;
    font-size: 1em;
    width: 12em;
    white-space: nowrap;
    border-right: 2px solid transparent;
    animation: typing 3.5s steps(15, end), blink-caret .75s step-end infinite;
    overflow: hidden;
}


/* 打印效果 */

@keyframes typing {
    from {
        width: 0;
    }
    to {
        width: 15em;
    }
}


/* 光标闪啊闪 */

@keyframes blink-caret {
    from,
    to {
        box-shadow: 1px 0 0 0 transparent;
    }
    50% {
        box-shadow: 1px 0 0 0;
    }
}

.boke_nav_style {
    margin: 0 auto;
    max-width: 800px;
    margin-top: 30px;
}

.boke_nav_style .nav_style li {
    list-style: none;
}

.boke_nav_style .nav_style li a {
    text-decoration: none;
    width: 82px;
    text-align: center;
    border: 1px solid #fff;
    margin: 5px 5px;
    padding: 5px 5px;
    float: left;
    border-radius: 15px 15px 15px 15px;
}

.boke_nav_style .nav_style li a:link {
    color: #FFFFFF;
}

.boke_nav_style .nav_style li a:hover {
    color: #FFFFFF;
    background: #FF7401;
}

.boke_nav_style .nav_style li a:visited {
    color: #FFFFFF;
}

.boke_nav_style .nav_style li a:active {
    color: #FFFFFF;
}

.foot {
    margin-top: 320px;
    text-align: center;
    height: 70px;
}

@media only screen and (min-width:1000px) {
    #main {
        width: 100%;
    }
    .boke_nav_style2 {
        display: none;
    }
    .foot2 {
        display: none;
    }
}

@media only screen and (max-width:1000px) {
    .boke_nav_style {
        display: none;
    }
    .bonav_style {
        display: none;
    }
    .boke_nav_style2 {
        max-width: 500px;
        margin: 0 auto;
        text-align: center;
    }
    .boke_nav_style2 .nav_style2 li {
        list-style: none;
        width: 100%;
        margin: 10px 0;
    }
    .boke_nav_style2 .nav_style2 li a {
        padding: 5px 0;
        text-decoration: none;
        display: block;
        text-align: center;
        border: 1px solid #fff;
        border-radius: 15px 15px 15px 15px;
    }
    .boke_nav_style2 .nav_style2 li a:link {
        color: #FFFFFF;
    }
    .boke_nav_style2 .nav_style2 li a:hover {
        color: #FFFFFF;
        background: #FF7401;
    }
    .boke_nav_style2 .nav_style2 li a:visited {
        color: #FFFFFF;
    }
    .boke_nav_style2 .nav_style2 li a:active {
        color: #FFFFFF;
    }
    .foot {
        display: none;
    }
    .foot2 {
        margin-top: 100px;
        text-align: center;
        height: 70px;
    }
}

演示地址

演示

源码下载

mybokenav.tar.gz

添加新评论

选择表情

  近期动态

近段时间可能都不怎么更新,回老家了。老家那个网。。。5G都快出来了。咋们老家还停留在3G。。唉
--- 发布日期 2019年7月30日

  关于博主

多数人都拥有自己不了解的能力和机会,都有可能做到未曾梦想的事情。

  近期评论

  •  MrLin: 已添加
  •  MrLin: 已更改
  •  MrLin: 已添加
  •  yangpanyao: 名称:杨攀遥的博客 介绍:一个php的技术博客 地址:https://www.yangpany...
  •  YOLEN: 友链:Leelon 更改为:优乐博客 链接:leelon.cn 更改为:https://yol...
  •  马丁:
  •  浪客小苏: 以添加,请尽快添加本站,谢谢。
  •  Mkre: 分布式文件系统HDFS
  •  limm: https://www.cwtseo.com/
  •  hb: 谢谢 亲。遇见你很幸运,有你这个一直不老的朋友更是我的福气。 也祝我们的友谊天长地久。 很喜欢...

快乐地过是一天,不快乐地过也是一天,我为什么不快快乐乐地过每一天呢?

岂能尽随人愿,但求无愧我心。

在你内心深处,还有无穷的潜力,有一天当你回首看时,你就会知道这绝对是真的。

活在当下,别在怀念过去或者憧憬未来中浪费掉你现在的生活。

挫折时,要像大树一样,被砍了,还能再长;也要像杂草一样,虽让人践踏,但还能勇敢地活下去。