100字范文 > html5网页制作代码大学生网页制作作业代码 (旅游网站官网滚动模板)

html5网页制作代码大学生网页制作作业代码 (旅游网站官网滚动模板)

时间：2023-11-08 02:25:29

🌩️ 精彩专栏推荐👇🏻👇🏻👇🏻
💂 作者主页: 【进入主页—🚀获取更多源码】
🎓 web前端期末大作业：【📚HTML5网页期末作业 (1000套) 】
🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】

📂文章目录

二、📚网站介绍三、🔗网站效果▶️1.视频演示🧩 2.图片演示四、💒 网站代码🧱HTML结构代码🏠CSS样式代码五、🎁更多源码

二、📚网站介绍

📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

📓网站程序方面：计划采用最新的网页编程语言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="/swiper/swiper-bundle.min.css" /><link rel="stylesheet" href="/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="/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;}}