🌩️ 精彩专栏推荐👇🏻👇🏻👇🏻
💂 作者主页: 【进入主页—🚀获取更多源码】
🎓 web前端期末大作业: 【📚HTML5网页期末作业 (1000套) 】
🧡 程序员有趣的告白方式:【💌HTML七夕情人节表白网页制作 (110套) 】
二、📚网站介绍
📔网站布局方面:计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。
📓网站程序方面:计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器,已达到打开后就能即时看到网站的效果。
📘网站素材方面:计划收集各大平台好看的图片素材,并精挑细选适合网页风格的图片,然后使用PS做出适合网页尺寸的图片。
📒网站文件方面:网站系统文件种类包含:html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件;
📙网页编辑方面:网页作品代码简单,可使用任意HTML编辑软件(如:Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++
等任意html编辑软件进行运行及修改编辑等操作)。
其中:
(1)📜html文件包含:其中index.html是首页、其他html为二级页面;
(2)📑 css文件包含:css全部页面样式,文字滚动, 图片放大等;
(3)📄 js文件包含:js实现动态轮播特效, 表单提交, 点击事件等等(个别网页中运用到js代码)。
三、🔗网站效果
▶️1.视频演示
E02 旅游网站官网-滚动模板
🧩 2.图片演示
四、💒 网站代码
🧱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://unpkg.com/swiper/swiper-bundle.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
</head>
<body>
<!-- 头部 -->
<header>
<div id="menu-bar" class="fas fa-bars"></div>
<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>
<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>
<!-- 服务部分 -->
<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">
<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>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script src="./script.js"></script>
</body>
</html>
🏠CSS样式代码
*{
margin:0;
padding:0;
box-sizing: border-box;
text-transform: capitalize;
outline: none;
border:none;
text-decoration: none;
transition: all .2s linear;
scroll-behavior: smooth;
}
/* 导航栏 */
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 5%;
}
header .logo span{
color: #ffa500;
}
header .logo{
font-size: 1.5rem;
font-weight: bolder;
color:#fff;
text-transform: uppercase;
}
.packages .box-container .box{
flex:1 1 25rem;
border-radius: .5rem;
box-shadow: 0 1rem 2rem rgba(0,0,0,.1);
}
.packages .box-container .box img{
height: 15rem;
width:100%;
background-size: contain;
}
.packages .box-container .box .content{
padding:0.5rem;
}
.packages .box-container .box .content h3{
font-size:2rem;
color:#333;
}
.packages .box-container .box .content h3 i{
color:#ffa500;
}
.packages .box-container .box .content p{
font-size:1rem;
color:#666;
padding:0.5rem 0;
}
.contact .row form .inputBox input{
width:100%;
}
.footer .box-container .box{
flex: 1 1 18rem;
padding: 1rem 0;
text-align: center;
}
}
五、🎁更多源码
1.如果我的博客对你有帮助 请 “👍点赞” “✍️评论” “💙收藏”
一键三连哦!
2.💗【👇🏻👇🏻👇🏻🉑关注我| 获取更多源码】
带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、等!
📣以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