常见网页设计作业题材有 ​​个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他​​ 等网页设计题目, ​​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/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模板