当前位置：网站首页>Super nice navigation page (static page)
Super nice navigation page (static page)
2022-07-26 08:19:00 【Timeline principle】
You can view through this link ：http://project_almanac.gitee.io/mayday-navigation/
Page effects
Code section
The structure layer ：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Ant navigation </title>
<link rel="icon" href="image/adp5r-ajqx6-001.ico">
<link rel="stylesheet" href="style/style.css">
<link rel="stylesheet" href="swiper/swiper.css">
</head>
<body>
<!-- The navigation bar -->
<div class="head">
<div class="top">
<!-- logo Area -->
<div class="logo_container">
<a class="logo" href="#">
<img src="image/logo2.png">
</a>
</div>
<!-- list -->
<div class="list">
<ul class="list_ul">
<li class="list_li">
<a href="#" class="menu"> Home navigation </a>
</li>
<li class="list_li">
<a href="https://www.louisx.top/" target="_blank" class="menu"> Personal blog </a>
</li>
<li class="list_li">
<a href="#" class="menu"> About this site </a>
</li>
<li class="list_li">
<a href="#" class="menu"> To be developed ...</a>
</li>
</ul>
</div>
<div class="search">
<form action="http://www.baidu.com/baidu" target="_blank">
<input class="search_input" type=text name=word size=30>
<div class="search_baidu">
<input class="search_key" type="submit" value=" Baidu ">
</div>
</form>
</div>
</div>
</div>
<!-- Content area -->
<div class="container ">
<div class="container_lunbo swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<a target="_blank" href="#">
<img class="swiper-slide_img" src="image/logo.png">
</a>
</div>
<div class="swiper-slide">
<a target="_blank" href="http://www.change.tm">
<img class="swiper-slide_img" src="image/change.png" >
</a>
</div>
<div target="_blank" class="swiper-slide">
<a href="#">
<img class="swiper-slide_img" src="image/smartisan.png" >
</a>
</div>
</div>
<!-- If you need a pager -->
<div class="swiper-pagination"></div>
<!-- If you need a navigation button -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<div class="container_row">
<div class="row">
<div class="row_one">
<div class="row_xs">
<strong class="xs_title"> Commonly used . Work </strong>
</div>
<div class="link_list">
<a target="_blank" class="link_list_a" href="https://docs.qq.com/desktop?_from=1"> Tencent documents </a>
</div>
<div class="link_list list_bj">
<a target="_blank" class="link_list_a" href="http://www.change.tm"> Qijia network </a>
</div>
<div class="link_list list_bj">
<a target="_blank" class="link_list_a" href="#"></a>
</div>
<div class="link_list">
<a target="_blank" href="#"></a>
</div>
<div class="link_list list_bj">
<a target="_blank" href="#"></a>
</div>
<div class="link_list list_bj">
<a target="_blank" href="#"></a>
</div>
<div class="link_list">
<a target="_blank" href="#"></a>
</div>
<div class="link_list list_bj">
<a target="_blank" href="#"></a>
</div>
<div class="link_list list_bj">
<a target="_blank" href="#"></a>
</div>
</div>
<div class="row_one">
<div class="row_xs">
<strong class="xs_title"> Commonly used . Content platform </strong>
</div>
<div class="link_list">
<a target="_blank" class="link_list_a" href="https://mp.weixin.qq.com/cgi-bin/loginpage?url=%2Fcgi-bin%2Fannouncement%3Ft%3Dhome%2Fnotice%26token%3D327169358%26lang%3Dzh_CN%25E3%2580%2581"> WeChat official account </a>
</div>
<div class="link_list list_bj">
<a target="_blank" class="link_list_a" href="https://blog.csdn.net/weixin_46229298">CSDN</a>
</div>
<div class="link_list list_bj">
<a target="_blank" class="link_list_a" href="https://www.jianshu.com/"> Simple books </a>
</div>
</div>
<div class="row_one">
<div class="row_xs">
<strong class="xs_title"> Commonly used . Tools </strong>
</div>
<div class="link_list">
<a target="_blank" class="link_list_a" href="#"></a>
</div>
<div class="link_list list_bj">
<a target="_blank" class="link_list_a" href="#"></a>
</div>
<div class="link_list list_bj">
<a target="_blank" class="link_list_a" href="#"></a>
</div>
</div>
<div class="row_one">
<div class="row_xs">
<strong class="xs_title"> video . Music platform </strong>
</div>
<div class="link_list">
<a target="_blank" class="link_list_a" href="https://music.163.com/"> NetEase cloud music </a>
</div>
<div class="link_list list_bj">
<a target="_blank" class="link_list_a" href="https://y.qq.com/">QQ music </a>
</div>
<div class="link_list list_bj">
<a target="_blank" class="link_list_a" href="https://www.kugou.com/"> Cool dog music </a>
</div>
<div class="link_list">
<a target="_blank" class="link_list_a" href="https://www.bilibili.com/">blibli</a>
</div>
<div class="link_list list_bj">
<a target="_blank" class="link_list_a" href="https://v.qq.com/"> Tencent video </a>
</div>
<div class="link_list list_bj">
<a target="_blank" class="link_list_a" href="https://www.iqiyi.com/"> Iqiyi </a>
</div>
</div>
<div class="row_one"></div>
<div class="row_one"></div>
<div class="row_one"></div>
<div class="row_one"></div>
<div class="row_one"></div>
</div>
</div>
</div>
<!-- Bottom area -->
<div class="footer">
<div class="bottom-container">
<div class="footer-info">
<h3> It's not as beautiful as the powerful </h3>
</div>
</div>
</div>
</body>
<script src="jQuery/jquery-1.12.4.js"></script>
<script src="JavaScript.js"></script>
<script src="swiper/swiper.js"></script>
</html>
Style, ：
body{
margin: 0;
padding: 0;
background: url(image/bg.jpg);
}
.head{
width: 100%;
height: 70px;
background-color: #ffffff;
border-bottom: 1px solid #e9ecef;
}
.top{
width: 80%;
height: 70px;
margin: 0 auto;
}
/* logo */
.logo{
float: left;
}
.logo_container{
float: left;
}
.logo{
display: block;
width: 210px;
height: 50px;
margin: 0 auto;
text-decoration: none;
color: #000;
}
.logo img{
height: 70px;
margin-right: 10px;
float: left;
}
.top_list{
width: 192px;
height: 70px;
position: absolute;
/* position: fixed; */
left: 1420px;
}
.list_ul{
margin: 0;
padding: 0;
}
.list_li{
float: left;
list-style: none;
}
/* list */
.menu{
text-decoration: none;
font-size: 16px;
color: #757575;
font-family: 'SimHei';
line-height: 72.5px;
padding: 28px 16px;
}
.menu:hover{
color: #000000;
}
/* Search box */
.search{
float: right;
width: 278px;
height: 70px;
}
.search_input{
width: 200px;
height: 30px;
outline-style: none;
border: 1px solid #ccc;
font-size: 16px;
padding: 1px 13px;
float: left;
margin: 18px auto;
border-radius: 5px 0px 0px 5px;
box-shadow: rgb(0 0 0 / 7%) 0 1px 3px;
}
.search_baidu{
float: left;
margin: 18px auto;
}
.search_key{
width: 50px;
height: 34px;
border: 1px solid #ccc;
outline-style: none;
text-align: center;
cursor: pointer;
font-size: 14px;
font-weight: 700;
border-radius: 0px 5px 5px 0px;
background-color: rgb(248, 248, 248);
box-shadow: rgb(0 0 0 / 7%) 0 1px 3px;
}
/* Content area */
.container{
width: 80%;
height: 100%;
margin: 0 auto;
}
.container_lunbo{
width: 99.98%;
height: 400px;
margin: 30px 0;
background: #ffffff;
border: 1px solid #dee2e6;
border-radius: 7px;
overflow: hidden;
box-shadow: rgb(0 0 0 / 7%) 0 1px 3px;
}
.swiper-slide_img{
width: 100%;
height: 100%;
}
/* Navigation area / Content area */
.container_row{
width: 100%;
height: 800px;
background-color: #f2f2f2;
border: 1px solid #dee2e6;
box-shadow: rgb(0 0 0 / 7%) 0 1px 3px;
border-radius: 7px;
margin-bottom: 80px;
}
.row{
width: 100%;
height: 753px;
/* margin: 40px 0px; */
float: left;
}
.row_one{
width: 32%;
height: 230px;
float: left;
margin-left: 13px;
margin-top: 13px;
}
.row_xs{
width: 100px;
height: 22px;
}
.xs_title{
font-size: 14px;
font-weight: 400;
color: #b7b7b7;
padding-left: 2px;
}
.link_list{
width: 153.5px;
height: 56px;
float: left;
background-color: #FFFFFF;
text-align: center;
line-height: 55px;
margin-top: 13px;
font-size: 20px;
border-radius: 5px;
}
.link_list:hover{
background: #6b7184;
font-weight: bold;
font-size: 20px;
}
.link_list a{
display: block;
text-decoration: none;
color: #6b7184;
}
.link_list a:hover{
color: #FFF;
}
.list_bj{
margin-left: 13px;
}
/* Bottom area */
.footer{
width: 100%;
height: 100px;
background: #FFFFFF;
border-top: 1px solid #e9ecef;
}
.bottom-container{
width: 1320px;
height: 85px;
margin: 0 auto;
}
.footer-info{
width: 1320px;
height: 20px;
text-align: center;
line-height: 70px;
color: rgb(116, 116, 116);
}
Behavior layer ：
var mySwiper = new Swiper ('.swiper-container', {
autoplay:true,
loop: true, // Circulation patterns
// Pager
pagination: {
el: '.swiper-pagination',
},
// The forward and backward buttons
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// Scroll bar
scrollbar: {
el: '.swiper-scrollbar',
},
})
边栏推荐
- 一点一点理解微服务
- 2022/7/17 exam summary
- Let's talk about the three core issues of concurrent programming.
- 2022-07-08 group 5 Gu Xiangquan's learning notes day01
- Summary of common skills
- Kotlin中room数据库的使用
- Burp suite Chapter 8 how to use burp intruder
- memorandum...
- 关于期刊论文所涉及的一些概念汇编+期刊查询方法
- Burp Suite-第五章 如何使用Burp Target
猜你喜欢
Burp Suite - Chapter 1 burp suite installation and environment configuration
咱就是来聊聊并发编程的三大核心问题。
吉他五线谱联系 茉莉花
Beauty naked chat for a while, naked chat over the crematorium!
B title: razlika priority queue approach
Burp suite Chapter 6 how to use burp spider
2022-07-14 group 5 Gu Xiangquan's learning notes day07
matplotlib学习笔记
基础乐理 节奏联系题，很重要
【EndNote】文献模板编排语法详解
随机推荐
Random distribution learning notes
Dev gridcontrol captures key events
Rewriting and overloading
Strtus2历史漏洞复现
Let's talk about the three core issues of concurrent programming.
How WPS sets page headers page by page
Kotlin中room数据库的使用
2022-07-09 group 5 Gu Xiangquan's learning notes day02
On some concepts involved in journal papers compilation + journal query methods
99 multiplication table and inverted triangle 99 multiplication table
sed作业
Dev gridcontrol 捕获按键事件
BGP的基本配置
The difference between FileInputStream and bufferedinputstream
基础乐理 节奏联系题，很重要
BGP选路原则
Burp Suite-第五章 如何使用Burp Target
BGP -- Border Gateway Protocol
Web side 3D visualization engine hoops communicator reads 10g super large model test | digital twin Technology
2W word detailed data Lake: concept, characteristics, architecture and cases