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

心得技巧

html5 HTML/Xhtml CSS XML/XSLT Dreamweaver教程 Frontpage教程心得技巧

上一篇: “程序员真的干到35岁就干不动了... 下一篇:LAMP环境搭建

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

发布时间：2022-07-01 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了HTML5期末大作业：HTML+CSS+JavaScript+BootStrap 简约的旅游图文相册博客HTML模板，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

常见网页设计作业题材有 个人、美食、公司、学校、旅游、电商、宠物、电器、茶叶、家居、酒店、舞蹈、动漫、明星、服装、体育、化妆品、物流、环保、书籍、婚纱、军事、游戏、节日、戒烟、电影、摄影、文化、家乡、鲜花、礼品、汽车、其他 等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!

作品介绍

1.网页作品简介 F1a;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课程设计网页规划与设计计算机毕设网页设计源码
作品介绍
一、作品展示
二、文件目录
三、代码实现
四、学习资料
五、完整源码
六、更多源码

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

二、文件目录

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

三、代码实现

<!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&amp;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模板

【百度网盘-源码下载地址】

链接：https://pan.baidu.com/s/1UDFzRE6mEKC5D1xALTMbYw

提取码：8888

HTML5期末考核大作业源码* 包含 个人、美食、公司、学校、旅游、电商、宠物、电器、茶叶、家居、酒店、舞蹈、动漫、明星、服装、体育、化妆品、物流、环保、书籍、婚纱、军事、游戏、节日、戒烟、电影、摄影、文化、家乡、鲜花、礼品、汽车、其他 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!

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