HTML5期末大作业：HTML+CSS+JavaScript+BootStrap 简约的旅游图文相册博客HTML模板

常见网页设计作业题材有 个人、美食、公司、学校、旅游、电商、宠物、电器、茶叶、家居、酒店、舞蹈、动漫、明星、服装、体育、化妆品、物流、环保、书籍、婚纱、军事、游戏、节日、戒烟、电影、摄影、文化、家乡、鲜花、礼品、汽车、其他 等网页设计题目, 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(源文件)，基本期末作业所需的知识点全覆盖。

文章目录

HTML5期末大作业：旅游网站设计——简约的旅游图文相册博客HTML模板(6页) HTML+CSS+JavaScript+BootStrap 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源码
作品介绍
一、作品展示
二、文件目录
三、代码实现
四、学习资料
五、完整源码
六、更多源码

二、文件目录

三、代码实现

<!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模板网站

# 五、

HTML5期末大作业：HTML+CSS+JavaScript+BootStrap 简约的旅游图文相册博客HTML模板相关推荐

HTML网页制作代码——简约的旅游图文相册博客HTML模板(12页)HTML+CSS+JavaScript 静态HTML旅行主题网页作业
HTML5期末大作业：个人信息展示网站设计——清新春暖花开个人博客网站(6页) HTML+CSS+JavaScript...
常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. 服装. 体育. 化妆品. 物流. 环保. 书籍. 婚纱. 军 ...
web前端期末大作业 html+css+javascript 全球私人定制旅游网页设计实例(6个页面)
web前端期末大作业 html+css+javascript 全球私人定制旅游网页设计实例(6个页面) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手? ...
HTML5期末大作业 HTML+CSS+JavaScript 简单的网页设计
常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. 服装. 体育. 化妆品. 物流. 环保. 书籍. 婚纱. 游 ...
HTML5期末大作业——HTML+CSS+JavaScript平遥古城旅游景点介绍(6页)
web前端期末大作业 html+css+javascript 酒庄网页设计实例(5个页面)~学生网页设计制作...
web前端期末大作业 html+css+javascript 酒庄网页设计实例(5个页面)~学生网页设计制作临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从 ...
HTML5期末大作业：漫画网站设计——海贼王我当定了(6页) web前端期末大作业 html+css+javascript网页设计实例企业网站制作计算机毕设网页设计源码
HTML5期末大作业:漫画网站设计--海贼王我当定了(6页) web前端期末大作业 html+css+javascript网页设计实例企业网站制作计算机毕设网页设计源码常见网页设计作业题材有个 ...
HTML5期末大作业：旅行网站设计——开心网旅游(11页) web前端期末大作业 html+css+javascript网页设计实例
HTML5期末大作业:旅行网站设计--开心网旅游(11页) web前端期末大作业 html+css+javascript网页设计实例常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电 ...
HTML5期末大作业：计划出行网站设计——洛阳城旅游(34页) HTML+CSS+JavaScript dreamweaver作业静态HTML网页设计模板出游
HTML5期末大作业:计划出行网站设计--洛阳城旅游(34页) HTML+CSS+JavaScript dreamweaver作业静态HTML网页设计模板出游常见网页设计作业题材有个人. 美食. ...

HTML5期末大作业：HTML+CSS+JavaScript+BootStrap 简约的旅游图文相册博客HTML模板

文章目录

HTML5期末大作业：HTML+CSS+JavaScript+BootStrap 简约的旅游图文相册博客HTML模板相关推荐

最新文章

热门文章