个人博客网站前端页面的实现

博客网站前端页面的实现

博客登录页

相关代码

login.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>博客登录页</title><link rel="stylesheet" href="../css/commom.css"><link rel="stylesheet" href="../css/login.css">
</head>
<body><div class="nav"><img src="../img/logo.png" alt="图片没加载出来"><span>我的博客系统</span><span class="space"></span><div><a href="blog_list.html">主页</a><a href="blog_edit.html">写博客</a><a href="http://www.baidu.com/">注销</a></div></div><div class="login_container"><!-- 登录页面 --><div class="login_dialog"><h3>登录</h3><div class="row"><span>用户名</span><input class="username" type="text"></div><div class="row"><span>密码</span><input class="password" type="password"></div><div class="row"><button>提交</button> </div></div></div></body>
</html>

login.css

* {padding: 0px;margin: 0px;box-sizing: border-box;
}
.login_container {height: calc(100% - 50px);width: 100%;display: flex;justify-content: center;align-items: center;
}
.login_dialog {width: 400px;height: 400px;background-color: rgba(255, 255, 255, 0.8);border-radius: 14px;
}
h3 {text-align: center;margin-top: 50px;margin-bottom: 30px;font-size: 25px;
}
.row {display: flex;justify-content: center;align-items: center;height: 80px;
}
.row span {font-size: 20px;width: 90px;
}
.row input {height: 40px;width: 240px;font-size: 20px;border-radius: 9px;border: none;
}
.row button {background-color: #a3dff1;width: 330px;height: 40px;border-radius: 8px;border:none;
}




页面实现效果

Snipaste_2024-03-11_17-11-56




博客列表页

相关代码

blog_list.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>博客列表页</title><link rel="stylesheet" href="../css/commom.css">
</head>
<body><div class="nav"><img src="../img/logo.png" alt="图片没加载出来"><span>我的博客系统</span><span class="space"></span><div><a href="blog_list.html">主页</a><a href="blog_edit.html">写博客</a><a href="http://www.baidu.com/">注销</a></div></div><div class="container"><div class="container-left"><!-- 个人信息 --><div class="card"><img src="../img/touxiang.jpg" alt="图片没加载出来"><h3>姐姐</h3><a href="https://gitee.com/liao-feiyangsss">github地址</a><div class="counter"><span>文章</span><span>分类</span></div><div class="counter"><span>1</span><span>2</span></div></div></div><div class="container-right"><!-- 博客列表 --><div class="blog"><div class="title">这是第一篇博客 </div><div class="date">2024-03-11</div><div class="desc"><p>山风微微,像月光下晃动的海浪,温和而柔软,停留在时光的背后,变成小时候听过的故事。在遥远的城市,陌生的地方,有他未曾见过的山和海</p></div><a class="detail" href="blog_content.html?blogId=5">查看全文&gt;&gt;</a></div><div class="blog"><div class="title">这是第二篇博客 </div><div class="date">2024-03-13</div><div class="desc"><p>生活中,不需要太多的刻意,一切顺其自然,或许是最好的结果……如果有一天,你看见整天都在疯狂的人,那绝不是我。因为做一个快乐简单的人,一生简单快乐!</p></div><a class="detail" href="blog_content.html?blogId=2">查看全文&gt;&gt;</a></div><div class="blog"><div class="title">这是第三篇博客 </div><div class="date">2024-03-15</div><div class="desc"><p>太阳冉冉升起,清风柔柔吹起。花儿伸伸懒腰,喜鹊唧唧鸣唱。当你睁开眼睛时,世界的美好送给你。清扬的闹铃响起时,我美好的祝福呈现给你。</p></div><a class="detail" href="blog_content.html?blogId=3">查看全文&gt;&gt;</a></div><div class="blog"><div class="title">这是第四篇博客 </div><div class="date">2024-03-17</div><div class="desc"><p>如果你认为自己会被击倒,你就会被击倒。如果你认为自己没有希望,你就会没有希望。如果你对自己的生活持消极态度,你的生活就真的会变得很消极。如果你积极对待生活,你就会发现,生活是如此美好。</p></div><a class="detail" href="blog_content.html?blogId=4">查看全文&gt;&gt;</a></div><div class="blog"><div class="title">这是第五篇博客 </div><div class="date">2024-03-19</div><div class="desc"><p>每个人都有自己的幸福,仰望别人的幸福时,别人也在仰望你的幸福。难得糊涂,容易幸福;知足常乐,更容易获得幸福。幸福需要感觉,感觉幸福就是幸福。我们拼命地追求幸福,因为幸福就在身边;我们设高的要求,因为我们害怕失望。</p></div><a class="detail" href="blog_content.html?blogId=5">查看全文&gt;&gt;</a></div><div class="blog"><div class="title">这是第六篇博客 </div><div class="date">2024-03-21</div><div class="desc"><p>如果难过,就努力抬头望天空吧,望着望着就忘了……它那么大,一定可以包容你的所有委屈。</p></div><a class="detail" href="blog_content.html?blogId=5">查看全文&gt;&gt;</a></div><div class="blog"><div class="title">这是第七篇博客 </div><div class="date">2024-03-23</div><div class="desc"><p>记忆像是倒在掌心的水,不论你摊开还是紧握,终究还是会从指缝中一滴一滴流淌干净</p></div><a class="detail" href="blog_content.html?blogId=5">查看全文&gt;&gt;</a></div><div class="blog"><div class="title">这是第八篇博客 </div><div class="date">2024-03-25</div><div class="desc"><p>人生就像一座山,重要的不是它的高低,而在于灵秀;人生就像一场雨,重要的不是它的大小,而在于及时。</p></div><a class="detail" href="blog_content.html?blogId=1">查看全文&gt;&gt;</a></div></div></div>
</body>
</html>

