个人博客网站前端页面的实现
博客网站前端页面的实现
博客登录页
相关代码
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;
}
页面实现效果
博客列表页
相关代码
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">查看全文>></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">查看全文>></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">查看全文>></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">查看全文>></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">查看全文>></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">查看全文>></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">查看全文>></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">查看全文>></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;
}
页面实现效果
博客正文页
相关代码
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;
}
页面实现效果
博客编辑页
相关代码
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;
}
页面实现效果
相关文章：
个人博客网站前端页面的实现
博客网站前端页面的实现 博客登录页 相关代码 login.html <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><…...
Kotlin Retrofit 网络请求
一、添加依赖： //Retrofit 网络请求implementation("com.squareup.retrofit2:retrofit:2.3.0")implementation("com.squareup.retrofit2:converter-gson:2.3.0")//json转换 二、创建单例类： package com.example.buju.httpimport …...
pyside6 pytq PyDracula QVideoWidget视频只有声音没有画面
解决方案： 先不使用框架，纯pyside6代码，如果添加视频有画面有声音，那可以排除是硬件问题，如果没有画面只有声音，可能是视频解码器无法解码，换个格式的视频文件如果只有使用PyDracula 出问题&am…...
Python爬网页，不确定网页的编码，不需要用第三方库
Python爬网页，不确定网页的编码，不需要用第三方库，自己写个判断，乱拳打死老师傅 detect试了，不好用 apparent_encoding试了，不好用 encoding试了，不好用 headers里get试了，不好用…...
Web测试的基础流程（外加测试过程需要的注意5点）
前言 在Web工程过程中，基于Web系统的测试、确认和验收是一项重要而富有挑战性的工作。基于Web的系统测试与传统的软件测试不同，它不但需要检查和验证是否按照设计的要求运行，而且还要测试系统在不同用户的浏览器端的显示是否合适。 重要的是…...
项目解决方案：视频监控接入和录像系统设计方案（下）
目 录 1.概述 2. 建设目标及需求 2.1建设总目标 2.2 需求描述 2.3 需求分析 3.设计依据与设计原则 3.1设计依据 3.2 设计原则 4.建设方案设计 4.1系统方案设计 4.2组网说明 5.产品介绍 5.1视频监控综合资源管理平台介绍 5.2视频录像服务器和存储 5.2.…...
Python爬虫-使用Prefect框架实现一个可视化爬虫项目
前言 本文是该专栏的第19篇，后面会持续分享python爬虫干货知识，记得关注。 相信有的同学，在处理爬虫项目的时候，有时也会需要你将爬虫项目进行一个可视化展示，方便管理者能及时详细的了解当前爬虫任务的执行进度以及执行情况，甚至需要做一个爬虫监控预警的可视化任务。 …...
[hive面试真题]-基础理论篇
hive的工作流程 hive中分区表,分桶表 工作中hive分区表的应用示例 发现hive分区中的数据不对怎么处理 hive出现code 1 2 3 什么原因 ,怎么处理 工作中hive常见的文件格式 .压缩格式 工作时常用的hive函数 谈谈对窗口函数的理解 hive中如果出现数据倾斜 ,怎么发现 ,怎么…...
【其他】sd卡的照片在相机上能看到在电脑上却看不到
sd卡的照片在相机上能看到在电脑上却看不到 前情提要：太长不看版解决办法：思路：一、首先考虑恢复数据二、 解决文件后缀是exe的问题 前情提要： 在相机里可以看到照片和视频，但是SD卡通过读卡器插入电脑看不到&#x…...
Linux 之六：系统性能监控和挂载
系统性能 Linux系统中，有许多命令用于监测和分析性能指标。以下是一些常用的Linux性能分析命令： top：实时查看并监控CPU、内存以及各个进程的资源占用情况。htop（需要安装）：一个增强版的 top 命令&#x…...
【Web】浅聊Java反序列化之C3P0——JNDI注入利用
目录 简介 原理分析 EXP 前文：【Web】浅聊Java反序列化之C3P0——URLClassLoader利用 【Web】浅聊Java反序列化之C3P0——不出网Hex字节码加载利用 简介 出网的情况下，这个C3P0的Gadget可以和fastjson，Snake YAML , JYAML,Yamlbeans , …...
Java项目：基于Springboot+vue实现的付费自习室系统设计与实现（源码+数据库+毕业论文）附含微信小程序端代码
一、项目简介 本项目是一套基于Springbootvue实现的付费自习室系统 包含：项目源码、数据库脚本等，该项目附带全部源码可作为毕设使用。 项目都经过严格调试，eclipse或者idea 确保可以运行！ 该系统功能完善、界面美观、操作简单、…...
C++写食堂菜品管理系统
说明：本博文来自CSDN-问答板块，题主提问。 需要：学校拟开发一套食堂菜品管理系统，以便对菜品和同学们的评价进行管理，其中包含如下信息： 商户：商户名称、柜面位置、电话…… 菜品：菜品编号、菜品名称、价格、所属商户…… 学生：注册账号、昵称、电话…… 食堂里的商户…...
vue 在线预览word
1 mammoth 先找的是mammoth这个插件yarn add mammoth,版本是1,7.0 参考网上的示例使用如下： import mammoth from "mammoth"; const vHtml ref("") const readExcelFromRemoteFile (url) >{var xhr new XMLHttpRequest();xhr.open("…...
七彩虹八渐变 外贸建站公司wordpress模板
进出口水果wordpress外贸模板 漂亮水果wordpress外贸模板，做水果进出品生意的外贸公司自建站官网模板。 https://www.jianzhanpress.com/?p3516 玩具wordpress外贸模板 简洁玩具wordpress外贸模板，适合做跨境电商外贸公司使用的wordpres外贸s网站主题…...
[C++] C++生成随机数
一、简介 在C语言中常使用srand()random()的方式生成随机数，该方式并不是一个很好的随据说生成方法，一方面是因为其生成的随机数质量较低，另一方面其随机数范围也有所限制。在C11中推荐使用随机数引擎的方式生成随机数。 如何高效得生成高质…...
web开发——前端html、css、JavaScript学习总结(持续更新中.......)
目录模版 1 html:结构标签/属性文本标记: mark文本设置:删除线del / 下划线ins/ 加粗b / 强调的文本em / 重要的文本 strong超链接: a联系信息: addressdiv 定义文档中的分区或节: div行元素:spanhtml结构: main / section / articlenav表格:table html中各种标签/属性的英文扩…...
LeetCode 2044.统计按位或能得到最大值的子集数目
给你一个整数数组 nums ，请你找出 nums 子集 按位或 可能得到的 最大值 ，并返回按位或能得到最大值的 不同非空子集的数目 。 如果数组 a 可以由数组 b 删除一些元素（或不删除）得到，则认为数组 a 是数组 b 的一个 子集…...
Selenium自动化测试细节讲解
与以前瀑布式开发模式不同，现在软件测试人员具有使用自动化工具执行测试用例套件的优势，而以前，测试人员习惯于通过测试脚本执行来完成测试。 但自动化测试的目的不是完全摆脱手动测试，而是最大程度地减少手动运行的测试。自动化…...
强化学习工具箱（Matlab）
1、Get Started 1.1、MDP环境下训练强化学习智能体 MDP环境如下图 每个圆圈代表一个状态每个状态都有上或下的选择智能体从状态 1 开始智能体接收的奖励值为图中状态转移的值训练目标是最大化累计奖励 （1）创建 MDP 环境 创建一个具有 8 个状态和 2 …...
ubuntu搭建nfs服务centos挂载访问
在Ubuntu上设置NFS服务器 在Ubuntu上，你可以使用apt包管理器来安装NFS服务器。打开终端并运行： sudo apt update sudo apt install nfs-kernel-server创建共享目录 创建一个目录用于共享，例如/shared： sudo mkdir /shared sud…...
线程与协程
1. 线程与协程 1.1. “函数调用级别”的切换、上下文切换 1. 函数调用级别的切换 “函数调用级别的切换”是指：像函数调用/返回一样轻量地完成任务切换。 举例说明： 当你在程序中写一个函数调用： funcA() 然后 funcA 执行完后返回&…...
【SQL学习笔记1】增删改查+多表连接全解析（内附SQL免费在线练习工具）
可以使用Sqliteviz这个网站免费编写sql语句，它能够让用户直接在浏览器内练习SQL的语法，不需要安装任何软件。 链接如下： sqliteviz 注意： 在转写SQL语法时，关键字之间有一个特定的顺序，这个顺序会影响到…...
安宝特方案丨船舶智造的“AR+AI+作业标准化管理解决方案”（装配）
船舶制造装配管理现状：装配工作依赖人工经验，装配工人凭借长期实践积累的操作技巧完成零部件组装。企业通常制定了装配作业指导书，但在实际执行中，工人对指导书的理解和遵循程度参差不齐。 船舶装配过程中的挑战与需求 挑战 (1…...
莫兰迪高级灰总结计划简约商务通用PPT模版
莫兰迪高级灰总结计划简约商务通用PPT模版，莫兰迪调色板清新简约工作汇报PPT模版，莫兰迪时尚风极简设计PPT模版，大学生毕业论文答辩PPT模版，莫兰迪配色总结计划简约商务通用PPT模版，莫兰迪商务汇报PPT模版，…...
多模态图像修复系统：基于深度学习的图片修复实现
多模态图像修复系统：基于深度学习的图片修复实现 1. 系统概述 本系统使用多模态大模型（Stable Diffusion Inpainting）实现图像修复功能，结合文本描述和图片输入，对指定区域进行内容修复。系统包含完整的数据处理、模型训练、推理部署流程。 import torch import numpy …...
关于uniapp展示PDF的解决方案
在 UniApp 的 H5 环境中使用 pdf-vue3 组件可以实现完整的 PDF 预览功能。以下是详细实现步骤和注意事项： 一、安装依赖 安装 pdf-vue3 和 PDF.js 核心库： npm install pdf-vue3 pdfjs-dist二、基本使用示例 <template><view class"con…...
tomcat入门
1 tomcat 是什么 apache开发的web服务器可以为java web程序提供运行环境tomcat是一款高效，稳定，易于使用的web服务器tomcathttp服务器Servlet服务器 2 tomcat 目录介绍 -bin #存放tomcat的脚本 -conf #存放tomcat的配置文件 ---catalina.policy #to…...
Monorepo架构: Nx Cloud 扩展能力与缓存加速
借助 Nx Cloud 实现项目协同与加速构建 1 ） 缓存工作原理分析 在了解了本地缓存和远程缓存之后，我们来探究缓存是如何工作的。以计算文件的哈希串为例，若后续运行任务时文件哈希串未变，系统会直接使用对应的输出和制品文件。 2 …...
HTTPS证书一年多少钱？
HTTPS证书作为保障网站数据传输安全的重要工具，成为众多网站运营者的必备选择。然而，面对市场上种类繁多的HTTPS证书，其一年费用究竟是多少，又受哪些因素影响呢？ 首先，HTTPS证书通常在PinTrust这样的专业平…...