333.大学生HTML5期末大作业 —【简约的个人博客响应式自适应网页】 Web前端网页制作 html+css+js

一只小小的眠羊

已于 2024-12-11 13:33:18 修改

阅读量825

点赞数 21

分类专栏：大学生期末大作业博客文章标签：前端 html 课程设计 javascript css3 html5 jquery

于 2024-12-11 13:32:33 首次发布

本文链接：https://blog.csdn.net/VX_L_5201314168/article/details/144398373

版权

大学生期末大作业同时被 2 个专栏收录

459 篇文章

订阅专栏

博客

22 篇文章

订阅专栏

一、更多推荐

欢迎来到我的CSDN主页！您的支持是我创作的动力！Web前端网页制作、网页完整代码、大学生期末大作业案例模板完整代码、技术交流等，有兴趣的联系我交流学习!更多优质博客文章、网页模板点击以下链接查阅：

仙女网页设计-CSDN博客

5000+网页案例完整代码，主题涵盖30+种类型:

二、网页简介

本实例应用html5+css3+js，响应式自适应网页。适用于大学生网页课程作业设计。响应式布局可以根据不同的设备屏幕大小自动调整页面布局，提高用户体验；本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。

三、网页文件

本网页实例共包含10个页面：

四、网页效果

以下是本篇文章正文内容，下面案例仅供参考（节选示例）：

五、代码展示

1.html

<!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="css/layui.css">
<link rel="stylesheet" type="text/css" href="css/main.css">


</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="picture/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="picture/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="picture/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="picture/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="picture/sy_img4.jpg" alt=""></div>
</div>
<div class="layui-col-xs12 layui-col-sm8 layui-col-md7">
<div class="item-cont">

...

2.CSS

代码如下（节选示例）：