common.css

* {margin: 0px;padding: 0px;box-sizing: border-box;
}
html,body {height: 100%;width: 100%;background-image: url(../img/background.jpg);background-repeat: no-repeat;background-size: cover;
}
.nav {width: 100%;height: 60px;background-color:  gray;display: flex;justify-content: left;align-items: center;color: white;
}
.nav img {width: 50px;height: 50px;border-radius: 50%;/* margin-top: 4px; */margin-left: 4px;margin-right: 8px;
}.nav .space {width: 75%;
}.nav a {color: white;text-decoration: none;/* margin-left: 10px; */margin-right: 15px;
}
.nav div {display: flex;justify-content: right;align-items: center;width: 15%;
}
.container {display: flex;justify-content: space-between;align-items: center;margin: 0 auto;height: calc(100% - 50px);width: 100%;
}.container .container-left {height: 100%;width: 30%;background-color: rgba(255,255,255,0.8);
}.container .container-right {height: 100%;width: 70%;background-color: rgba(255,255,255,0.8);overflow: auto;
}
.card {margin-top: 10px;width: 60%;height: 44%;background-color: rgba(255,255,255,0.8);margin-left: 200px;margin-right: 10px;border-radius: 15px;
}
.card img {width: 120px;height: 120px;border-radius: 50%;margin-left: 90px;margin-top: 35px;
}
.card h3 {text-align: center;margin-top: 8px;margin-bottom: 8px;
}
.card a {display: block;text-align: center;color: grey;text-decoration: none;margin-bottom: 20px;
}
.card .counter {display: flex;justify-content: space-around;margin-top: 22px;
}.blog {width: 100%;background-color:rgba(255,255,255,0.8);border-radius: 15px;margin-top: 12px;
}.blog .title {font-size: 20px;font-weight: 700;text-align: center;padding-top: 20px;
}
.blog .date {color: rgb(47, 213, 255);padding-bottom: 10px;padding-top: 20px;text-align: center;
}
.blog .desc {text-indent: 2em;line-height: 30px;margin-top: 8px;
}.blog .detail {color: black;text-align: center;display: block;width: 140px;height: 30px;margin: 10px auto 0px auto;border: 2px solid rgb(20, 24, 24);line-height: 22px;text-decoration: none;
}.blog .detail:active {color: blue;
}



页面实现效果

Snipaste_2024-03-11_17-11-39




博客正文页

相关代码

