HTML5期末大作业：旅游网站设计——简约的旅游图文相册博客HTML模板(6页) HTML+CSS+JavaScript+BootStrap 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码
常见网页设计作业题材有
个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他等网页设计题目,A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!
作品介绍
1.网页作品简介 ：HTML期末大学生网页设计作业 A+水平 ,喜欢的可以下载，文章页支持手机PC响应式布局。一款简约轻量级和多用途的图文博客HTML模板。它是专为使用最新BootStrap5和SASS功能的任何类型的博客、文章或旅游网站创建的。使用和定制我们的网站是容易和灵活的。可用于：时尚博客，生活方式，杂志，现代，新闻，个人，旅游类网站。
2.网页作品编辑：作品下载后可使用任意HTML编辑软件（如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++ 等任意HTML软件编辑修改网页）。
3.网页作品技术：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频、 音频元素 、Flash，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。
文章目录
一、作品展示
二、文件目录
三、代码实现
<!DOCTYPE html>
<html lang="zxx">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Lawel - Responsive Blog Template</title>
<!--fivicon icon-->
<link rel="icon" href="assets/img/fevicon.png">
<link rel="stylesheet" href="assets/css/responsive.css">
<!--Google Fonts-->
<link href="https://fonts.googleapis.com/css2?family=Khula:wght@400;600&family=Lustria&family=Poppins:wght@400;500;600&display=swap" rel="stylesheet">
</head>
<body class='sc5'>
<!-- preloader area start -->
<div class="preloader" id="preloader">
<div class="preloader-inner">
<div id="wave1">
</div>
<div class="spinner">
<div class="dot1"></div>
<div class="dot2"></div>
</div>
</div>
</div>
<!-- preloader area end -->
<div class="body-overlay" id="body-overlay"></div>
<!-- search popup area start -->
<div class="search-popup" id="search-popup">
<form action="home-1.html" class="search-form">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search.....">
</div>
<button type="submit" class="submit-btn"><i class="fa fa-search"></i></button>
</form>
</div>
<!-- //. search Popup -->
</li>
<li>
<a href="home-4.html">FEATURES</a>
</li>
<li class="menu-item-has-children">
<a href="#">PAGES</a>
<ul class="sub-menu">
<li><a href="single.html">Blog</a></li>
<li><a href="single-blog-2.html">Blog 02</a></li>
<li><a href="single-blog-3.html">Blog 03</a></li>
<li><a href="single-blog-4.html">Blog 04</a></li>
<li><a href="single-blog-full.html">Blog 05</a></li>
<li><a href="gallery-blog.html">Gallery Blog</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</li>
<li>
<a href="home-3.html">LIFESTYLE</a>
</li>
<li>
<a href="about.html">ABOUT</a>
</li>
<li>
<a href="contact.html">CONTACT</a>
</li>
</ul>
</div>
<div class="nav-right-part text-end nav-right-part-desktop">
<ul>
<li><a href="#"><i class="fab fa-instagram"></i></a></li>
<li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="#"><i class="fab fa-twitter"></i></a></li>
<li><a class="search" href="#"><i class="fa fa-search"></i></a></li>
</ul>
</div>
</div>
</nav>
</header>
<!-- navbar end -->
<div class="banner-logo-area">
<img src="assets/img/logo.png" alt="img">
</div>
<!-- Banner Area Start-->
<section class="banner-area">
<div class="banner-slider owl-carousel">
<div class="item" style="background: url(assets/img/banner/slider-1.jpg)">
<div class="banner-inner">
<h4>Fashion</h4>
<h2>Dining Room Reveal</h2>
<a href="single.html" class="btn readmore-button">Read more</a>
</div>
</div>
<div class="item" style="background: url(assets/img/banner/slider-2.jpg)">
<div class="banner-inner">
<h4>Fashion</h4>
<h2>Dining Room Reveal</h2>
<a href="single.html" class="btn readmore-button">Read more</a>
</div>
</div>
<div class="item" style="background: url(assets/img/banner/slider-1.jpg)">
<div class="banner-inner">
<h4>Fashion</h4>
<h2>Dining Room Reveal</h2>
<a href="single.html" class="btn readmore-button">Read more</a>
</div>
</div>
</div>
</section>
<!-- Banner Area End -->
<!-- featured Area Start-->
<div class="featured-area pd-top-115">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-12">
<div class="section-title">
<h6 class="title">Fashion</h6>
<a href="home-4.html">See All in Fashion</a>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="featured-item pd-bottom-30">
<div class="thumb">
<img src="assets/img/featured/1.jpg" alt="img">
</div>
<div class="featured-item-meta">
<h2><a href="single-blog-3.html">Jeans Like Supermo</a></h2>
<ul>
<li><a href="#">Share</a></li>
<li><a href="#">2 Comments</a></li>
<li>May 8, 2017</li>
</ul>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="featured-item pd-bottom-30">
<div class="thumb">
<img src="assets/img/featured/2.jpg" alt="img">
</div>
<div class="featured-item-meta">
<h2><a href="single-blog-3.html"> The Straw Handbags</a></h2>
<ul>
<li><a href="#">Share</a></li>
<li><a href="#">2 Comments</a></li>
<li>May 8, 2017</li>
</ul>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="featured-item pd-bottom-30">
<div class="thumb">
<img src="assets/img/featured/3.jpg" alt="img">
</div>
<div class="featured-item-meta">
<h2><a href="single-blog-3.html">Wear Lowaist Pants </a></h2>
<ul>
<li><a href="#">Share</a></li>
<li><a href="#">2 Comments</a></li>
<li>May 8, 2017</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- featured Area End -->
<!-- featured Area Start-->
<div class="featured-area pd-top-85">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-12">
<div class="section-title">
<h6 class="title">Travel</h6>
<a href="home-2.html">See All in Travel</a>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="featured-item pd-bottom-30">
<div class="thumb">
<img src="assets/img/featured/4.jpg" alt="img">
</div>
<div class="featured-item-meta">
<h2><a href="single-blog-3.html">Greetings From Berlin</a></h2>
<ul>
<li><a href="#">Share</a></li>
<li><a href="#">2 Comments</a></li>
<li>May 8, 2017</li>
</ul>
</div>
</div>
<div class="post-content p-0">
<h4><a href="single.html">Three Favorite Swimwear</a></h4>
<div class="post-meta">
<ul>
<li>By</li>
<li><a href="#">Alison morgan</a></li>
<li>May 8, 2017</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="thumb pd-bottom-45">
<img class="w-100" src="assets/img/post/4.jpg" alt="img">
</div>
</div>
<div class="col-lg-6">
<div class="blog-post-item-wrap">
<div class="post-content">
<h6>TRAVEL</h6>
<h4><a href="single.html">Arrival In Florence</a></h4>
<p>Nam rutrum suscipit orci ut ultrices. Sed arcu orci, curs quis augue porta feugiat posuere nisi. Fusce fringilla am etiam sit ameeque vitae elit condimentum auctor...</p>
<div class="post-meta">
<ul>
<li>By</li>
<li><a href="#">Alison morgan</a></li>
<li>May 8, 2017</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="thumb pd-bottom-45">
<img class="w-100" src="assets/img/post/5.jpg" alt="img">
</div>
</div>
<div class="col-lg-6">
<div class="blog-post-item-wrap">
<div class="post-content">
<h6>FOOD</h6>
<h4><a href="single.html">Apricot Vanilla Cashew</a></h4>
<p>Nam rutrum suscipit orci ut ultrices. Sed arcu orci, curs quis augue porta feugiat posuere nisi. Fusce fringilla am etiam sit ameeque vitae elit condimentum auctor...</p>
<div class="post-meta">
<ul>
<li>By</li>
<li><a href="#">Alison morgan</a></li>
<li>May 8, 2017</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-lg-12">
<div class="pagination-area">
<a href="home-2.html">Older post</a>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4">
<div class="sidebar-area text-center">
<div class="widget widget_author_bio p-0 border-0">
<div class="thumb">
<img src="assets/img/widget/bio.jpg" alt="img">
</div>
<div class="bio-data">
<h4>CEO</h4>
<h2>Michel</h2>
</div>
</div>
<div class="widget widget-subscribe-form">
<h2 class="widget-title">Subscribe</h2>
<p>Get Lawel Straight Your Inbox.</p>
<div class="single-input-wrap">
<input type="email" placeholder="Enter email">
</div>
</div>
<div class="widget author-insta-bio p-0 border-0">
<div class="thumb">
<img src="assets/img/widget/insta_widget.jpg" alt="img">
</div>
<div class="insta-bio-data">
<h4><a href="#"><i class="fab fa-instagram"></i></a></h4>
<h2>Instagram</h2>
<a href="#" class="insta-link">@lawelblog</a>
</div>
</div>
<div class="widget social-widget">
<h2 class="widget-title">Follow me</h2>
<ul class="social-area">
<li><a href="#"><i class="fab fa-instagram"></i></a></li>
<li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="#"><i class="fab fa-twitter"></i></a></li>
<li><a href="#"><i class="fab fa-linkedin-in"></i></a></li>
</ul>
</div>
<div class="widget ads-widget p-0 border-0">
<div class="thumb">
<a href=""><img src="assets/img/widget/ads.jpg" alt="img"></a>
</div>
</div>
<div class="widget category-widget">
<h2 class="widget-title">Categories</h2>
<div class="cat-name-list">
<ul>
<li><a href="#">Fashion</a></li>
<li><a href="#">Travel</a></li>
<li><a href="#">Health</a></li>
<li><a href="#">Food</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- latest post Area End -->
<!-- instagram Area Start-->
<div class="instagram-area">
<div class="instagram-slider owl-carousel">
<div class="item">
<a href="#">
<img src="assets/img/instagram/1.jpg" alt="img">
</a>
</div>
<div class="item">
<a href="#">
<img src="assets/img/instagram/2.jpg" alt="img">
</a>
</div>
<div class="item">
<a href="#">
<img src="assets/img/instagram/3.jpg" alt="img">
</a>
</div>
<div class="item">
<a href="#">
<img src="assets/img/instagram/4.jpg" alt="img">
</a>
</div>
<div class="item">
<a href="#">
<img src="assets/img/instagram/5.jpg" alt="img">
</a>
</div>
<div class="item">
<a href="#">
<img src="assets/img/instagram/6.jpg" alt="img">
</a>
</div>
</div>
</div>
<!-- instagram Area End -->
<!-- footer area start -->
<footer class="footer-area text-center">
<div class="footer-inner">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-4">
<div class="footer-widget widget">
<h4 class="widget-title">Follow me</h4>
<ul class="social-area">
<li><a href="#"><i class="fab fa-instagram"></i></a></li>
<li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="#"><i class="fab fa-twitter"></i></a></li>
<li><a href="#"><i class="fab fa-linkedin-in"></i></a></li>
</ul>
</div>
</div>
<div class="col-lg-4">
<div class="footer-widget widget">
<div class="footer-logo d-inline-block">
<img src="assets/img/logo-2.png" alt="img">
</div>
<p>Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non mauris vitae erat consequat auctor eu in elit. Class aptent taciti disse in orci enim.</p>
<form>
<div class="single-input-wrap mb-0">
<input type="email" placeholder="Enter Email">
</div>
</form>
</div>
</div>
<div class="col-lg-4">
<div class="footer-widget widget widget_link">
<h4 class="widget-title">Popular tags</h4>
<ul>
<li><a href="home-3.html">#TRAVEL</a></li>
<li><a href="home-3.html">#LIFE</a></li>
<li><a href="home-3.html">#LAKE</a></li>
<li><a href="home-3.html">#VLOGOS</a></li>
<li><a href="home-3.html">#ALTEGO</a></li>
<li><a href="home-3.html">#MONACO</a></li>
<li><a href="home-3.html">#SELECTED</a></li>
<li><a href="home-3.html">#HELLO</a></li>
<li><a href="home-3.html">#ITSON</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</footer>
<!-- footer area end -->
<!-- back-to-top end -->
<div class="back-to-top">
<span class="back-top"><i class="fas fa-angle-double-up"></i></span>
</div>
<script src="assets/js/slick-slider.min.js"></script>
<script src="assets/js/wow.min.js"></script>
<!-- main js -->
<script src="assets/js/main.js"></script>
</body>
</html>
四、学习资料
web前端 零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)
适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站
五、完整源码
【百度网盘-源码下载地址】
链接：https://pan.baidu.com/s/1UdFzRE6mEKC5D1xALTMbYw
提取码：8888
六、更多源码
HTML5期末考核大作业源码* 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!
4804
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
