添加导航页
This commit is contained in:
parent
1bc452c1af
commit
92a0305d31
339
index.html
Normal file
339
index.html
Normal file
@ -0,0 +1,339 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<link rel="stylesheet" type="text/css" href="./index/css/style.css">
|
||||||
|
<link rel="stylesheet" type="text/css" href="./index/css/font.css">
|
||||||
|
<!-- FontAwesome -->
|
||||||
|
<link rel="stylesheet" href="./index/css/all.min.css">
|
||||||
|
<!--引入Swiper-->
|
||||||
|
<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css">
|
||||||
|
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js">
|
||||||
|
</script>
|
||||||
|
<!--<link rel="stylesheet" href="./css/swiper-bundle.min.css">
|
||||||
|
<script src="./js/swiper-bundle.min.js"> </script>-->
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div class="main">
|
||||||
|
<div class="left">
|
||||||
|
<!--Logo-->
|
||||||
|
<div class="main-img">
|
||||||
|
<!--<img src="./index/img/icon/logo.png" alt="img">-->
|
||||||
|
<div class="img-title">
|
||||||
|
<span class="img-title"><a href="https://study.jonylee.top/50+js-css-html/">Web 50+</a></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="message cards" id="switchmore">
|
||||||
|
<div class="des" id="des">
|
||||||
|
<i class="fa-solid fa-quote-left"></i>
|
||||||
|
<div class="des-title"><span id="change">Hello World !</span><br><span id="change1">50+web练习小项目 HTML, CSS & JS</span></div>
|
||||||
|
<i class="fa-solid fa-quote-right"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
<div class="father swiper">
|
||||||
|
<div class="swiper-wrapper">
|
||||||
|
<!-- 第一页 -->
|
||||||
|
<div class="swiper-slide">
|
||||||
|
<!-- 第一行 -->
|
||||||
|
<div class="son">
|
||||||
|
<div class="second" onclick="window.open('./expanding-cards/','_self')">
|
||||||
|
<img src="./index/images/1.png">
|
||||||
|
<span>01 扩展卡片</span>
|
||||||
|
</div>
|
||||||
|
<div class="second" onclick="window.open('./progress-steps/','_self')">
|
||||||
|
<img src="./index/images/2.png">
|
||||||
|
<span>02 进度条</span>
|
||||||
|
</div>
|
||||||
|
<div class="second" onclick="window.open('./rotating-nav-animation/','_self')">
|
||||||
|
<img src="./index/images/3.png">
|
||||||
|
<span>03 旋转导航动画</span>
|
||||||
|
</div>
|
||||||
|
<div class="second" onclick="window.open('./hidden-search/','_self')">
|
||||||
|
<img src="./index/images/4.png">
|
||||||
|
<span>04 隐藏搜索框</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 第二行 -->
|
||||||
|
<div class="son">
|
||||||
|
<div class="second" onclick="window.open('./blurry-loading/','_self')">
|
||||||
|
<img src="./index/images/6.png">
|
||||||
|
<span>05 模糊加载</span>
|
||||||
|
</div>
|
||||||
|
<div class="second" onclick="window.open('./scroll-animation/','_self')">
|
||||||
|
<img src="./index/images/7.png">
|
||||||
|
<span>06 滚动动画</span>
|
||||||
|
</div>
|
||||||
|
<div class="second" onclick="window.open('./split-landing-page/','_self')">
|
||||||
|
<img src="./index/images/8.png">
|
||||||
|
<span>07 拆分登陆页面</span>
|
||||||
|
</div>
|
||||||
|
<div class="second" onclick="window.open('./form-input-wave/','_self')">
|
||||||
|
<img src="./index/images/9.png">
|
||||||
|
<span>08 表单输入波浪</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 第三行 -->
|
||||||
|
<div class="son">
|
||||||
|
<div class="second" onclick="window.open('./sound-board/','_self')">
|
||||||
|
<img src="./index/images/6.png">
|
||||||
|
<span>09 声音卡</span>
|
||||||
|
</div>
|
||||||
|
<div class="second" onclick="window.open('./dad-jokes/','_self')">
|
||||||
|
<img src="./index/images/7.png">
|
||||||
|
<span>10 爸爸的笑话</span>
|
||||||
|
</div>
|
||||||
|
<div class="second" onclick="window.open('./event-keycodes/','_self')">
|
||||||
|
<img src="./index/images/8.png">
|
||||||
|
<span>11 事件键码</span>
|
||||||
|
</div>
|
||||||
|
<div class="second" onclick="window.open('./faq-collapse/','_self')">
|
||||||
|
<img src="./index/images/9.png">
|
||||||
|
<span>12 常见问题折叠</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 第二页 -->
|
||||||
|
<div class="swiper-slide">
|
||||||
|
<!-- 第四行 -->
|
||||||
|
<div class="son">
|
||||||
|
<div class="second" onclick="window.open('./random-choice-picker/','_self')">
|
||||||
|
<img src="./index/images/6.png">
|
||||||
|
<span>13 随机选择器</span>
|
||||||
|
</div>
|
||||||
|
<div class="second" onclick="window.open('./animated-navigation/','_self')">
|
||||||
|
<img src="./index/images/7.png">
|
||||||
|
<span>14 导航动画</span>
|
||||||
|
</div>
|
||||||
|
<div class="second" onclick="window.open('./incrementing-counter/','_self')">
|
||||||
|
<img src="./index/images/8.png">
|
||||||
|
<span>15 递增计数器</span>
|
||||||
|
</div>
|
||||||
|
<div class="second" onclick="window.open('./drink-water/','_self')">
|
||||||
|
<img src="./index/images/9.png">
|
||||||
|
<span>16 喝水</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 第五行 -->
|
||||||
|
<div class="son">
|
||||||
|
<div class="second" onclick="window.open('./movie-app/','_self')">
|
||||||
|
<img src="./index/images/6.png">
|
||||||
|
<span>17 movie-app</span>
|
||||||
|
</div>
|
||||||
|
<div class="second" onclick="window.open('./background-slider/','_self')">
|
||||||
|
<img src="./index/images/7.png">
|
||||||
|
<span>18 背景滑块</span>
|
||||||
|
</div>
|
||||||
|
<div class="second" onclick="window.open('./theme-clock/','_self')">
|
||||||
|
<img src="./index/images/8.png">
|
||||||
|
<span>19 主题时钟</span>
|
||||||
|
</div>
|
||||||
|
<div class="second" onclick="window.open('./button-ripple-effect/','_self')">
|
||||||
|
<img src="./index/images/9.png">
|
||||||
|
<span>20 按钮涟漪效果</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 第六行 -->
|
||||||
|
<div class="son">
|
||||||
|
<div class="second" onclick="window.open('./drag-n-drop/','_self')">
|
||||||
|
<img src="./index/images/1.png">
|
||||||
|
<span>21 拖放</span>
|
||||||
|
</div>
|
||||||
|
<div class="second" onclick="window.open('./drawing-app/','_self')">
|
||||||
|
<img src="./index/images/2.png">
|
||||||
|
<span>22 画图APP</span>
|
||||||
|
</div>
|
||||||
|
<div class="second" onclick="window.open('./kinetic-loader/','_self')">
|
||||||
|
<img src="./index/images/3.png">
|
||||||
|
<span>23 加载动画</span>
|
||||||
|
</div>
|
||||||
|
<div class="second" onclick="window.open('./content-placeholder/','_self')">
|
||||||
|
<img src="./index/images/4.png">
|
||||||
|
<span>24 内容占位符</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 第三页 -->
|
||||||
|
<div class="swiper-slide">
|
||||||
|
<!-- 第七行 -->
|
||||||
|
<div class="son">
|
||||||
|
<div class="second" onclick="window.open('./sticky-navigation/','_self')">
|
||||||
|
<img src="./index/images/6.png">
|
||||||
|
<span>25 粘性导航栏</span>
|
||||||
|
</div>
|
||||||
|
<div class="second" onclick="window.open('./double-vertical-slider/','_self')">
|
||||||
|
<img src="./index/images/7.png">
|
||||||
|
<span>26 双垂直滑块</span>
|
||||||
|
</div>
|
||||||
|
<div class="second" onclick="window.open('./toast-notification/','_self')">
|
||||||
|
<img src="./index/images/8.png">
|
||||||
|
<span>27 Toast通知</span>
|
||||||
|
</div>
|
||||||
|
<div class="second" onclick="window.open('./github-profiles/','_self')">
|
||||||
|
<img src="./index/images/9.png">
|
||||||
|
<span>28 Github 配置文件</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 第八行 -->
|
||||||
|
<div class="son">
|
||||||
|
<div class="second" onclick="window.open('./double-click-heart/','_self')">
|
||||||
|
<img src="./index/images/6.png">
|
||||||
|
<span>29 双击加心点赞</span>
|
||||||
|
</div>
|
||||||
|
<div class="second" onclick="window.open('./auto-text-effect/','_self')">
|
||||||
|
<img src="./index/images/7.png">
|
||||||
|
<span>30 自动文本效果</span>
|
||||||
|
</div>
|
||||||
|
<div class="second" onclick="window.open('./password-generator/','_self')">
|
||||||
|
<img src="./index/images/8.png">
|
||||||
|
<span>31 密码生成器</span>
|
||||||
|
</div>
|
||||||
|
<div class="second" onclick="window.open('./good-cheap-fast/','_self')">
|
||||||
|
<img src="./index/images/9.png">
|
||||||
|
<span>32 多快好省</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 第九行 -->
|
||||||
|
<div class="son">
|
||||||
|
<div class="second" onclick="window.open('./notes-app/','_self')">
|
||||||
|
<img src="./index/images/6.png">
|
||||||
|
<span>33 便签</span>
|
||||||
|
</div>
|
||||||
|
<div class="second" onclick="window.open('./animated-countdown/','_self')">
|
||||||
|
<img src="./index/images/7.png">
|
||||||
|
<span>34 动画倒计时</span>
|
||||||
|
</div>
|
||||||
|
<div class="second" onclick="window.open('./image-carousel/','_self')">
|
||||||
|
<img src="./index/images/8.png">
|
||||||
|
<span>35 图片轮播</span>
|
||||||
|
</div>
|
||||||
|
<div class="second" onclick="window.open('./hoverboard/','_self')">
|
||||||
|
<img src="./index/images/9.png">
|
||||||
|
<span>36 彩色悬停效果</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 第四页 -->
|
||||||
|
<div class="swiper-slide">
|
||||||
|
<!-- 第十行 -->
|
||||||
|
<div class="son">
|
||||||
|
<div class="second" onclick="window.open('./pokedex/','_self')">
|
||||||
|
<img src="./index/images/6.png">
|
||||||
|
<span>37 口袋妖怪</span>
|
||||||
|
</div>
|
||||||
|
<div class="second" onclick="window.open('./mobile-tab-navigation/','_self')">
|
||||||
|
<img src="./index/images/7.png">
|
||||||
|
<span>38 移动选项卡导航</span>
|
||||||
|
</div>
|
||||||
|
<div class="second" onclick="window.open('./password-strength-background/','_self')">
|
||||||
|
<img src="./index/images/8.png">
|
||||||
|
<span>39 密码强度背景</span>
|
||||||
|
</div>
|
||||||
|
<div class="second" onclick="window.open('./3d-boxes-background/','_self')">
|
||||||
|
<img src="./index/images/9.png">
|
||||||
|
<span>40 3D盒子背景</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 第十一行 -->
|
||||||
|
<div class="son">
|
||||||
|
<div class="second" onclick="window.open('./verify-account-ui/','_self')">
|
||||||
|
<img src="./index/images/6.png">
|
||||||
|
<span>41 验证账户UI</span>
|
||||||
|
</div>
|
||||||
|
<div class="second" onclick="window.open('./live-user-filter/','_self')">
|
||||||
|
<img src="./index/images/7.png">
|
||||||
|
<span>42 实时用户筛选器</span>
|
||||||
|
</div>
|
||||||
|
<div class="second" onclick="window.open('./feedback-ui-design/','_self')">
|
||||||
|
<img src="./index/images/8.png">
|
||||||
|
<span>43 反馈UI设计</span>
|
||||||
|
</div>
|
||||||
|
<div class="second" onclick="window.open('./custom-range-slider/','_self')">
|
||||||
|
<img src="./index/images/9.png">
|
||||||
|
<span>44 自定义范围滑块</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 第十二行 -->
|
||||||
|
<div class="son">
|
||||||
|
<div class="second" onclick="window.open('./netflix-mobile-navigation/','_self')">
|
||||||
|
<img src="./index/images/6.png">
|
||||||
|
<span>45 Netflix移动导航</span>
|
||||||
|
</div>
|
||||||
|
<div class="second" onclick="window.open('./quiz-app/','_self')">
|
||||||
|
<img src="./index/images/7.png">
|
||||||
|
<span>46 测验APP</span>
|
||||||
|
</div>
|
||||||
|
<div class="second" onclick="window.open('./testimonial-box-switcher/','_self')">
|
||||||
|
<img src="./index/images/8.png">
|
||||||
|
<span>47 推荐式换盒器</span>
|
||||||
|
</div>
|
||||||
|
<div class="second" onclick="window.open('./random-image-generator/','_self')">
|
||||||
|
<img src="./index/images/9.png">
|
||||||
|
<span>48 随机图像生成器</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 第五页 -->
|
||||||
|
<div class="swiper-slide">
|
||||||
|
<!-- 第十三行 -->
|
||||||
|
<div class="son">
|
||||||
|
<div class="second" onclick="window.open('./todo-list/','_self')">
|
||||||
|
<img src="./index/images/6.png">
|
||||||
|
<span>49 todo列表</span>
|
||||||
|
</div>
|
||||||
|
<div class="second" onclick="window.open('./insect-catch-game/','_self')">
|
||||||
|
<img src="./index/images/7.png">
|
||||||
|
<span>50 捉虫游戏</span>
|
||||||
|
</div>
|
||||||
|
<div class="second" onclick="window.open('./simple-timer/','_self')">
|
||||||
|
<img src="./index/images/8.png">
|
||||||
|
<span>51 简单计时器</span>
|
||||||
|
</div>
|
||||||
|
<div class="second" onclick="window.open('./3d-boxes-background/','_self')">
|
||||||
|
<img src="./index/images/9.png">
|
||||||
|
<span>52 待添加</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="swiper-pagination" style="position: static;margin-top: 4px;"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!--Swiper初始化设置-->
|
||||||
|
<script>
|
||||||
|
var mySwiper = new Swiper('.swiper', {
|
||||||
|
direction: 'horizontal', // 垂直切换选项,水平：horizontal；垂直：vertical
|
||||||
|
loop: false, // 循环模式选项
|
||||||
|
|
||||||
|
// 如果需要分页器
|
||||||
|
pagination: {
|
||||||
|
el: '.swiper-pagination',
|
||||||
|
},
|
||||||
|
|
||||||
|
// 鼠标滚轮控制Swiper切换
|
||||||
|
mousewheel: true, // 开启鼠标滚轮控制Swiper切换
|
||||||
|
mousewheelDirectionNormalize: true, // 如果需要，可以设置鼠标滚轮的方向，true 为向下或向右表示“后”，false 为向上或向左表示“后”
|
||||||
|
mousewheelSensitivity: 1, // 鼠标滚轮的滚动行为，表示每次滚动多少个slide，默认为1
|
||||||
|
mousewheelSpeed: 2000, // 表示滚动的速度，默认为1000ms，即1秒
|
||||||
|
mousewheelPropagation: true // 表示滚动的反弹效果，默认为100ms
|
||||||
|
|
||||||
|
// 如果需要前进后退按钮
|
||||||
|
/* navigation: {
|
||||||
|
nextEl: '.swiper-button-next',
|
||||||
|
prevEl: '.swiper-button-prev',
|
||||||
|
},*/
|
||||||
|
|
||||||
|
// 如果需要滚动条
|
||||||
|
/*scrollbar: {
|
||||||
|
el: '.swiper-scrollbar',
|
||||||
|
},*/
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
9
index/css/all.min.css
vendored
Normal file
9
index/css/all.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
178
index/css/font.css
Normal file
178
index/css/font.css
Normal file
@ -0,0 +1,178 @@
|
|||||||
|
@font-face {
|
||||||
|
font-family: "Pacifico-Regular";
|
||||||
|
src: url('../font/Pacifico-Regular.ttf') format('truetype');
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: "UnidreamLED";
|
||||||
|
src: url('../font/UnidreamLED.ttf') format('truetype');
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: "MiSans";
|
||||||
|
src: url('../font/MiSans-Regular.woff') format('woff');
|
||||||
|
font-display: sans-serif;
|
||||||
|
}
|
||||||
|
/*
|
||||||
|
@font-face {
|
||||||
|
font-family: "iconfont";
|
||||||
|
src: url('../font/iconfont.woff2') format('woff2'),
|
||||||
|
url('../font/iconfont.woff') format('woff'),
|
||||||
|
url('../font/iconfont.ttf') format('truetype');
|
||||||
|
}
|
||||||
|
|
||||||
|
.iconfont {
|
||||||
|
font-family: "iconfont" !important;
|
||||||
|
font-size: 16px;
|
||||||
|
font-style: normal;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-z_shangpinheji:before {
|
||||||
|
content: "\e683";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-a-daohangzhiyindingwei-05:before {
|
||||||
|
content: "\e970";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-volume-x:before {
|
||||||
|
content: "\e67a";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-volume-1:before {
|
||||||
|
content: "\e67b";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-volume:before {
|
||||||
|
content: "\e67c";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-volume-2:before {
|
||||||
|
content: "\e67d";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-music:before {
|
||||||
|
content: "\e986";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-next-one:before {
|
||||||
|
content: "\e609";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-next-one-copy:before {
|
||||||
|
content: "\ebd5";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-pause:before {
|
||||||
|
content: "\e733";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-play:before {
|
||||||
|
content: "\e65c";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-undo:before {
|
||||||
|
content: "\e875";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-wrench-fill:before {
|
||||||
|
content: "\e86e";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-plus:before {
|
||||||
|
content: "\e653";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-right:before {
|
||||||
|
content: "\e613";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-right-copy:before {
|
||||||
|
content: "\ebd4";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-times:before {
|
||||||
|
content: "\e857";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-bars:before {
|
||||||
|
content: "\e61f";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-link:before {
|
||||||
|
content: "\e603";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-close:before {
|
||||||
|
content: "\e656";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-photo:before {
|
||||||
|
content: "\ebd3";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-navigation1:before {
|
||||||
|
content: "\e637";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-cloud:before {
|
||||||
|
content: "\e624";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-lab:before {
|
||||||
|
content: "\e88d";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-blog-solid:before {
|
||||||
|
content: "\e631";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-comment-alt-lines:before {
|
||||||
|
content: "\e679";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-music-list:before {
|
||||||
|
content: "\e699";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-youxiang:before {
|
||||||
|
content: "\e605";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-github:before {
|
||||||
|
content: "\e691";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-telegram1:before {
|
||||||
|
content: "\e731";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-QQ:before {
|
||||||
|
content: "\e882";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-twitter:before {
|
||||||
|
content: "\e883";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-github1:before {
|
||||||
|
content: "\e799";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-weixin:before {
|
||||||
|
content: "\e600";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-telegram:before {
|
||||||
|
content: "\e8db";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-yinhao-copy:before {
|
||||||
|
content: "\e608";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-yinhao-copy-copy:before {
|
||||||
|
content: "\e62e";
|
||||||
|
} */
|
||||||
229
index/css/style.css
Normal file
229
index/css/style.css
Normal file
@ -0,0 +1,229 @@
|
|||||||
|
/* 全局设置 */
|
||||||
|
|
||||||
|
*, a, p {
|
||||||
|
text-decoration : none;
|
||||||
|
transition : .3s;
|
||||||
|
color : #009800;
|
||||||
|
user-select : none;
|
||||||
|
font-family : 'MiSans', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
color : #009800;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cards {
|
||||||
|
transition : .5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cards:hover {
|
||||||
|
transform : scale(1.01);
|
||||||
|
transition : .5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cards:active {
|
||||||
|
transform : scale(.95);
|
||||||
|
transition : .5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main {
|
||||||
|
width : 100%;
|
||||||
|
margin : 10px;
|
||||||
|
/*border : 1px solid black;*/
|
||||||
|
display : flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left {
|
||||||
|
width : 20%;
|
||||||
|
min-width : 320px;
|
||||||
|
margin : 10px;
|
||||||
|
/*border : 1px solid black;*/
|
||||||
|
display : flex;
|
||||||
|
flex-direction : column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
width : 80%;
|
||||||
|
min-width : 500px;
|
||||||
|
margin : 10px;
|
||||||
|
/*border : 1px solid black;*/
|
||||||
|
display : flex;
|
||||||
|
background : rgba(0, 0, 0, 5%);
|
||||||
|
/*backdrop-filter : blur(10px);*/
|
||||||
|
padding : 0rem;
|
||||||
|
border-radius : 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.father {
|
||||||
|
width : auto;
|
||||||
|
/*height: 500px;*/
|
||||||
|
margin : 0px;
|
||||||
|
/*border : 1px solid black;*/
|
||||||
|
padding : 0px;
|
||||||
|
display : flex;
|
||||||
|
flex-direction : column;
|
||||||
|
/* 主轴排列方向 */
|
||||||
|
/* flex-direction: row; */
|
||||||
|
/* flex-direction: row-reverse; */
|
||||||
|
/* flex-direction: column; */
|
||||||
|
/* flex-direction: column-reverse; */
|
||||||
|
/* 元素换行 */
|
||||||
|
/* flex-wrap : wrap; */
|
||||||
|
/* 在主轴上的对齐方式 */
|
||||||
|
/* 右对齐 */
|
||||||
|
/* justify-content: flex-end; */
|
||||||
|
/* 居中 */
|
||||||
|
/* justify-content: center; */
|
||||||
|
/* 左右两端对齐，即左右两侧项目都紧贴容器，且项目之间间距相等。 */
|
||||||
|
/* justify-content: space-between; */
|
||||||
|
/* 项目之间间距为左右两侧项目到容器间距的2倍 */
|
||||||
|
/* justify-content: space-around; */
|
||||||
|
/* 项目之间间距与项目与容器间距相等，相当于除去项目宽度，平均分配了剩余宽度作为项目左右margin。 */
|
||||||
|
/* justify-content: space-evenly; */
|
||||||
|
/* 轴 */
|
||||||
|
/* align-items: flex-end; */
|
||||||
|
/* align-items: center; */
|
||||||
|
/* align-items: baseline; */
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* 控制行，设置为弹性盒子 */
|
||||||
|
|
||||||
|
.son {
|
||||||
|
display : flex;
|
||||||
|
/* 设置主轴对齐方式 */
|
||||||
|
justify-content : space-around;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* 控制图片和文字行 */
|
||||||
|
|
||||||
|
.second {
|
||||||
|
background : rgb(0 0 0 / 5%);
|
||||||
|
/*backdrop-filter : blur(10px);*/
|
||||||
|
padding : .5rem;
|
||||||
|
border-radius : 6px;
|
||||||
|
margin : 5px;
|
||||||
|
/* 设置每个格子比例大小 */
|
||||||
|
width : 25%;
|
||||||
|
/* 文字居中 */
|
||||||
|
text-align : center;
|
||||||
|
cursor : pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.second:hover {
|
||||||
|
background-color : #009800;
|
||||||
|
color : #FFFFFF !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.second img {
|
||||||
|
width : 100%;
|
||||||
|
min-width : 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
width : 100%;
|
||||||
|
text-align : center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo img {
|
||||||
|
width : 100%;
|
||||||
|
min-width : 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*头像*/
|
||||||
|
|
||||||
|
.main-img {
|
||||||
|
display : flex;
|
||||||
|
align-items : center;
|
||||||
|
max-height : 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-img img {
|
||||||
|
border-radius : 5%;
|
||||||
|
width : 120px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-img img:hover {
|
||||||
|
transform : rotate(360deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.img-title {
|
||||||
|
width : 100%;
|
||||||
|
margin-left : 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
span.img-title {
|
||||||
|
font-size : 3rem;
|
||||||
|
color : #009800;
|
||||||
|
font-family : 'Pacifico-Regular' !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
span.img-text {
|
||||||
|
font-size : 2rem;
|
||||||
|
font-family : 'Pacifico-Regular' !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message {
|
||||||
|
background : rgb(0 0 0 / 5%);
|
||||||
|
backdrop-filter : blur(10px);
|
||||||
|
/*margin: 0.5rem;*/
|
||||||
|
padding : 1rem;
|
||||||
|
border-radius : 6px;
|
||||||
|
/*margin-top : 3.5rem;*/
|
||||||
|
width : auto;
|
||||||
|
cursor : pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*自适应*/
|
||||||
|
|
||||||
|
|
||||||
|
/*小于1200px时*/
|
||||||
|
|
||||||
|
@media (max-width: 1200px) {
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*小于1000px时*/
|
||||||
|
|
||||||
|
@media (max-width: 1000px) {
|
||||||
|
.main {
|
||||||
|
width : 100%;
|
||||||
|
margin : 10px;
|
||||||
|
/*border : 1px solid black;*/
|
||||||
|
display : flex;
|
||||||
|
flex-direction : column;
|
||||||
|
}
|
||||||
|
.left {
|
||||||
|
width : auto;
|
||||||
|
min-width : 500px;
|
||||||
|
margin : 10px;
|
||||||
|
/*border : 1px solid black;*/
|
||||||
|
display : flex;
|
||||||
|
flex-direction : column;
|
||||||
|
}
|
||||||
|
.right {
|
||||||
|
width : auto;
|
||||||
|
min-width : 500px;
|
||||||
|
margin : 10px;
|
||||||
|
/*border : 1px solid black;*/
|
||||||
|
display : flex;
|
||||||
|
}
|
||||||
|
.main-img {
|
||||||
|
width : 100%;
|
||||||
|
display : flex;
|
||||||
|
align-items : center;
|
||||||
|
max-height : 200px;
|
||||||
|
}
|
||||||
|
.message {
|
||||||
|
background : rgb(0 0 0 / 5%);
|
||||||
|
backdrop-filter : blur(10px);
|
||||||
|
/*margin: 0.5rem;*/
|
||||||
|
padding : 1rem;
|
||||||
|
border-radius : 6px;
|
||||||
|
width : auto;
|
||||||
|
cursor : pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
BIN
index/font/MiSans-Regular.woff
Normal file
BIN
index/font/MiSans-Regular.woff
Normal file
Binary file not shown.
BIN
index/font/Pacifico-Regular.ttf
Normal file
BIN
index/font/Pacifico-Regular.ttf
Normal file
Binary file not shown.
BIN
index/font/UnidreamLED.ttf
Normal file
BIN
index/font/UnidreamLED.ttf
Normal file
Binary file not shown.
BIN
index/font/iconfont.ttf
Normal file
BIN
index/font/iconfont.ttf
Normal file
Binary file not shown.
BIN
index/font/iconfont.woff
Normal file
BIN
index/font/iconfont.woff
Normal file
Binary file not shown.
BIN
index/font/iconfont.woff2
Normal file
BIN
index/font/iconfont.woff2
Normal file
Binary file not shown.
BIN
index/images/1.png
Normal file
BIN
index/images/1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 71 KiB |
BIN
index/images/10.png
Normal file
BIN
index/images/10.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
BIN
index/images/11.png
Normal file
BIN
index/images/11.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
BIN
index/images/12.png
Normal file
BIN
index/images/12.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 65 KiB |
BIN
index/images/13.png
Normal file
BIN
index/images/13.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 65 KiB |
BIN
index/images/14.png
Normal file
BIN
index/images/14.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
BIN
index/images/2.png
Normal file
BIN
index/images/2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 57 KiB |
BIN
index/images/3.png
Normal file
BIN
index/images/3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 57 KiB |
BIN
index/images/4.png
Normal file
BIN
index/images/4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
BIN
index/images/5.png
Normal file
BIN
index/images/5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 53 KiB |
BIN
index/images/6.png
Normal file
BIN
index/images/6.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
BIN
index/images/7.png
Normal file
BIN
index/images/7.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
BIN
index/images/8.png
Normal file
BIN
index/images/8.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 60 KiB |
BIN
index/images/9.png
Normal file
BIN
index/images/9.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 60 KiB |
BIN
index/webfonts/fa-brands-400.ttf
Normal file
BIN
index/webfonts/fa-brands-400.ttf
Normal file
Binary file not shown.
BIN
index/webfonts/fa-brands-400.woff2
Normal file
BIN
index/webfonts/fa-brands-400.woff2
Normal file
Binary file not shown.
BIN
index/webfonts/fa-regular-400.ttf
Normal file
BIN
index/webfonts/fa-regular-400.ttf
Normal file
Binary file not shown.
BIN
index/webfonts/fa-regular-400.woff2
Normal file
BIN
index/webfonts/fa-regular-400.woff2
Normal file
Binary file not shown.
BIN
index/webfonts/fa-solid-900.ttf
Normal file
BIN
index/webfonts/fa-solid-900.ttf
Normal file
Binary file not shown.
BIN
index/webfonts/fa-solid-900.woff2
Normal file
BIN
index/webfonts/fa-solid-900.woff2
Normal file
Binary file not shown.
BIN
index/webfonts/fa-v4compatibility.ttf
Normal file
BIN
index/webfonts/fa-v4compatibility.ttf
Normal file
Binary file not shown.
BIN
index/webfonts/fa-v4compatibility.woff2
Normal file
BIN
index/webfonts/fa-v4compatibility.woff2
Normal file
Binary file not shown.
Loading…
Reference in New Issue
Block a user