HTML5+CSS大作业——简约个性高逼格博客(5页) web网页制作期末大作业模板
常见网页设计作业题材有
个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他等网页设计题目,A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!
文章目录
- HTML5+CSS大作业——简约个性高逼格博客(5页) web网页制作期末大作业模板
- 一、作品展示
- 二、文件目录
- 三、代码实现
- 四、获取更多源码
- 五、学习资料
- 六、更多源码
一、作品展示
二、文件目录
三、代码实现
<!doctype html>
<html lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>响应式简单个性个人博客模板</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="stylesheet" type="text/css" href="statics/css/index.css" media="all" />
</head>
<body class="home blog custom-background round-avatars">
<div class="Yarn_Background" style="background-image: url( statics/images/47fb3c_.jpg);"></div>
<form class="js-search search-form search-form--modal" method="get" action="search.html" role="search">
<div class="search-form__inner">
<div>
<div id="search-container" class="ajax_search">
<form method="get" id="searchform" action="">
<div class="filter_container"><input type="text" value="" autocomplete="off" placeholder="Type then select or enter" name="s" id="search-input" />
<ul id="search_filtered" class="search_filtered"></ul>
</div>
<input type="submit" name="submit" id="searchsubmit" class="searchsubmit" value="" />
</form>
</div>
</div>
</div>
</form>
<div class="navi" data-aos="fade-down">
<div class="bt-nav">
<div class="line line1"></div>
<div class="line line2"></div>
<div class="line line3"></div>
</div>
<div class="navbar animated fadeInRight">
<div class="inner">
<nav id="site-navigation" class="main-navigation">
<div id="main-menu" class="main-menu-container">
<div class="menu-menu-container">
<ul id="primary-menu" class="menu">
<li id="menu-item-17" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-17">
<a href="index.html">首页</a>
</li>
<li id="menu-item-173" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-173">
<a href="update.html">更新</a>
</li>
<li id="menu-item-78" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-78">
<a href="link.html">链接</a>
</li>
<li id="menu-item-252" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-252">
<a href="archives.html">归档</a>
<ul class="sub-menu">
<li id="menu-item-165" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-165">
<a href="">theme</a>
</li>
<li id="menu-item-163" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-163">
<a href="">Happen</a>
</li>
<li id="menu-item-924" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-924">
<a href="">WeWork</a>
</li>
<li id="menu-item-164" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-164">
<a href="">WordPress</a>
</li>
</ul>
</li>
<li id="menu-item-57" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-57">
<a href="gustbook.html">留言</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- #site-navigation -->
</div>
</div>
</div>
<div class="hebin" data-aos="fade-down">
<i class=" js-toggle-search iconfont"></i>
</div>
<header id="masthead" class="overlay animated from-bottom" itemprop="brand">
<div class="site-branding text-center">
<a href="">
<figure>
<img class="custom-logo avatar" src="statics/images/omikron.png" />
</figure>
</a>
<h3 class="blog-description"><p>This is beauty</p></h3>
</div>
<!-- .site-branding -->
<div class="decor-part">
<div id="particles-js"></div>
</div>
<div class="animation-header">
<div class="decor-wrapper">
<svg id="header-decor" class="decor bottom" xmlns="http://www.w3/2000/svg" version="1.1" viewBox="0 0 100 100" preserveAspectRatio="none">
<path class="large left" d="M0 0 L50 50 L0 100" fill="rgba(255,255,255, .1)"></path>
<path class="large right" d="M100 0 L50 50 L100 100" fill="rgba(255,255,255, .1)"></path>
<path class="medium left" d="M0 100 L50 50 L0 33.3" fill="rgba(255,255,255, .3)"></path>
<path class="medium right" d="M100 100 L50 50 L100 33.3" fill="rgba(255,255,255, .3)"></path>
<path class="small left" d="M0 100 L50 50 L0 66.6" fill="rgba(255,255,255, .5)"></path>
<path class="small right" d="M100 100 L50 50 L100 66.6" fill="rgba(255,255,255, .5)"></path>
<path d="M0 99.9 L50 49.9 L100 99.9 L0 99.9" fill="rgba(255,255,255, 1)"></path>
<path d="M48 52 L50 49 L52 52 L48 52" fill="rgba(255,255,255, 1)"></path>
</svg>
</div>
</div>
</header>
<div id="main" class="content">
<div class="container">
<style>
body.custom-background {
background: #fff
}
.container {
padding: 10px 0px;
}
</style>
<section class="post_content">
<header class="post_header">
<h1 class="post_title">链接</h1>
</header>
<div class="links">
<h3 class="catalog-title">Life Blog</h3>
<div class="catalog-description"></div>
<div class="catalog-share">4 items in collection</div>
<div class="userItems">
<div class="userItem">
<div class="userItem--inner">
<div class="userItem-content"><img alt='' src='statics/images/8e5da64c712d2bb59235d8d746108cb1.jpeg' class='avatar avatar-64 photo' height='64' width='64' />
<div class="userItem-name">
<a class="link link--primary" href="#" target="_blank">Akina</a>
</div>
</div>
</div>
</div>
<div class="userItem">
<div class="userItem--inner">
<div class="userItem-content"><img alt='' src='statics/images/89aeed9e656e1f7fbb04691aa3b38252.jpeg' class='avatar avatar-64 photo' height='64' width='64' />
<div class="userItem-name">
<a class="link link--primary" href="#" target="_blank">Dearzd</a>
</div>
</div>
</div>
</div>
<div class="userItem">
<div class="userItem--inner">
<div class="userItem-content"><img alt='' src='statics/images/d52a89521eb0cdb4efb343fb63ce3986.jpeg' class='avatar avatar-64 photo' height='64' width='64' />
<div class="userItem-name">
<a class="link link--primary" href="#" target="_blank">Meow</a>
</div>
</div>
</div>
</div>
<div class="userItem">
<div class="userItem--inner">
<div class="userItem-content"><img alt='' src='statics/images/22278c1d83002246dca48b52e306b1c9.jpeg' class='avatar avatar-64 photo' height='64' width='64' />
<div class="userItem-name">
<a class="link link--primary" href="#" target="_blank">Tokin</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
<footer id="footer" class="overlay animated from-top">
<div class="decor-wrapper">
<svg id="footer-decor" class="decor top" xmlns="http://www.w3/2000/svg" version="1.1" viewBox="0 0 100 100" preserveAspectRatio="none">
<path class="large left" d="M0 0 L50 50 L0 100" fill="rgba(255,255,255, .1)"></path>
<path class="large right" d="M100 0 L50 50 L100 100" fill="rgba(255,255,255, .1)"></path>
<path class="medium left" d="M0 0 L50 50 L0 66.6" fill="rgba(255,255,255, .3)"></path>
<path class="medium right" d="M100 0 L50 50 L100 66.6" fill="rgba(255,255,255, .3)"></path>
<path class="small left" d="M0 0 L50 50 L0 33.3" fill="rgba(255,255,255, .5)"></path>
<path class="small right" d="M100 0 L50 50 L100 33.3" fill="rgba(255,255,255, .5)"></path>
<path d="M0 0 L50 50 L100 0 L0 0" fill="rgba(255,255,255, 1)"></path>
<path d="M48 48 L50 51 L52 48 L48 48" fill="rgba(255,255,255, 1)"></path>
</svg>
</div>
<div class="socialize" data-aos="zoom-in">
<li>
<a title="weibo" class="socialicon" href=""><i class="iconfont" aria-hidden="true"></i></a>
</li>
<li class="wechat">
<a class="socialicon"><i class="iconfont"></i></a>
<div class="wechatimg"><img src="statics/images/49D3746D-7519-B709-83E4-65BD1927C4E7.jpg"></div>
</li>
<li>
<a title="QQ" class="socialicon" href="" target="_blank"><i class="iconfont" aria-hidden="true"></i></a>
</li>
</div>
<div class="cr">
Copyright©2018. Design by
<a href="">17sucai</a>
</div>
<script type='text/javascript' src='statics/js/jquery.min.js'></script>
<script type='text/javascript' src='statics/js/plugins.js'></script>
<script type='text/javascript' src='statics/js/script.js'></script>
<script type='text/javascript' src='statics/js/particles.js'></script>
<script type='text/javascript' src='statics/js/aos.js'></script>
</body>
</html>
四、获取更多源码
~ 关注我，点赞博文~ 每天带你涨知识!
相关问题可以相互学习，可关注↓公Z号 获取更多源码 !
五、学习资料
web前端 零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)
适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站
六、更多源码
PC电脑端关注我们
HTML5期末考核大作业源码* 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!
更多推荐
网页制作期末大作业成品 HTML5+CSS大作业——简约个性高逼格博客(5页) web网页制作期末大作业模板
发布评论