blog_content.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>博客正文页</title><link rel="stylesheet" href="../css/content.css">
</head><body><div class="nav"><img src="../img/logo.png" alt="图片没加载出来"><span>我的博客系统</span><span class="space"></span><div><a href="blog_list.html">主页</a><a href="blog_edit.html">写博客</a><a href="http://www.baidu.com/">注销</a></div></div><div class="container"><div class="container-left"><!-- 个人信息 --><div class="card"><img src="../img/touxiang.jpg" alt="图片没加载出来"><h3>姐姐</h3><a href="https://gitee.com/liao-feiyangsss">github地址</a><div class="counter"><span>文章</span><span>分类</span></div><div class="counter"><span>1</span><span>2</span></div></div></div><div class="container-right"><!-- 博客列表 --><div class="blog"><div class="title">《春天的早晨》</div><div class="date">2024-03-11</div><div class="desc"><p>春天的早晨,是一首充满生机的诗篇。它轻轻地掀开夜幕,洒下一片淡淡的金色,像细沙般温柔地抚摸着沉睡的大地。万物在这温暖的光芒中苏醒,仿佛经过了一个冬天的沉寂,都迫不及待地想要展现出自己最美的姿态。</p><P>柳树披上了嫩绿的新装,柔软的枝条在微风中摇曳,好似少女的长发,飘逸而动人。河水也被这春色感染,变得碧波荡漾,宛如一面镜子,映照着蓝天白云和岸边的繁花。空气中弥漫着淡淡的花香,那是桃花、杏花和樱花争相绽放的香气,它们交织在一起,形成了一种独特的春天的味道。这种味道让人心旷神怡,仿佛置身于一个梦幻般的仙境。远处的小鸟开始欢快地歌唱,它们的歌声清脆悦耳,仿佛在庆祝春天的到来。小路上,早起的行人踏着轻快的步伐,脸上洋溢着笑容,他们也被这美好的春色所感染,心中充满了希望和期待。</P><p>春天的早晨,是一首充满希望和生机的诗篇。它让人感受到大自然的神奇和美丽,也让人对未来充满了无限的憧憬和期待。在这美好的时刻,我们仿佛可以感受到整个世界都在为我们而歌唱,为我们而绽放。</p></div></div>
</body>
</html>

content.css

* {margin: 0px;padding: 0px;box-sizing: border-box;
}
html,body {height: 100%;width: 100%;background-image: url(../img/background.jpg);background-repeat: no-repeat;background-size: cover;
}
.nav {width: 100%;height: 60px;background-color:  gray;display: flex;justify-content: left;align-items: center;color: white;
}
.nav img {width: 50px;height: 50px;border-radius: 50%;/* margin-top: 4px; */margin-left: 4px;margin-right: 8px;
}.nav .space {width: 75%;
}.nav a {color: white;text-decoration: none;/* margin-left: 10px; */margin-right: 15px;
}
.nav div {display: flex;justify-content: right;align-items: center;width: 15%;
}
.container {display: flex;justify-content: space-between;align-items: center;margin: 0 auto;height: calc(100% - 50px);width: 100%;
}.container .container-left {height: 100%;width: 30%;background-color: rgba(255,255,255,0.8);
}.container .container-right {height: 100%;width: 70%;background-color: rgba(255,255,255,0.8);overflow: auto;
}
.card {margin-top: 10px;width: 60%;height: 44%;background-color: rgba(255,255,255,0.8);margin-left: 200px;margin-right: 10px;border-radius: 15px;
}
.card img {width: 120px;height: 120px;border-radius: 50%;margin-left: 90px;margin-top: 35px;
}
.card h3 {text-align: center;margin-top: 8px;margin-bottom: 8px;
}
.card a {display: block;text-align: center;color: grey;text-decoration: none;margin-bottom: 20px;
}
.card .counter {display: flex;justify-content: space-around;margin-top: 22px;
}.blog {width: 100%;background-color:rgba(255,255,255,0.8);border-radius: 15px;margin-top: 12px;height: calc(100% - 30px);overflow: auto;
}.blog .title {font-size: 20px;font-weight: 700;text-align: center;padding-top: 20px;
}
.blog .date {color: rgb(47, 213, 255);padding-bottom: 10px;padding-top: 20px;text-align: center;
}
.blog .desc {text-indent: 2em;line-height: 30px;margin-top: 8px;
}.blog .detail {color: black;text-align: center;display: block;width: 140px;height: 30px;margin: 10px auto 0px auto;border: 2px solid rgb(20, 24, 24);line-height: 22px;text-decoration: none;
}




页面实现效果

Snipaste_2024-03-11_17-11-24




博客编辑页

相关代码

blog_edit.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>博客编辑页</title><link rel="stylesheet" href="../css/commom.css"><link rel="stylesheet" href="../css/edit.css"><link rel="stylesheet" href="editor.md/css/editormd.min.css"/>
</head>
<body><div class="nav"><img src="../img/logo.png" alt="图片没加载出来"><span>我的博客系统</span><span class="space"></span><div><a href="blog_list.html">主页</a><a href="blog_edit.html">写博客</a><a href="http://www.baidu.com/">注销</a></div></div><div class="edit_blog_container"><div class="title"><input type="text"><button>发布文章</button></div><div id="editor"></div></div>
</body><!-- 引入 editor.md 的依赖 --><script src="js/jquery.min.js"></script><script src="editor.md/lib/marked.min.js"></script><script src="editor.md/lib/prettify.min.js"></script><script src="editor.md/editormd.js"></script><script>let edit = editormd('editor', {width:"100%",height:"100%",markdown:"###开始编写博客",path:"./editor.md/lib/"}) </script>
</html>

