首页以及搜索与登录功能预定页面和套餐页面服务和相册页面评价和联系我们页面,完善底部适配多端设备
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>旅游网</title>
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
</head>
<body>
<!– 头部 –>
<header>
<a href="#" class="logo"><span>J</span>acky</a>
<nav class="navbar">
<a href="#home">首页</a>
<a href="#book">预定</a>
<a href="#packages">套餐</a>
<a href="#services">服务</a>
<a href="#gallery">相册</a>
<a href="#review">评价</a>
<a href="#contact">联系我们</a>
</nav>
<!– 图标 –>
<div class="icons">
<i class="fas fa-search" id="search-btn"></i>
<i class="fas fa-user" id="login-btn"></i>
</div>
<!– 搜索框 –>
<form action="" class="search-bar-container">
<input type="search" id="search-bar" placeholder="search here…">
<label for="search-bar" class="fas fa-search"></label>
</form>
</header>
<!– 登录表单 –>
<div class="login-form-container">
<i class="fas fa-times" id="form-close"></i>
<form action="">
<h3>login</h3>
<input type="email" class="box" placeholder="enter your email">
<input type="password" class="box" placeholder="enter your password">
<input type="submit" value="login now" class="btn">
<input type="checkbox" id="remember">
<label for="remember">remember me</label>
<p>forget password? <a href="#">click here</a></p>
<p>don't have and account? <a href="#">register now</a></p>
</form>
</div>
<!– 首页视频banner区 –>
<section class="home" id="home">
<div class="content">
<h3>旅游是一种信仰</h3>
<p>和我们一起去远方,寻找诗和梦想</p>
<a href="#" class="btn">查看更多</a>
</div>
<div class="controls">
<span class="vid-btn active" data-src="images/vid-1.mp4"></span>
<span class="vid-btn" data-src="./images/vid-2.mp4"></span>
<span class="vid-btn" data-src="images/vid-3.mp4"></span>
<span class="vid-btn" data-src="images/vid-4.mp4"></span>
<span class="vid-btn" data-src="images/vid-5.mp4"></span>
</div>
<div class="video-container">
<video src="images/vid-1.mp4" id="video-slider" loop autoplay muted></video>
</div>
</section>
<script src="./script.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
</body>
</html>
*{
margin:0;
padding:0;
box-sizing: border-box;
text-transform: capitalize;
outline: none;
border:none;
text-decoration: none;
transition: all .2s linear;
}
/* 导航栏 */
header{
position: fixed;
top:0;
left: 0;
right:0;
background:#333;
z-index: 1000;
display: flex;
align-items: center;
justify-content: space-between;
padding:1rem 9%;
}
header .logo span{
color: #ffa500;
}
header .logo{
font-size: 1.5rem;
font-weight: bolder;
color:#fff;
text-transform: uppercase;
}
header .navbar a{
color:#fff;
font-size: 1rem;
font-weight: bold;
margin:0 .8rem;
}
header .navbar a:hover{
color:#ffa500;
}
header .icons i{
font-size: 1.2rem;
color:#fff;
cursor: pointer;
margin-right: 1rem;
}
header .icons i:hover{
color:#ffa500;
}
/* 搜索框 */
header .search-bar-container{
position: absolute;
top:-150%; left: 0; right:0;
padding: 0.5em 1rem;
background:#333;
border-top: .1rem solid rgba(255,255,255,.2);
display: flex;
align-items: center;
z-index: 1001;
}
header .search-bar-container.active{
top:100%;
}
header .search-bar-container #search-bar{
width:100%;
padding:.5rem;
text-transform: none;
color:#333;
font-size: 1rem;
}
header .search-bar-container label{
color:#fff;
cursor: pointer;
font-size: 1rem;
margin-left: 1rem;
}
header .search-bar-container label:hover{
color:#ffa500;
}
/* 登录表单 */
.login-form-container{
position: fixed;
top:-120%; left: 0;
z-index: 10000;
min-height: 100vh;
width:100%;
background:rgba(0,0,0,.7);
display: flex;
align-items: center;
justify-content: center;
}
.login-form-container.active{
top:0;
}
.login-form-container form{
margin:2rem;
padding:1.5rem 2rem;
border-radius: .5rem;
background:#fff;
width:30rem;
}
.login-form-container form h3{
font-size: 2rem;
color:#444;
text-transform: uppercase;
text-align: center;
padding:1rem 0;
}
.login-form-container form .box{
width:100%;
padding:1rem;
font-size: 1.5rem;
color:#333;
margin:.6rem 0;
border:.1rem solid rgba(0,0,0,.3);
text-transform: none;
}
.login-form-container form .box:focus{
border-color: #ffa500;
}
.login-form-container form #remember{
margin-top: 1.5rem;
}
.login-form-container form label{
font-size: 1.5rem;
}
.login-form-container form .btn{
display: block;
width:100%;
}
.login-form-container form p{
padding:.5rem 0;
font-size: 1.0rem;
color:#666;
}
.login-form-container form p a{
color:#ffa500;
}
.login-form-container form p a:hover{
color:#333;
text-decoration: underline;
}
.login-form-container #form-close{
position: absolute;
top:2rem; right:3rem;
font-size: 4rem;
color:#fff;
cursor: pointer;
}
.btn{
display: inline-block;
margin-top: 1rem;
background:#ffa500;
color:#fff;
padding:.8rem 3rem;
border:.2rem solid #ffa500;
cursor: pointer;
font-size: 1.5rem;
}
.btn:hover{
background:rgba(255, 165, 0,.2);
color:#ffa500;
}
/* 主页的视频播放区 */
.home{
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
position: relative;
z-index: 0;
}
.home .content{
text-align: center;
}
.home .content h3{
font-size: 2rem;
color:#fff;
text-transform: uppercase;
text-shadow: 0 .3rem .5rem rgba(0,0,0,.1);
}
.home .content p{
font-size: 2rem;
color:#fff;
padding:.5rem 0;
}
.home .video-container video{
position: absolute;
top:0; left: 0;
z-index: -1;
height: 100%;
width:100%;
object-fit: cover;
}
.home .controls{
padding:0.5rem;
border-radius: 4rem;
background:rgba(0,0,0,.7);
position: relative;
top:10rem;
}
.home .controls .vid-btn{
height:2rem;
width:2rem;
display: inline-block;
border-radius: 50%;
background:#fff;
cursor: pointer;
margin:0 .5rem;
}
.home .controls .vid-btn.active{
background:#ffa500;
}
let searchBtn = document.querySelector('#search-btn');
let searchBar = document.querySelector('.search-bar-container');
let formBtn = document.querySelector('#login-btn');
let loginForm = document.querySelector('.login-form-container');
let formClose = document.querySelector('#form-close');
let videoBtn = document.querySelectorAll('.vid-btn');
window.onscroll = () =>{
searchBtn.classList.remove('fa-times');
searchBar.classList.remove('active');
loginForm.classList.remove('active');
}
searchBtn.addEventListener('click', () =>{
searchBtn.classList.toggle('fa-times');
searchBar.classList.toggle('active');
});
formBtn.addEventListener('click', () =>{
loginForm.classList.add('active');
});
formClose.addEventListener('click', () =>{
loginForm.classList.remove('active');
});
videoBtn.forEach(btn =>{
btn.addEventListener('click', ()=>{
document.querySelector('.controls .active').classList.remove('active');
btn.classList.add('active');
let src = btn.getAttribute('data-src');
document.querySelector('#video-slider').src = src;
});
});
<!– 预订部分 –>
<section class="book" id="book">
<h1 class="heading">
<span>b</span>
<span>o</span>
<span>o</span>
<span>k</span>
<span class="space"></span>
<span>n</span>
<span>o</span>
<span>w</span>
</h1>
<div class="row">
<div class="image">
<img src="images/book-img.svg" alt="">
</div>
<form action="">
<div class="inputBox">
<h3>where to</h3>
<input type="text" placeholder="去哪里">
</div>
<div class="inputBox">
<h3>how many</h3>
<input type="number" placeholder="多少人用行">
</div>
<div class="inputBox">
<h3>多久到</h3>
<input type="date">
</div>
<div class="inputBox">
<h3>多久离开</h3>
<input type="date">
</div>
<input type="submit" class="btn" value="立即 预定">
</form>
</div>
</section>
<!– 套餐部分 –>
<section class="packages" id="packages">
<h1 class="heading">
<span>p</span>
<span>a</span>
<span>c</span>
<span>k</span>
<span>a</span>
<span>g</span>
<span>e</span>
<span>s</span>
</h1>
<div class="box-container">
<div class="box">
<img src="images/p-1.jpg" alt="">
<div class="content">
<h3> <i class="fas fa-map-marker-alt"></i> 成都 </h3>
<p>和我在成都的街头走一走。</p>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="far fa-star"></i>
</div>
<div class="price"> $90.00 <span>$120.00</span> </div>
<a href="#" class="btn">立即 预订</a>
</div>
</div>
<div class="box">
<img src="images/p-2.jpg" alt="">
<div class="content">
<h3> <i class="fas fa-map-marker-alt"></i> 上海 </h3>
<p>这里有你梦想中的迪士尼。</p>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="far fa-star"></i>
</div>
<div class="price"> $90.00 <span>$120.00</span> </div>
<a href="#" class="btn">立即 预订</a>
</div>
</div>
<div class="box">
<img src="images/p-3.jpg" alt="">
<div class="content">
<h3> <i class="fas fa-map-marker-alt"></i> 广州 </h3>
<p>两千多年沉淀,打磨出中国独树一帜的海阔天空之城。</p>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="far fa-star"></i>
</div>
<div class="price"> $90.00 <span>$120.00</span> </div>
<a href="#" class="btn">立即 预订</a>
</div>
</div>
<div class="box">
<img src="images/p-4.jpg" alt="">
<div class="content">
<h3> <i class="fas fa-map-marker-alt"></i> 深圳 </h3>
<p>有钱人的天堂.创业者向往的城市。</p>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="far fa-star"></i>
</div>
<div class="price"> $90.00 <span>$120.00</span> </div>
<a href="#" class="btn">立即 预订</a>
</div>
</div>
<div class="box">
<img src="images/p-5.jpg" alt="">
<div class="content">
<h3> <i class="fas fa-map-marker-alt"></i> 北京 </h3>
<p>北京你爱来不来。</p>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="far fa-star"></i>
</div>
<div class="price"> $90.00 <span>$120.00</span> </div>
<a href="#" class="btn">立即 预订</a>
</div>
</div>
<div class="box">
<img src="images/p-6.jpg" alt="">
<div class="content">
<h3> <i class="fas fa-map-marker-alt"></i> 武汉 </h3>
<p style="font-size: 0.75rem;">武汉的樱花有如我和你初见时的阳光只是多了一些忧愁。</p>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="far fa-star"></i>
</div>
<div class="price"> $90.00 <span>$120.00</span> </div>
<a href="#" class="btn">立即 预订</a>
</div>
</div>
</div>
</section>
<script src="./script.js"></script>
</body>
</html
<!– 服务部分 –>
<section class="services" id="services">
<h1 class="heading">
<span>s</span>
<span>e</span>
<span>r</span>
<span>v</span>
<span>i</span>
<span>c</span>
<span>e</span>
<span>s</span>
</h1>
<div class="box-container">
<div class="box">
<i class="fas fa-hotel"></i>
<h3>affordable hotels</h3>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
</div>
<div class="box">
<i class="fas fa-utensils"></i>
<h3>food and drinks</h3>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
</div>
<div class="box">
<i class="fas fa-bullhorn"></i>
<h3>safty guide</h3>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
</div>
<div class="box">
<i class="fas fa-globe-asia"></i>
<h3>around the world</h3>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
</div>
<div class="box">
<i class="fas fa-plane"></i>
<h3>fastest travel</h3>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
</div>
<div class="box">
<i class="fas fa-hiking"></i>
<h3>adventures</h3>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
</div>
</div>
</section>
<!– 相册部分 –>
<section class="gallery" id="gallery">
<h1 class="heading">
<span>g</span>
<span>a</span>
<span>l</span>
<span>l</span>
<span>e</span>
<span>r</span>
<span>y</span>
</h1>
<div class="box-container">
<div class="box">
<img src="images/g-1.jpg" alt="">
<div class="content">
<h3>美丽景色</h3>
<p>这是你梦中向往的地方</p>
<a href="#" class="btn">查看 更多</a>
</div>
</div>
<div class="box">
<img src="images/g-2.jpg" alt="">
<div class="content">
<h3>美丽景色</h3>
<p>这是你梦中向往的地方</p>
<a href="#" class="btn">查看 更多</a>
</div>
</div>
<div class="box">
<img src="images/g-3.jpg" alt="">
<div class="content">
<h3>美丽景色</h3>
<p>这是你梦中向往的地方</p>
<a href="#" class="btn">查看 更多</a>
</div>
</div>
<div class="box">
<img src="images/g-4.jpg" alt="">
<div class="content">
<h3>美丽景色</h3>
<p>这是你梦中向往的地方</p>
<a href="#" class="btn">查看 更多</a>
</div>
</div>
<div class="box">
<img src="images/g-5.jpg" alt="">
<div class="content">
<h3>美丽景色</h3>
<p>这是你梦中向往的地方</p>
<a href="#" class="btn">查看 更多</a>
</div>
</div>
<div class="box">
<img src="images/g-6.jpg" alt="">
<div class="content">
<h3>美丽景色</h3>
<p>这是你梦中向往的地方</p>
<a href="#" class="btn">查看 更多</a>
</div>
</div>
<div class="box">
<img src="images/g-7.jpg" alt="">
<div class="content">
<h3>美丽景色</h3>
<p>这是你梦中向往的地方</p>
<a href="#" class="btn">查看 更多</a>
</div>
</div>
<div class="box">
<img src="images/g-8.jpg" alt="">
<div class="content">
<h3>美丽景色</h3>
<p>这是你梦中向往的地方</p>
<a href="#" class="btn">查看 更多</a>
</div>
</div>
<div class="box">
<img src="images/g-9.jpg" alt="">
<div class="content">
<h3>美丽景色</h3>
<p>这是你梦中向往的地方</p>
<a href="#" class="btn">查看 更多</a>
</div>
</div>
</div>
</section>
css
/* 服务部分 */
.services .box-container{
display: flex;
flex-wrap: wrap;
gap:1rem;
}
.services .box-container .box{
flex: 1 1 20rem;
border-radius: .5rem;
padding: 1rem;
text-align: center;
}
.services .box-container .box i{
padding:0.5rem;
font-size: 2.5rem;
color:#ffa500;
}
.services .box-container .box h3{
font-size: 1.5rem;
color:#333;
}
.services .box-container .box p{
font-size: 1rem;
color:#666;
padding:0.5rem 0;
}
.services .box-container .box:hover{
box-shadow: 0 0.5rem 1rem rgba(0,0,0,.1);
}
/* 相册部分 */
.gallery .box-container{
display: flex;
flex-wrap: wrap;
gap:1rem;
}
.gallery .box-container .box{
overflow: hidden;
box-shadow: 0 1rem 2rem rgba(0,0,0,.1);
border:1rem solid #fff;
border-radius: .5rem;
flex:1 1 20rem;
height: 15rem;
position: relative;
}
.gallery .box-container .box img{
height: 100%;
width:100%;
object-fit: cover;
}
.gallery .box-container .box .content{
position: absolute;
top:-100%; left:0;
height: 100%;
width:100%;
text-align: center;
background:rgba(0,0,0,.7);
padding:1rem;
padding-top: 2.5rem;
}
.gallery .box-container .box:hover .content{
top:0;
}
.gallery .box-container .box .content h3{
font-size: 1.5rem;
color:#ffa500;
}
.gallery .box-container .box .content p{
font-size: 1rem;
color:#eee;
padding:.5rem 0;
}
<!– 评价部分 –>
<section class="review" id="review">
<h1 class="heading">
<span>r</span>
<span>e</span>
<span>v</span>
<span>i</span>
<span>e</span>
<span>w</span>
</h1>
<div class="swiper-container review-slider">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="box">
<img src="images/pic1.png" alt="">
<h3>小黑</h3>
<p>xxxxxxxxxx</p>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="far fa-star"></i>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="box">
<img src="images/pic2.png" alt="">
<h3>小白</h3>
<p>xxxxxxxxxxxx</p>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="far fa-star"></i>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="box">
<img src="images/pic3.png" alt="">
<h3>小红</h3>
<p>xxxxxxxxxxxx</p>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="far fa-star"></i>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="box">
<img src="images/pic4.png" alt="">
<h3>小黄</h3>
<p>xxxxxxxxxxxxx</p>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="far fa-star"></i>
</div>
</div>
</div>
</div>
</div>
</section>
<!– 联系我们 –>
<section class="contact" id="contact">
<h1 class="heading">
<span>c</span>
<span>o</span>
<span>n</span>
<span>t</span>
<span>a</span>
<span>c</span>
<span>t</span>
</h1>
<div class="row">
<div class="image">
<img src="images/contact-img.svg" alt="">
</div>
<form action="">
<div class="inputBox">
<input type="text" placeholder="您的姓名">
<input type="email" placeholder="您的邮箱">
</div>
<div class="inputBox">
<input type="number" placeholder="您的电话">
<input type="text" placeholder="反馈主题">
</div>
<textarea placeholder="您反馈的内容" name="" id="" cols="30" rows="10"></textarea>
<input type="submit" class="btn" value="发送给我们">
</form>
</div>
</section>
<!– 品牌赞助 –>
<section class="brand-container">
<div class="swiper-container brand-slider">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="images/1.jpg" alt=""></div>
<div class="swiper-slide"><img src="images/2.jpg" alt=""></div>
<div class="swiper-slide"><img src="images/3.jpg" alt=""></div>
<div class="swiper-slide"><img src="images/4.jpg" alt=""></div>
<div class="swiper-slide"><img src="images/5.jpg" alt=""></div>
<div class="swiper-slide"><img src="images/6.jpg" alt=""></div>
</div>
</div>
</section>
<!– 底部 –>
<section class="footer">
<div class="box-container">
<div class="box">
<h3>关于我们</h3>
<p>xxxxxx</p>
</div>
<div class="box">
<h3>分支机构位置</h3>
<a href="#">成都</a>
<a href="#">北京</a>
<a href="#">上海</a>
<a href="#">深圳</a>
</div>
<div class="box">
<h3>快速链接</h3>
<a href="#home">home</a>
<a href="#book">book</a>
<a href="#packages">packages</a>
<a href="#services">services</a>
<a href="#gallery">gallery</a>
<a href="#review">review</a>
<a href="#contact">contact</a>
</div>
<div class="box">
<h3>关于我们</h3>
<a href="#">weibo</a>
<a href="#">qq</a>
<a href="#">twitter</a>
<a href="#">wechat</a>
</div>
</div>
<h1 class="credit"> created by <span> JackySei </span> | all rights reserved! </h1>
</section>
/* 联系我们 */
.contact .row{
display: flex;
flex-wrap: wrap;
gap:1rem;
align-items: center;
}
.contact .row .image{
flex:1 1 25rem;
}
.contact .row .image img{
width:100%;
}
.contact .row form{
flex:1 1 25rem;
padding:1rem;
box-shadow: 0 1rem 2rem rgba(0,0,0,.1);
border-radius: .5rem;
}
.contact .row form .inputBox{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.contact .row form .inputBox input, .contact .row form textarea{
width:49%;
margin:1rem 0;
padding:1rem;
font-size: 1rem;
font-weight: bold;
color:#333;
background:#f7f7f7;
text-transform: none;
}
.contact .row form textarea{
height: 8rem;
resize: none;
width:100%;
}
/* 评价部分 */
.review .review-slider{
padding-bottom: 1rem;
}
.review .box{
padding:1rem;
text-align: center;
box-shadow: 0 1rem 2rem rgba(0,0,0,.1);
border-radius: .5rem;
}
.review .box img{
height:7rem;
width:7rem;
border-radius: 50%;
object-fit: cover;
margin-bottom: 1rem;
}
.review .box h3{
color:#333;
font-size: 1.5rem;
}
.review .box p{
color:#666;
font-size: 1rem;
padding:1rem 0;
}
.review .box .stars i{
color:#ffa500;
font-size: 1.5rem;
}
/* 品牌 */
.brand-container{
text-align: center;
}
/* 底部 */
.footer{
background:#333;
}
.footer .box-container{
display: flex;
flex-wrap: wrap;
gap:1rem;
}
.footer .box-container .box{
padding:1rem 0;
flex:1 1 12rem;
}
.footer .box-container .box h3{
font-size: 1.5rem;
padding:.5rem 0;
color:#fff;
}
.footer .box-container .box p{
font-size: 1.0rem;
padding:.5rem 0;
color:#eee;
}
.footer .box-container .box a{
display: block;
font-size: 1rem;
padding:.5rem 0;
color:#eee;
}
.footer .box-container .box a:hover{
color:#ffa500;
text-decoration: underline;
}
.footer .credit{
text-align: center;
padding:1rem 0.5rem;
margin-top: 0.5rem;
font-size: 1rem;
font-weight: normal;
color:#fff;
border-top: .1rem solid rgba(255,255,255,.2);
}
.footer .credit span{
color:#ffa500;
}
var swiper1 = new Swiper(".review-slider", {
spaceBetween: 10,
loop:true,
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
breakpoints: {
640: {
slidesPerView: 1,
},
768: {
slidesPerView: 2,
},
1024: {
slidesPerView: 3,
},
},
});
var swiper2 = new Swiper(".brand-slider", {
spaceBetween: 20,
loop:true,
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
breakpoints: {
450: {
slidesPerView: 2,
},
768: {
slidesPerView: 3,
},
991: {
slidesPerView: 4,
},
1200: {
slidesPerView: 5,
},
},
});
2021.6.8
适配多端设备
尽管大多数情况已经用了flex布局,但有些地方还是不能够适配多端设备,比如说标题,又或者是小标题在调整一定比例后还是会出现不兼容的情况。
然后做了如下修改基本适配了大多数情况
在header中添加menu-bar
html
<div id="menu-bar" class="fas fa-bars"></div>
1
css
/* 设配多端 */
#menu-bar{
color:#fff;
border:.1rem solid #fff;
border-radius: .5rem;
font-size: 1.5rem;
padding:.5rem 1rem;
cursor: pointer;
display: none;
}
@media (max-width:1200px){
html{
font-size: 80%;
}
}
@media (max-width:768px){
#menu-bar{
display: initial;
}
header .navbar{
position: absolute;
top: -1000%; right:0; left: 0;
background: #333;
border-top: .1rem solid rgba(255,255,255,.2);
padding:1rem 1.5rem;
}
header .navbar.active{
top: 100%;
}
header .navbar a{
display: block;
border-radius: .5rem;
padding:1rem;
margin:1rem 0;
background:#222;
}
}
@media (max-width:450px){
html{
font-size: 60%;
}
.contact .row form .inputBox input{
width:100%;
}
.footer .box-container .box{
flex: 1 1 18rem;
padding: 1rem 0;
text-align: center;
}
}
js
let menu = document.querySelector('#menu-bar');
menu.addEventListener('click', () =>{
menu.classList.toggle('fa-times');
navbar.classList.toggle('active');
});
最终效果
我组建了一个前端自学团,学习前端技术。在团里,会严格监督大家每天学习打卡,给大家分享学习资料,给大家匹配学习伙伴,定期组织大家进行项目实战。想要加入一起学习的小伙伴可以私信我或是给我留言
作者:JackySei
原文链接:HTML+CSS+JavaScript实现旅游网站官网(已完成)_JackySei的博客-CSDN博客
你手上的小黑本能帶你去全球哪些地方呢?全球第5!可免簽187個國傢和地區。▼今年第三季度,亨利護照指數(Henley Passport In...
随着工艺验证进入QbD时代,FDA的新工艺验证指南将工艺验证分为三个阶段,今天我们要讲述的工艺性能确认(PPQ)是阶段2(工艺 ...