Web前端期末大作业--响应式个人日志博客网页设计(HTML+CSS+JavaScript)实现_博客响应式web代码-程序员宅基地

技术标签: 期末大作业  web前端期末作业实战  html  JavaWeb  个人日志博客网页设计  javascript  

 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?网页要求的总数量太多?HTML网页作业无从下手?没有合适的模板?等等一系列问题。你想要解决的问题,在专栏

java项目精品实战分享案例《100套》》》

web期末大作业网页实战《100套》》》

 Html+Css+JS期末大作业《100套》》》 

常见网页设计作业题材有 个人、 美食、 公司、体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、  文化、 家乡、 鲜花、 礼品、 汽车、 其他等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求都能满足你的需求。原始HTML+CSS+JS页面设计, web大学生网页设计作业源码,这是一个不错的电竞博客网页制作,画面精明,非常适合初学者学习使用。

  B站视频演示: Web前端期末大作业--个人日志博客网页设计.mp4

网页实现截图:

网站首页 

室内设计作为一门新兴的学科,尽管还只是近数十年的事,但是人们有意识地对自己生活、生产活动的室内进行安排布置,甚至美化装饰,赋予室内环 

个人微语和评论:

评论

 留言评论:

相册: 

相册列表:

关于我:

项目组织结构:

主要源码展示:

index.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>响应式酷炫个人日志博客网页设计</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>
   </script>
    </div>
    <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="tlinks">Collect from <a href="http://www.cssmoban.com/">网页模板</a></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>
                
    <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>

style.css

.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;
}

大家点赞、收藏、关注、评论啦 、

打卡 文章 更新 86/  100天

 专栏推荐阅读:

Java毕设项目精品实战案例《100套》https://blog.csdn.net/weixin_39709134/category_11128297.html

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_39709134/article/details/120876345

智能推荐

个人编码修养养成篇---花样缩进必学篇_c语言printf缩进-程序员宅基地

文章浏览阅读310次。低级程序员选择不缩进的理由:1.全部精力集中于项目本身,对缩进并不关注2.改写代码并将原始代码文件移植到其他系统平台的过程中,缩进不知不觉地消失了_c语言printf缩进

Redis缓存对象的实现原理-程序员宅基地

文章浏览阅读2.2k次。&nbsp; &nbsp; &nbsp; 截止到目前为止,在redis官方的文档和实现里面并没有针对object 对象缓存的方法,然而,在我们的实际开发需要中,在很多时候我们是需要进行对象缓存的,并且可以正确的读取出来! 在笔者正在开发的红包项目中,针对每天红包就需要使用的对象缓存,并可以随时修改缓存对象中的..._redis缓存对象的实现原理

oracle update太慢优化_oracle update 非常慢-程序员宅基地

文章浏览阅读1.3w次。tb_e_zw_nrllb_temp 量700225gsm_user 量109398337--优化前 两种update--说明:gsm_user是视图存在GSM_USER_ID索引,tb_e_zw_nrllb_temp有user_id索引,使用以下两种方法都更新时间超5h+导致不能更新成功--1 update tb_e_zw_nrllb_temp t set t.msisdn..._oracle update 非常慢

分布式一致性算法Raft论文(2)——复制状态机_状态机复制能处理什么问题-程序员宅基地

文章浏览阅读604次。2 Replicated state machines集群中某些服务器不可用,整个集群还可以工作。算法保证安全性;复制日志保持顺序性;Consensus algorithms typically arise in the context of replicated state machines [37]. In this approach, state machines on a collection of servers compute identical copies..._状态机复制能处理什么问题

HTTP请求与跨域_http连接 跨网 30分钟-程序员宅基地

文章浏览阅读4.8k次。浏览器发出一个请求到收到响应经历了哪些步骤1、浏览器解析用户输入的URL,生成一个HTTP格式的请求;2、先根据URL域名从本地hosts文件查找是否有映射IP,如果没有就将域名发送给电脑配置的DNS进行域名解析,得到IP地址;3、浏览器通过操作系统将请求通过四层网络协议发送出去;4、途中可能会经过各种路由器、交换机,最终到达服务器;5、服务器接收到请求后,根据请求所指定的端口,将请求传递给绑定了该端口的应用程序,如tomcat;6、tomcat接收请求数据后,按照http协议的格式_http连接 跨网 30分钟