edit.css

.edit_blog_container {height: calc(100% - 50px);width: 100%;
}
input {width: 1000px;height: 60px;margin-top: 5px;border-radius: 8px;border: none;
}
button {width: 200px;height: 60px;margin-top: 5px;margin-left: 5px;border-radius: 8px;background-color: #afefd6;border: none;color: white;font-size: 20px;margin-top: 5px;
}button:active {background-color: gray;
}
.title {display: flex;justify-content: center;align-items: center;
}
#editor {margin-top: 5px;
}




页面实现效果

Snipaste_2024-03-11_17-11-09

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/739461.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于SpringBoot和PotsGIS的各省地震震发可视化分析

目录 前言 一、后台接口研发 1、控制层实现 2、Mapper访问层 3、空间查询分析 二、前端可视化展示 1、主体地图定义 2、行政区划列表定义 3、行政区划定位 三、数据分析 1、北京市 2、广东省 3、青海省 4、湖南省 总结 前言 在之前的博文中&#xff0c;我们…

如何在Linux使用Docker部署Firefox并实现无公网IP访问本地浏览器

文章目录 1. 部署Firefox2. 本地访问Firefox3. Linux安装Cpolar4. 配置Firefox公网地址5. 远程访问Firefox6. 固定Firefox公网地址7. 固定地址访问Firefox Firefox是一款免费开源的网页浏览器&#xff0c;由Mozilla基金会开发和维护。它是第一个成功挑战微软Internet Explorer浏…

【Golang】golang使用三方SDK操作容器指南

【Golang】golang使用三方SDK操作容器指南 大家好 我是寸铁&#x1f44a; 总结了一篇 golang使用三方SDK操作容器✨ 喜欢的小伙伴可以点点关注 &#x1f49d; 这应该是目前全网最全golang使用三方SDK操作容器的指南了✌️ CreateConfig 主要是创建容器的配置信息&#xff0c;常…

【VS Code插件开发】自定义指令实现 git 命令 (九)

&#x1f431; 个人主页&#xff1a;不叫猫先生&#xff0c;公众号&#xff1a;前端舵手 &#x1f64b;‍♂️ 作者简介&#xff1a;前端领域优质作者、阿里云专家博主&#xff0c;共同学习共同进步&#xff0c;一起加油呀&#xff01; ✨优质专栏&#xff1a;VS Code插件开发极…

什么是VR虚拟现实体验店|VR主题馆加盟|元宇宙文化旅游

VR虚拟现实体验店是一种提供虚拟现实技术体验的场所。在这样的店铺里&#xff0c;顾客可以通过专业的设备和技术&#xff0c;体验虚拟现实技术带来的沉浸式感觉。 通常&#xff0c;这些商店提供一系列VR体验&#xff0c;包括互动游戏、沉浸式模拟、虚拟旅游和其他VR内容。客户可…

【linux】02 :Linux基础命令

1.掌握linux系统的目录结构 linux只有一个顶级目录&#xff0c;称之为&#xff1a;根目录。 windows系统有多个顶级目录&#xff0c;即各个盘符。 2.linux路径的描述方式 /在Linux中的表示&#xff1a;出现在开头表示根目录&#xff0c;出现在后面表示层级关系。 3.什么是命…

Early if-conversion - 优化阅读笔记

Early if-conversion 用于对于没有很多可预测指令的乱序CPU。目标是消除可能误预测的条件分支。 来自分支两侧的指令都会被推测性地执行&#xff0c;并使用 cmov 指令选择结果。 // SSAIfConv 类在确定可能的情况下&#xff0c;对SSA形式的机器码执行if-conversion。该类不包…

揭秘建筑类中级职称申报:是否能越过初级直接评审?

揭秘建筑类中级职称申报&#xff1a;是否能越过初级直接评审&#xff1f; 很多人想知道越过初级直接评审建筑类中级职称可以不&#xff1f; 关于越过初级职称/助理工程师直接申报建筑类中级职称&#xff0c;原则上是不行的&#xff0c;实际上分情况而定。如果你有二级建造师也…

前端页面兼容pc和手机端设置,等比例缩小

