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