异或差分,前缀异或的概念-程序员宅基地

文章浏览阅读1.9k次,点赞3次,收藏12次。最近在做cometoj看题解的时候发现了异或差分这一性质。随性就在本校oj上出了个题,题是离线的,可以O(n)过,如果改成在线的可以用树状数组在O(n*logn) 。问题链接:http://acm.nyist.cf/problem/1605问题描述与差分相似,我们构建一个异或差分数组B,那么B[i]=A[i]^A[i-1].,B[1]=A[1]。这样A[i]就可以B[i]的前缀异或..._异或差分

随便推点

苹果8p录像鸿蒙,录屏怎么录苹果8p | 手游网游页游攻略大全-程序员宅基地

文章浏览阅读252次。发布时间:2016-01-05我的世界手机版很多玩家喜欢制作游戏视频,用来分享给玩家或者为其他玩家录制一些游戏教程.我的世界手机版怎么拍视频呢?99安卓网小编下面就来介绍我的世界手机版录制视频的教程,供参考. 我的世界手机版拍视频教程: 方法一: 首 ...标签:我的世界手机版发布时间:2017-10-20王者荣耀的自由录屏功能极大的方便了玩家,不过很多玩家对于这个功能还不会使用.下面就为大家介绍..._鸿蒙怎么录屏

浅析MVC_mvc前端框架有哪些-程序员宅基地

文章浏览阅读119次。背景MVC是一种架构设计模式,它通过关注点分离鼓励改进应用程序组织。在过去,MVC被大量用于构建桌面和服务器端应用程序,如今Web应用程序的开发已经越来越向传统应用软件开发靠拢,Web和应用之间的界限也进一步模糊。传统编程语言中的设计模式也在慢慢地融入Web前端开发。由于前端开发的环境特性,在经典MVC模式上也引申出了诸多MV模式,被实现到各个Javascript框架中都有多少的衍变。MVC含义MVC包括三类对象,将他们分离以提高灵活性和复用性。模型model用于封装与应用程序的业务逻辑相关的数_mvc前端框架有哪些

(IMDN ACMM2019)轻量化Lightweight Image Super-Resolution with Information Multi-distillation Network-程序员宅基地

文章浏览阅读6.7k次,点赞7次,收藏36次。文章地址:https://arxiv.org/pdf/1909.11856.pdf作者的项目地址:代码论文作者:Zheng Hui 西安电子科技大学一、简单介绍受IDN(CVPR2018)的的启发,文章提出了Multi-distillation模块,实现了内存和实时性之间的最优。整个文章的主要的贡献有:1、提出了轻量化的Multi-distillation网络,来快速和准确的做..._lightweight image super-resolution with information multi-distillation netwo

让windows日志记录web程序的异常-EnterpriseLibrary.ExceptionHandling在asp.net mvc中的初步应用...-程序员宅基地

文章浏览阅读90次。实现的功能很简单,就是用企业库的异常处理模块和日志模块,利用windows的系统日志,记录web应用的异常。我的企业库是4.1版1.添加对Microsoft.Practices.EnterpriseLibrary.ExceptionHandling和Microsoft.Practices.EnterpriseLibrary.Logging的引用2.重写Application_Error..._mvc网站可以与windows日志进行交互吗?

RegularExpressionValidator控件与常用验证正则表达式大全小结-程序员宅基地

文章浏览阅读1k次。分类: .NET控件研究 ASP.NET网站开发 ASP.NET报表 Asp.Net 2.0网站开发 ASP.NET AJAX ..._regularexpressionvalidator控件可以加入的正确表达式

Eclipse Console不断自动弹出的解决方法_console配置时弹出信息-程序员宅基地

文章浏览阅读3.8k次。最近链接手机调试程序的时候DDMS中的Console控制台总是反复的自动弹出。而我主要是使用LogCat来查看异常信息,Console自动弹出特别影响工作。现将关闭方法拿来与大家共享。Eclipse中按照如下顺序找到设置菜单的位置:Window — Preferences — Run/Debug — Console找到以下两项:Show when program w_console配置时弹出信息

推荐文章

热门文章

相关标签