html页面 <meta name"viewport" content"widthdevice-width, initial-scale0, user-scalableyes,shrink-to-fitno">vue 在public里面的index.html里面设置 <meta name"viewport" content"widthdevice-width,initial-scale1.0,use…

linux ,Windows部署

Linux部署 准备好虚拟机 连接好查看版本&#xff1a;java -version安装jdk 解压命令&#xff1a;tar -zxvf 加jdk的压缩文件名cd /etc 在编辑vim profile文件 在最底下写入&#xff1a; export JAVA_HOME/root/soft/jdk1.8.0_151&#xff08;跟自己的jdk保持一致&#xff0…

SpringSecurity 快速入门

文章目录 1. 认证授权概述1.1 认证授权概念1.1.1 认证1.1.2 授权 1.2 权限数据模型1.3 RBAC权限模型1.3.1 介绍1.3.2 基于角色访问控制1.3.3 基于资源访问控制 1.4 常见认证方式1.4.1 Cookie-Session1.4.2 jwt令牌无状态认证 1.5 技术实现 2. SpringSecurity入门2.1 介绍2.2 入…

「CISP题库精讲」CISP题库习题解析精讲20道

前言 本篇主要对CISP教材第九章《计算环境安全》的一些习题进行讲解&#xff0c;包括20道题&#xff0c;这里只是部分习题&#xff0c;针对第九章可能会多写几章的内容&#xff0c;如果我发布的这些习题里面没有你想找的那道题&#xff0c;你也可以直接私信我&#xff0c;我加…

求根节点到叶节点数字之和

题目链接 求根节点到叶节点数字之和 题目描述 注意点 树中节点的数目在范围 [1, 1000] 内0 < Node.val < 9树的深度不超过10 解答思路 深度优先遍历计算从根节点到叶子节点组成的所有数字&#xff08;每向下一层乘以10&#xff09;&#xff0c;再计算所有的数字之和…

中小型生产企业工业数据采集分析平台 规划生产流程

工业数据采集分析平台是一款优秀的工控自动化软件&#xff0c;可以用于数据采集、实时监测和过程控制、数据传输、系统联动、远程监控等多种应用&#xff0c;数据采集平台通过对设备运行状态及相关参数监视实现保证每个环节都能按照既定方案进行&#xff0c;同时缩短非正常停机…

shiro整合thymeleaf(接上一篇抛出的问题)

在上一篇末尾&#xff0c;讲到如何实现不同身份的用户&#xff0c;有不同的权限&#xff0c;从而看到不同的页面&#xff0c;下面我们就来实现下这个功能 1.导入依赖 <!--shiro整合thymeleaf--><dependency><groupId>com.github.theborakompanioni</group…

python(ogr)处理geojson为本地shp文件

前言 本次所利用的geojson数据来自https://geo.datav.aliyun.com/areas_v3/bound/410000_full.json &#xff0c;如果觉得下方代码看起来不方便&#xff0c;可以来GitHub上来看&#xff0c;在这上面还有一些辅助内容便于理解 GISpjd/GIS-union-Python (github.com)https://gi…

14.WEB渗透测试--Kali Linux(二)

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动&#xff01; 内容参考于&#xff1a; 易锦网校会员专享课 上一个内容&#xff1a;13.WEB渗透测试--Kali Linux&#xff08;一&#xff09;-CSDN博客 netcat简介内容:13.WE…

精品基于Springboot的体育用品租赁租用管理系统的设计与实现

《[含文档PPT源码等]精品基于Springboot的体育用品管理系统的设计与实现[包运行成功]》该项目含有源码、文档、PPT、配套开发软件、软件安装教程、项目发布教程、包运行成功&#xff01; 软件开发环境及开发工具&#xff1a; Java——涉及技术&#xff1a; 前端使用技术&…

【Kotlin】类和对象

1 前言 Kotlin 是面向对象编程语言&#xff0c;与 Java 语言类似&#xff0c;都有类、对象、属性、构造函数、成员函数&#xff0c;都有封装、继承、多态三大特性&#xff0c;不同点如下。 Java 有静态&#xff08;static&#xff09;代码块&#xff0c;Kotlin 没有&#xff1…

Spring AOP常见面试题

目录 一、对于AOP的理解 二、Spring是如何实现AOP的 1、execution表达式 2、annotation 3、基于Spring API&#xff0c;通过xml配置的方式。 4、基于代理实现 三、Spring AOP的实现原理 四、Spring是如何选择使用哪种动态代理 1、Spring Framework 2、Spring Boot 五…