HTML5+CSS大作业——个人旅游图片博客(7页)
常见网页设计作业题材有
个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他等网页设计题目,A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!
文章目录
- HTML5+CSS大作业——个人旅游图片博客(7页)
- 一、作品展示
- 二、文件目录
- 三、代码实现
- 四、获取更多源码
一、作品展示
二、文件目录
三、代码实现
<!DOCTYPE html>
<html lang="zxx">
<head>
<!-- Meta Tags -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<meta name="description" content="Multipages HTML5 Template">
<meta name="author" content="">
<!-- Page Title -->
<title>Multipages HTML5 Template</title>
<!-- Favicon and touch Icons -->
<link href="images/favicon.png" rel="shortcut icon" type="image/png">
<link href="images/apple-touch-icon.png" rel="apple-touch-icon">
<link href="images/apple-touch-icon-72x72.png" rel="apple-touch-icon" sizes="72x72">
<link href="images/apple-touch-icon-114x114.png" rel="apple-touch-icon" sizes="114x114">
<link href="images/apple-touch-icon-144x144.png" rel="apple-touch-icon" sizes="144x144">
<!-- Lead Style -->
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="preloader" class="loader_show">
<div class="loader-wrap">
<div class="loader">
<div class="loader-inner"></div>
</div>
</div>
</div>
<!-- pointer start -->
<div class="pointer bnz-pointer" id="bnz-pointer"></div>
<div class="content">
<div class="top_part">
<!-- Start Header -->
<header id="header" class="header_1 header">
<div class="navigation">
<nav id="flexmenu">
<div class="logo">
<a href="index.html"><img src="images/logo.png" alt="logo"></a>
</div>
<div class="nav-inner">
<div id="mobile-toggle" class="mobile-btn"></div>
<ul class="main-menu">
<li class="menu-item active"><a href="index.html">Home</a>
<ul class="sub-menu">
<li class="menu-item"><a href="index-2.html">Home 2</a></li>
<li class="menu-item"><a href="index-3.html">Home 3</a></li>
</ul>
</li>
<li class="menu-item"><a href="#">Posts</a>
<ul class="sub-menu">
<li class="menu-item"><a href="blog-details.html">Blog Details</a></li>
<li class="menu-item"><a href="blog-details-fullwidth.html">Blog Details Fullwidth</a></li>
</ul>
</li>
<li class="menu-item"><a href="about.html">About Author</a></li>
<li class="menu-item"><a href="contact.html">Contact Us</a></li>
</ul>
</div>
</nav>
</div>
</header>
<div class="top-social-1 social_links">
<ul class="top-social">
<li><a href="#"><i class="ion-social-facebook"></i></a></li>
<li><a href="#"><i class="ion-social-instagram"></i></a></li>
<li><a href="#"><i class="ion-social-twitter"></i></a></li>
</ul>
</div>
<div class="theme_slider_1">
<div class="slider_inner_content">
<div class="slider_text">
<div class="swiper-container slider_posts">
<div class="swiper-wrapper">
<div class="swiper-slide">
<article class="blog_post">
<div class="post_img">
<div class="calendar">
<a href="#"><span class="date">30</span><br>May</a>
</div>
</div>
<div class="post_content">
<div class="post_header">
<h2 class="post_title" data-swiper="overlay-left">
<a href="#">Live with no excuses & travel with no regrets</a>
</h2>
</div>
<div class="post_intro">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
et dolore magina aliqua. Quis ipsum suspendise ultrces gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis... </p>
</div>
<div class="post_footer">
<div class="read_more">
<a href="blog-details.html">Continue Reading</a>
</div>
</div>
</div>
</article>
</div>
<div class="swiper-slide">
<article class="blog_post">
<div class="post_img">
<div class="calendar">
<a href="#"><span class="date">27</span><br>May</a>
</div>
</div>
<div
<li class="menu-item"><a href="#">Posts</a></li>
<li class="menu-item"><a href="#">Contact Us</a></li>
<li class="menu-item"><a href="#">Photography</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer-bottom">
<div class="container">
<div class="copyright">
<p> © 2020 - Benzo Blog. Created by WP ThemeBooster. All Rights Reserved.</p>
</div>
</div>
</div>
</footer>
</div>
<!-- All JavaScript Files
================================================== -->
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="plugins/swiper/swiper.min.js"></script>
<script src="js/menu.js"></script>
<script src="plugins/aos/aos.js"></script>
<script src="js/custom.js"></script>
</body>
</html>
四、获取更多源码
~ 关注我，点赞博文~ 每天带你涨知识!
相关问题可以相互学习，可关注↓公Z号 获取更多源码 !
更多推荐
大一html网页制作期末网页设计 HTML5+CSS大作业——个人旅游图片博客(7页)
发布评论