【原创】梦溪导航导航页面设计

简介

最近学习了html的知识，打算做一个网站导航页面练手，暂时就命名为梦溪导航了。

[button color=”info” icon=”” url=”https://github.com/CyrilTang/Mengxi” type=””]Github地址[/button]

@package 梦溪heme
@author cyril
@version 1.0
@link https://www.cyrilstudio.top

样式设计

2021-8-13

[tabs]
[tab name=”样式” active=”true”]

梦溪导航

[/tab]
[tab name=”源码”]

<!DOCTYPE html>

<!-- * @package 梦溪heme -->
<!-- * @author cyril -->
<!-- * @version 1.0 -->
<!-- * @link https://www.cyrilstudio.top -->

<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>网址导航</title>
    <style type="text/css">
    body {

    }
    .footer{
     position:absolute;
     color:black;
     bottom:0;
     width:100%;
     height:10px;
     line-height:100px;
     text-align:center;


    }
    .search_frame{
      width: 90%;
      margin: 100px auto;
      text-align: center;

    }
    a:hover,a:link,a:visited,a:active,a:focus{
    color: black;
    text-decoration: none;
    }
    .frame {
      height: 60%;
      width: 100%;
      margin: 20px auto;
      text-align: center;
      float: left;
      margin-right: 10px;
      margin-bottom: 10px;
      padding: 5px 0px;
      white-space: nowrap;

    }
    button {
      margin: 20px;
    }
    .custom-btn {
      width: 130px;
      height: 40px;
      color: #fff;
      border-radius: 5px;
      padding: 10px 25px;
      font-family: 'Lato', sans-serif;
      font-weight: 500;
      background: transparent;
      cursor: pointer;
      transition: all 0.3s ease;
      position: relative;
      display: inline-block;
       box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
       7px 7px 20px 0px rgba(0,0,0,.1),
       4px 4px 5px 0px rgba(0,0,0,.1);
      outline: none;
    }


    /* 16 */
    .btn-16 {
      border: none;
      color: #000;
    }
    .btn-16:after {
      position: absolute;
      content: "";
      width: 0;
      height: 100%;
      top: 0;
      left: 0;
      direction: rtl;
      z-index: -1;
      box-shadow:
       -7px -7px 20px 0px #fff9,
       -4px -4px 5px 0px #fff9,
       7px 7px 20px 0px #0002,
       4px 4px 5px 0px #0001;
      transition: all 0.3s ease;
    }
    .btn-16:hover {
      color: #000;
    }
    .btn-16:hover:after {
      left: auto;
      right: 0;
      width: 100%;
    }
    .btn-16:active {
      top: 2px;
    }
    /* 6 */
    .btn-6 {
      background: rgb(247,150,192);
    background: radial-gradient(circle, rgba(247,150,192,1) 0%, rgba(118,174,241,1) 100%);
      line-height: 42px;
      padding: 0;
      border: none;
    }
    .btn-6 span {
      position: relative;
      display: block;
      width: 100%;
      height: 100%;
    }
    .btn-6:before,
    .btn-6:after {
      position: absolute;
      content: "";
      height: 0%;
      width: 1px;
     box-shadow:
       -1px -1px 20px 0px rgba(255,255,255,1),
       -4px -4px 5px 0px rgba(255,255,255,1),
       7px 7px 20px 0px rgba(0,0,0,.4),
       4px 4px 5px 0px rgba(0,0,0,.3);
    }
    .btn-6:before {
      right: 0;
      top: 0;
      transition: all 500ms ease;
    }
    .btn-6:after {
      left: 0;
      bottom: 0;
      transition: all 500ms ease;
    }
    .btn-6:hover{
      background: transparent;
      color: #76aef1;
      box-shadow: none;
    }
    .btn-6:hover:before {
      transition: all 500ms ease;
      height: 100%;
    }
    .btn-6:hover:after {
      transition: all 500ms ease;
      height: 100%;
    }
    .btn-6 span:before,
    .btn-6 span:after {
      position: absolute;
      content: "";
      box-shadow:
       -1px -1px 20px 0px rgba(255,255,255,1),
       -4px -4px 5px 0px rgba(255,255,255,1),
       7px 7px 20px 0px rgba(0,0,0,.4),
       4px 4px 5px 0px rgba(0,0,0,.3);
    }
    .btn-6 span:before {
      left: 0;
      top: 0;
      width: 0%;
      height: .5px;
      transition: all 500ms ease;
    }
    .btn-6 span:after {
      right: 0;
      bottom: 0;
      width: 0%;
      height: .5px;
      transition: all 500ms ease;
    }
    .btn-6 span:hover:before {
      width: 100%;
    }
    .btn-6 span:hover:after {
      width: 100%;
    }



    </style>
<body>
<div class="search_frame">


    </form>


<div>
<div class="frame" id="search"  >
        <button class="custom-btn btn-6"><span>搜索引擎</span></button>
        <a href="https://www.baidu.com/" target="_blank"><button class="custom-btn btn-16">百度搜索</button></a>
        <a href="https://www.so.com/" target="_blank"><button class="custom-btn btn-16">360搜索</button></a>
        <a href="https://www.sogou.com/"target="_blank"><button class="custom-btn btn-16">搜狗搜索</button></a>
        <a href="https://www.google.com/" target="_blank"><button class="custom-btn btn-16">谷歌搜索</button></a>
</div>
<div class="frame" id="learn vedio">
        <button class="custom-btn btn-6" target="_blank"><span>教育学习-视频</span></button>
        <a href="https://www.imooc.com/" target="_blank"><button class="custom-btn btn-16">慕课网</button></a>
        <a href="https://study.163.com/" target="_blank"><button class="custom-btn btn-16">网易课堂</button></a>
        <a href="https://ke.qq.com/" target="_blank"><button class="custom-btn btn-16">腾讯课堂</button></a>
        <a href="https://www.51zxw.net/" target="_blank"><button class="custom-btn btn-16">我爱自学网</button></a>
</div>
<div class="frame" id="learn vedio">
        <button class="custom-btn btn-6"><span>免费素材</span></button>
        <a href="https://www.58pic.com/" target="_blank"><button class="custom-btn btn-16">千图网</button></a>
        <a href="https://huaban.com/" target="_blank"><button class="custom-btn btn-16">花瓣网</button></a>
        <a href="https://www.duitang.com/" target="_blank"><button class="custom-btn btn-16">堆糖</button></a>
        <a href="https://www.pexels.com/videos/" target="_blank"><button class="custom-btn btn-16">Pexels</button></a>
</div>
<div class="frame" id="movie">
        <button class="custom-btn btn-6"><span>视频电影</span></button>
        <a href="https://v.qq.com/" target="_blank"><button class="custom-btn btn-16">腾讯视频</button></a>
        <a href="https://www.youku.com/" target="_blank"><button class="custom-btn btn-16">优酷视频</button></a>
        <a href="https://www.iqiyi.com/" target="_blank"><button class="custom-btn btn-16">爱奇艺</button></a>
        <a href="https://www.bilibili.com/    " target="_blank"><button class="custom-btn btn-16">BiliBili</button></a>
</div>
<div class="frame" id="shop">
        <button class="custom-btn btn-6"><span>视频电影</span></button>
        <a href="https://www.taobao.com/" target="_blank"><button class="custom-btn btn-16">淘宝网</button></a>
        <a href="https://www.jd.com/" target="_blank"><button class="custom-btn btn-16">京东</button></a>
        <a href="https://www.tmall.com/" target="_blank"><button class="custom-btn btn-16">天猫</button></a>
        <a href="https://www.suning.com/" target="_blank"><button class="custom-btn btn-16">苏宁易购</button></a>
</div>
<div class="frame" id="blog">
        <button class="custom-btn btn-6"><span>博客推荐</span></button>
        <a href="https://www.cyrilstudio.top/" target="_blank"><button class="custom-btn btn-16">梦溪博客</button>  </a>
        <button class="custom-btn btn-16">博客</button>
        <button class="custom-btn btn-16">博客</button>
        <button class="custom-btn btn-16">博客</button>
</div>
<div class="footer" id="footer">

         <p >@2021<a href="https://www.cyrilstudio.top/" target="_blank" style="color:#00FF00;"> Theme By 梦溪博客 </a> 梦溪导航 </p>

</div>
</body>

[/tab]
[/tabs]

2021-8-14

[tabs]
[tab name=”演示动画” active=”true”]

[vplayer url=”https://www.cyrilstudio.top/wp-content/uploads/2021/08/Mengxi.mov” pic=”” /]

[/tab]
[tab name=”源码”]

目前无后台，后续开发

[/tab]
[/tabs]

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

梦溪导航

简介

样式设计

相关文章

发表回复 取消回复

发表回复取消回复