HTML+CSS+JavaScript实现旅游网站官网（已完成）

xiaolong www.icpchaxun.com (4) 3天前

首页以及搜索与登录功能预定页面和套餐页面服务和相册页面评价和联系我们页面，完善底部适配多端设备

首页

html

<!DOCTYPE html>

<head>

</head>

<body>

<!– 头部 –>

</nav>

<!– 图标 –>

</div>

<!– 搜索框 –>

</form>

</header>

<!– 登录表单 –>

<h3>login</h3>

<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区 –>

<h3>旅游是一种信仰</h3>

<p>和我们一起去远方,寻找诗和梦想</p>

</div>

</div>

</div>

</section>

</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;

});

新增预定页面和套餐页面

<!– 预订部分 –>

</h1>

</div>

<h3>where to</h3>

</div>

</div>

</div>

</div>

</form>

</div>

</section>

<!– 套餐部分 –>

</h1>

<p>和我在成都的街头走一走。</p>

</div>

</div>

<p>这里有你梦想中的迪士尼。</p>

</div>

</div>

<p>两千多年沉淀，打磨出中国独树一帜的海阔天空之城。</p>

</div>

</div>

<p>有钱人的天堂.创业者向往的城市。</p>

</div>

</div>

<p>北京你爱来不来。</p>

</div>

</div>

<p style="font-size: 0.75rem;">武汉的樱花有如我和你初见时的阳光只是多了一些忧愁。</p>

</div>

</div>

</section>

</body>

</html

<!– 服务部分 –>

</h1>

<h3>affordable hotels</h3>