HTML5+CSS大作业——极简个人相册留言博客(5页) web结课作业的源码 模板
文章目录
一、作品展示
二、文件目录
三、代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="../res/layui/css/layui.css">
<link rel="stylesheet" type="text/css" href="../res/css/main.css">
<!--加载meta IE兼容文件-->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="header">
<div class="menu-btn">
<div class="menu"></div>
</div>
<h1 class="logo">
<a href="index.html">
<span>MYBLOG</span>
<img src="../res/img/logo.png">
</a>
</h1>
<div class="nav">
<a href="index.html" class="active">文章</a>
<a href="whisper.html">微语</a>
<a href="leacots.html">留言</a>
<a href="album.html">相册</a>
<a href="about.html">关于</a>
</div>
<ul class="layui-nav header-down-nav">
<li class="layui-nav-item"><a href="index.html" class="active">文章</a></li>
<li class="layui-nav-item"><a href="whisper.html">微语</a></li>
<li class="layui-nav-item"><a href="leacots.html">留言</a></li>
<li class="layui-nav-item"><a href="album.html">相册</a></li>
<li class="layui-nav-item"><a href="about.html">关于</a></li>
</ul>
<p class="welcome-text">
欢迎来到<span class="name">小明</span>的博客~
</p>
</div>
<div class="banner">
<div class="cont w1000">
<div class="title">
<h3>MY<br />BLOG</h3>
<h4>well-balanced heart</h4>
</div>
<div class="amount">
<p><span class="text">访问量</span><span class="access">1000</span></p>
<p><span class="text">日志</span><span class="daily-record">1000</span></p>
</div>
</div>
</div>
<div class="content">
<div class="cont w1000">
<div class="title">
<span class="layui-breadcrumb" lay-separator="|">
<a href="javascript:;" class="active">设计文章</a>
<a href="javascript:;">前端文章</a>
<a href="javascript:;">旅游杂记</a>
</span>
</div>
<div class="list-item">
<div class="item">
<div class="layui-fluid">
<div class="layui-row">
<div class="layui-col-xs12 layui-col-sm4 layui-col-md5">
<div class="img"><img src="../res/img/sy_img1.jpg" alt=""></div>
</div>
<div class="layui-col-xs12 layui-col-sm8 layui-col-md7">
<div class="item-cont">
<h3>空间立体效果图，完美呈现最终效果<button class="layui-btn layui-btn-danger new-icon">new</button></h3>
<h5>设计文章</h5>
<p>室内设计作为一门新兴的学科，尽管还只是近数十年的事，但是人们有意识地对自己生活、生产活动的室内进行安排布置，甚至美化装饰，赋予室内环境以所祈使的气氛，却早巳从人类文明伊始的时期就已存在</p>
<a href="details.html" class="go-icon"></a>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="layui-fluid">
<div class="layui-row">
<div class="layui-col-xs12 layui-col-sm4 layui-col-md5">
<div class="img"><img src="../res/img/sy_img2.jpg" alt=""></div>
</div>
<div class="layui-col-xs12 layui-col-sm8 layui-col-md7">
<div class="item-cont">
<h3>空间立体效果图，完美呈现最终效果<button class="layui-btn layui-btn-danger new-icon">new</button></h3>
<h5>设计文章</h5>
<p>室内设计作为一门新兴的学科，尽管还只是近数十年的事，但是人们有意识地对自己生活、生产活动的室内进行安排布置，甚至美化装饰，赋予室内环境以所祈使的气氛，却早巳从人类文明伊始的时期就已存在</p>
<a href="details.html" class="go-icon"></a>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="layui-fluid">
<div class="layui-row">
<div class="layui-col-xs12 layui-col-sm4 layui-col-md5">
<div class="img"><img src="../res/img/sy_img3.jpg" alt=""></div>
</div>
<div class="layui-col-xs12 layui-col-sm8 layui-col-md7">
<div class="item-cont">
<h3>空间立体效果图，完美呈现最终效果<button class="layui-btn layui-btn-danger new-icon">new</button></h3>
<h5>设计文章</h5>
<p>室内设计作为一门新兴的学科，尽管还只是近数十年的事，但是人们有意识地对自己生活、生产活动的室内进行安排布置，甚至美化装饰，赋予室内环境以所祈使的气氛，却早巳从人类文明伊始的时期就已存在</p>
<a href="details.html" class="go-icon"></a>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="layui-fluid">
<div class="layui-row">
<div class="layui-col-xs12 layui-col-sm4 layui-col-md5">
<div class="img"><img src="../res/img/sy_img4.jpg" alt=""></div>
</div>
<div class="layui-col-xs12 layui-col-sm8 layui-col-md7">
<div class="item-cont">
<h3>空间立体效果图，完美呈现最终效果<button class="layui-btn layui-btn-danger new-icon">new</button></h3>
<h5>设计文章</h5>
<p>室内设计作为一门新兴的学科，尽管还只是近数十年的事，但是人们有意识地对自己生活、生产活动的室内进行安排布置，甚至美化装饰，赋予室内环境以所祈使的气氛，却早巳从人类文明伊始的时期就已存在</p>
<a href="details.html" class="go-icon"></a>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="layui-fluid">
<div class="layui-row">
<div class="layui-col-xs12 layui-col-sm4 layui-col-md5">
<div class="img"><img src="../res/img/sy_img5.jpg" alt=""></div>
</div>
<div class="layui-col-xs12 layui-col-sm8 layui-col-md7">
<div class="item-cont">
<h3>空间立体效果图，完美呈现最终效果<button class="layui-btn layui-btn-danger new-icon">new</button></h3>
<h5>设计文章</h5>
<p>室内设计作为一门新兴的学科，尽管还只是近数十年的事，但是人们有意识地对自己生活、生产活动的室内进行安排布置，甚至美化装饰，赋予室内环境以所祈使的气氛，却早巳从人类文明伊始的时期就已存在</p>
<a href="details.html" class="go-icon"></a>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="demo" style="text-align: center;"></div>
</div>
</div>
<div class="footer-wrap">
<div class="footer w1000">
<div class="qrcode">
<img src="../res/img/erweima.jpg">
</div>
<div class="practice-mode">
<img src="../res/img/down_img.jpg">
<div class="text">
<h4 class="title">我的联系方式</h4>
<p>微信<span class="WeChat">1234567890</span></p>
<p>手机<span class="iphone">1234567890</span></p>
<p>邮箱<span class="email">1234567890@qq.com</span></p>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="../res/layui/layui.js"></script>
<script type="text/javascript">
layui.config({
base: '../res/js/util/'
}).use(['element','laypage','jquery','menu'],function(){
element = layui.element,laypage = layui.laypage,$ = layui.$,menu = layui.menu;
laypage.render({
elem: 'demo'
,count: 70 //数据总数，从服务端得到
});
menu.init();
})
</script>
</body>
</html>
四、获取更多源码
~ 关注我，点赞博文~ 每天带你涨知识!
相关问题可以相互学习，可关注↓公Z号 获取更多源码 !
五、学习资料
web前端 零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)
适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站
六、更多源码
PC电脑端关注我们
HTML5期末考核大作业源码* 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!