body{font: 14px 宋体 Helvetica Neue,Helvetica,PingFang SC,Tahoma,Arial,sans-serif; overflow-x: hidden;}
.w1000{max-width: 1000px!important; margin:0 auto;}
.header{height: 120px; line-height: 120px; position: relative; font-size: 16px;}
.header .logo,.header .welcome-text,.header .nav{position: absolute; top: 0;}
.header .logo{left: 65px;}
.header .logo span{display: none;}
.header .nav{left: 250px;}
.header .nav a{color: #3f2863; margin:0 40px;}
.header .nav a.active{color: #ff7f21;}
.header .welcome-text{right: 50px;}
.header .header-down-nav{display: none;}

.banner{height: 600px; width: 100%; background: url(../images/banner.jpg) no-repeat; background-size:cover;}
.banner .cont{position: relative;}
.banner .title{color: #fff; position: absolute; top: 152px; left: 0;}
.banner .title h3{font-size: 80px; line-height: 88px;}
.banner .title h4{font-size: 46px;}
.banner .amount{font-size: 18px; line-height: 50px; color: #ff7f21; position: absolute; right: 20px; top: 290px;}
.banner .text{position: relative; width: 80px; display: inline-block;}
.banner .text::before { position: absolute; right: -5px; content: '\FF1A';}

.content{padding:100px 0 160px 0;}
.content .cont .title{margin-bottom: 60px;}
.content .cont .title a{font-size: 16px; color: #000!important;}
.content .cont .title .layui-breadcrumb span{position: relative; top: -1px; margin:0 16px;}
.content .cont .title a.active,.content .cont .title a:hover{color: #ff7f21!important;}
.content .cont .list-item .layui-fluid{padding:0;}
.content .cont .list-item .item{margin-bottom: 80px; overflow: hidden;}
.content .cont .list-item .item .img img{width: 100%;}
.content .cont .list-item .item .item-cont{padding-left: 100px;}
.content .cont .list-item .item .item-cont .go-icon{width: 33px; height: 11px; background: url(../images/jiantou.png) center center no-repeat; display: block; padding:10px 0; margin-top: 16px;}
.content .cont .list-item .item .item-cont h3{font-size: 24px; margin:20px 0;}
.content .cont .list-item .item .item-cont h3 .new-icon{width: 36px; height: 18px; line-height: 18px; text-align: center; padding:0; margin: -3px 0 0 10px;}
.content .cont .list-item .item .item-cont h5{font-size: 12px; color: #ff7f21; margin-bottom: 32px;}
.content .cont .list-item .item .item-cont p{line-height: 37px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
/* autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */
}
.content .review-version{padding:20px; border-top: 1px dashed #dddddd;}
.content .review-version img{float: left;}
.content .review-version .form{margin-bottom: 16px;}
.content .review-version .form .layui-form-item{clear: none;}
.content .review-version .form .layui-input-block{margin-left: 70px;}
.content .review-version .form .layui-input-block .layui-btn{width: 100px; height: 40px; line-height: 40px; background: #ff7f21;}
.content .review-version .list-cont .cont{padding:40px 0 30px 0; border-bottom: 1px solid #e5e5e5;}
.content .review-version .list-cont .cont:last-child{border-bottom: 0;}
.content .review-version .list-cont .cont .text{padding-left: 70px; line-height: 22px; color: #333; }
.content .review-version .list-cont .cont .text .tit{margin-bottom: 18px;}
.content .review-version .list-cont .cont .text .data{float: right;}

.footer-wrap{border-top: 1px solid #402863;}
.footer{padding:60px 0 80px 0; position: relative; overflow: hidden;}
.footer .qrcode{float: left;}
.footer .practice-mode{position: absolute; right: 0; overflow: hidden;}
.footer .practice-mode img{float: left; padding-right: 28px;}
.footer .practice-mode .text{color: #3f2863; float: left;}
.footer .practice-mode .text h4{font-size: 20px; line-height: 60px;}
.footer .practice-mode .text p{line-height: 32px;}
.footer .practice-mode .text p span{padding-left: 24px;}

/*whisper*/
.whisper-content{padding:40px 0 100px 0;}
.whisper-content .item-box{background: #f9f9f9; margin-bottom: 20px;}
.whisper-content .cont{max-width: 800px; margin:0 auto;}
.whisper-content .cont .item-box .item{padding:50px 46px 20px 54px;}
.whisper-content .cont .whisper-list .whisper-title{height: 20px; line-height: 20px; margin-bottom: 20px;}
.whisper-content .cont .whisper-list .whisper-title i{position: relative; top: 1px; margin-right: 5px;}
.whisper-content .cont .whisper-list .whisper-title span{color: #ff7f21;}
.whisper-content .cont .whisper-list .whisper-title span.hour{margin-right: 20px;}
.whisper-content .whisper-list .text-cont{line-height: 24px; margin-bottom: 28px;}
.whisper-content .whisper-list .op-list{margin-top: 30px; overflow: hidden;}
.whisper-content .whisper-list .op-list .like{ -webkit-user-select: none;
-moz-user-focus: none;
-moz-user-select: none;}
.whisper-content .whisper-list .op-list .like.active{color: #ff7f21;}
.whisper-content .whisper-list .op-list p{float: left; cursor: pointer; color: #999999;}
.whisper-content .whisper-list .op-list p.off{float: right; -webkit-user-select: none;
-moz-user-focus: none;
-moz-user-select: none;}
.whisper-content .whisper-list .op-list p.off span{margin-right: 5px;}
.whisper-content .whisper-list .op-list p.like{margin-right: 50px;}
.whisper-content .whisper-list .img-box{overflow: hidden;}
.whisper-content .whisper-list .img-box img{float: left; margin: 0px 18px 18px 0;}
.whisper-content .whisper-list .img-box img:last-child{margin-right: 0;}
/*end-whisper*/

...

3.JS

代码如下（节选示例）：

;!function(e){"use strict";var t=document,o={modules:{},status:{},timeout:10,event:{}},n=function(){this.v="2.4.5"},r=function(){var e=t.currentScript?t.currentScript.src:function(){for(var e,o=t.scripts,n=o.length-1,r=n;r>0;r--)if("interactive"===o[r].readyState){e=o[r].src;break}return e||o[n].src}();return e.substring(0,e.lastIndexOf("/")+1)}(),i=function(t){e.console&&console.error&&console.error("Layui hint: "+t)},a="undefined"!=typeof opera&&"[object Opera]"===opera.toString(),u={layer:"modules/layer",laydate:"modules/laydate",laypage:"modules/laypage",laytpl:"modules/laytpl",layim:"modules/layim",layedit:"modules/layedit",form:"modules/form",upload:"modules/upload",tree:"modules/tree",table:"modules/table",element:"modules/element",rate:"modules/rate",colorpicker:"modules/colorpicker",slider:"modules/slider",carousel:"modules/carousel",flow:"modules/flow",util:"modules/util",code:"modules/code",jquery:"modules/jquery",mobile:"modules/mobile","layui.all":"../layui.all"};n.prototype.cache=o,n.prototype.define=function(e,t){var n=this,r="function"==typeof e,i=function(){var e=function(e,t){layui[e]=t,o.status[e]=!0};return"function"==typeof t&&t(function(n,r){e(n,r),o.callback[n]=function(){t(e)}}),this};return r&&(t=e,e=[]),layui["layui.all"]||!layui["layui.all"]&&layui["layui.mobile"]?i.call(n):(n.use(e,i),n)},n.prototype.use=function(e,n,l){function s(e,t){var n="PLaySTATION 3"===navigator.platform?/^complete$/:/^(complete|loaded)$/;("load"===e.type||n.test((e.currentTarget||e.srcElement).readyState))&&(o.modules[f]=t,d.removeChild(v),function r(){return++m>1e3*o.timeout/4?i(f+" is not a valid module"):void(o.status[f]?c():setTimeout(r,4))}())}function c(){l.push(layui[f]),e.length>1?y.use(e.slice(1),n,l):"function"==typeof n&&n.apply(layui,l)}var y=this,p=o.dir=o.dir?o.dir:r,d=t.getElementsByTagName("head")[0];e="string"==typeof e?[e]:e,window.jQuery&&jQuery.fn.on&&(y.each(e,function(t,o){"jquery"===o&&e.splice(t,1)}),layui.jquery=layui.$=jQuery);var f=e[0],m=0;if(l=l||[],o.host=o.host||(p.match(/\/\/([\s\S]+?)\//)||["//"+location.host+"/"])[0],0===e.length||layui["layui.all"]&&u[f]||!layui["layui.all"]&&layui["layui.mobile"]&&u[f])return c(),y;if(o.modules[f])!function g(){return++m>1e3*o.timeout/4?i(f+" is not a valid module"):void("string"==typeof o.modules[f]&&o.status[f]?c():setTimeout(g,4))}();else{var v=t.createElement("script"),h=(u[f]?p+"lay/":/^\{\/\}/.test(y.modules[f])?"":o.base||"")+(y.modules[f]||f)+".js";h=h.replace(/^\{\/\}/,""),v.async=!0,v.charset="utf-8",v.src=h+function(){var e=o.version===!0?o.v||(new Date).getTime():o.version||"";return e?"?v="+e:""}(),d.appendChild(v),!v.attachEvent||v.attachEvent.toString&&v.attachEvent.toString().indexOf("[native code")<0||a?v.addEventListener("load",function(e){s(e,h)},!1):v.attachEvent("onreadystatechange",function(e){s(e,h)}),o.modules[f]=h}return y},n.prototype.getStyle=function(t,o){var n=t.currentStyle?t.currentStyle:e.getComputedStyle(t,null);return n[n.getPropertyValue?"getPropertyValue":"getAttribute"](o)},n.prototype.link=function(e,n,r){var a=this,u=t.createElement("link"),l=t.getElementsByTagName("head")[0];"string"==typeof n&&(r=n);var s=(r||e).replace(/\.|\//g,""),c=u.id="layuicss-"+s,y=0;return u.rel="stylesheet",u.href=e+(o.debug?"?v="+(new Date).getTime():""),u.media="all",t.getElementById(c)||l.appendChild(u),"function"!=typeof n?a:(function p(){return++y>1e3*o.timeout/100?i(e+" timeout"):void(1989===parseInt(a.getStyle(t.getElementById(c),"width"))?function(){n()}():setTimeout(p,100))}(),a)},o.callback={},n.prototype.factory=function(e){if(layui[e])return"function"==typeof o.callback[e]?o.callback[e]:null},n.prototype.addcss=function(e,t,n){return layui.link(o.dir+"css/"+e,t,n)},n.prototype.img=function(e,t,o){var n=new Image;return n.src=e,n.complete?t(n):(n.οnlοad=function(){n.οnlοad=null,"function"==typeof t&&t(n)},void(n.οnerrοr=function(e){n.οnerrοr=null,"function"==typeof o&&o(e)}))},n.prototype.config=function(e){e=e||{};for(var t in e)o[t]=e[t];return this},n.prototype.modules=function(){var e={};for(var t in u)e[t]=u[t];return e}(),n.prototype.extend=function(e){var t=this;e=e||{};for(var o in e)t[o]||t.modules[o]?i("模块名 "+o+" 已被占用"):t.modules[o]=e[o];return t},n.prototype.router=function(e){var t=this,e=e||location.hash,o={path:[],search:{},hash:(e.match(/[^#](#.*$)/)||[])[1]||""};return/^#\//.test(e)?(e=e.replace(/^#\//,""),o.href="/"+e,e=e.replace(/([^#])(#.*$)/,"$1").split("/")||[],t.each(e,function(e,t){/^\w+=/.test(t)?function(){t=t.split("="),o.search[t[0]]=t[1]}():o.path.push(t)}),o):o},n.prototype.data=function(t,o,n){if(t=t||"layui",n=n||localStorage,e.JSON&&e.JSON.parse){if(null===o)return delete n[t];o="object"==typeof o?o:{key:o};try{var r=JSON.parse(n[t])}catch(i){var r={}}return"value"in o&&(r[o.key]=o.value),o.remove&&delete r[o.key],n[t]=JSON.stringify(r),o.key?r[o.key]:r}},n.prototype.sessionData=function(e,t){return this.data(e,t,sessionStorage)},n.prototype.device=function(t){var o=navigator.userAgent.toLowerCase(),n=function(e){var t=new RegExp(e+"/([^\\s\\_\\-]+)");return e=(o.match(t)||[])[1],e||!1},r={os:function()

...