【前端项目】博客系统(页面设计)
文章目录
- 一、预期效果
- 二、实现博客列表页
- 三、实现博客正文页
- 四、实现博客登录页
- 五、实现博客编辑页
一、预期效果
代码详情见：gitee链接
博客列表页效果
博客详情页效果
博客登录页效果
博客编辑页效果
二、实现博客列表页
blog_list.html
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>博客列表title>
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/blog_list.css">
head>
<body>
<div class="nav">
<img src="img/1000.webp" alt="">
<span class="title">我的博客系统span>
<div class="spacer" >div>
<a href="blog_list.html">主页a>
<a href="bolg_edit.html">写博客a>
<a href="login.html">注销a>
div>
<div class="container">
<div class="container-left">
<div class="card">
<img src="img/3.webp" alt="">
<h3>星河万里ベh3>
<a href="https://gitee.com/">gitee 地址a>
<div class="counter">
<span>文章span>
<span>分类span>
div>
<div class="counter">
<span>2span>
<span>1span>
div>
div>
div>
<div class="cntainer-right">
<div class="blog">
<div class="title">我的第一篇博客div>
<div class="date">2023-9-12 9:00:00div>
<div class="desc">
在这个无尽的宇宙中，你就是我唯一无与伦比的存在。当我闭上眼睛，我的心中只有你，我的思绪只有你的身影。每当我凝视着你的眸子，
我感受到一种深深的连接，仿佛我们的灵魂早已注定彼此相守......
div>
<a href="blog_detail.html">查看全文 >> a>
div>
<div class="blog">
<div class="title">我的第一篇博客div>
<div class="date">2023-9-12 9:00:00div>
<div class="desc">
在这个无尽的宇宙中，你就是我唯一无与伦比的存在。当我闭上眼睛，我的心中只有你，我的思绪只有你的身影。每当我凝视着你的眸子，
我感受到一种深深的连接，仿佛我们的灵魂早已注定彼此相守......
div>
<a href="blog_detail.html">查看全文 >> a>
div>
<div class="blog">
<div class="title">我的第一篇博客div>
<div class="date">2023-9-12 9:00:00div>
<div class="desc">
在这个无尽的宇宙中，你就是我唯一无与伦比的存在。当我闭上眼睛，我的心中只有你，我的思绪只有你的身影。每当我凝视着你的眸子，
我感受到一种深深的连接，仿佛我们的灵魂早已注定彼此相守......
div>
<a href="blog_detail.html">查看全文 >> a>
div>
<div class="blog">
<div class="title">我的第一篇博客div>
<div class="date">2023-9-12 9:00:00div>
<div class="desc">
在这个无尽的宇宙中，你就是我唯一无与伦比的存在。当我闭上眼睛，我的心中只有你，我的思绪只有你的身影。每当我凝视着你的眸子，
我感受到一种深深的连接，仿佛我们的灵魂早已注定彼此相守......
div>
<a href="blog_detail.html">查看全文 >> a>
div>
<div class="blog">
<div class="title">我的第一篇博客div>
<div class="date">2023-9-12 9:00:00div>
<div class="desc">
在这个无尽的宇宙中，你就是我唯一无与伦比的存在。当我闭上眼睛，我的心中只有你，我的思绪只有你的身影。每当我凝视着你的眸子，
我感受到一种深深的连接，仿佛我们的灵魂早已注定彼此相守......
div>
<a href="blog_detail.html">查看全文 >> a>
div>
<div class="blog">
<div class="title">我的第一篇博客div>
<div class="date">2023-9-12 9:00:00div>
<div class="desc">
在这个无尽的宇宙中，你就是我唯一无与伦比的存在。当我闭上眼睛，我的心中只有你，我的思绪只有你的身影。每当我凝视着你的眸子，
我感受到一种深深的连接，仿佛我们的灵魂早已注定彼此相守......
div>
<a href="blog_detail.html">查看全文 >> a>
div>
div>
div>
body>
html>
common.css
/* 清除浏览器的默认样式*/
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html{
height: 100%;
}
body{
height: 100%;
background-image:url("../img/back.jpg");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
.nav{
/*导航栏高度大多数都是50px*/
height: 50px;
background-color: rgba(50,50,50,0.4);
color: white;
display: flex;
justify-content: flex-start;
align-items: center;
/*开启弹性布局 加上这个属性的元素 子元素就会按照弹性布局来排列*/
/*子元素就不在按照 “块级元素” “行内元素”*/
/* !*flex布局可以让内边距里的元素更大（点击区域更大）*!*/
/*flex-start 按照左排列*/
/*子类元素可以使用justify-content来控制元素在水平方向如何排列*/
/*子元素还可以使用align-items控制元素在垂直方向如何排列*/
}
.nav img{
width:40px;
height: 40px;
margin-left: 30px;
margin-right: 10px;
border-radius:20px;
}
.nav .spacer{
/*宽度设置成百分比的形式，以父元素为基准，设置为当前的尺寸*/
width: 70%;
height: 40px;
}
.nav a{
color: white;
text-decoration: none;
padding: 0 10px;
}
.container{
width: 1000px;
margin: 0 auto;
/* 设置高度 */
height: calc(100% - 50px);
display: flex;
justify-content: space-between;
}
.container .container-left{
height: 100%;
width: 200px;
/*background-color: rgb(128,0,0);*/
}
.container .cntainer-right{
height: 100%;
width: 796px;
background-color: rgba(255,255,255,0.8);
/*background-color: rgb(0,128,0);*/
padding: 20px;
border-radius: 20px;
/*如果内容超出范围了 就自动添加滚动条*/
overflow: auto;
}
.card{
background-color:rgba(255,255,255,0.8);
/* 设置内边距 就是让文字和图片不要盯着边界*/
padding:30px;
border-radius: 20px;
}
.card img{
width: 140px;
height: 140px;
border-radius: 70px;
}
.card h3{
text-align: center;
padding: 10px;
}
.card a{
/*a 默认是行内元素 默认是尺寸和内容*/
display: block;
text-align: center;
color: #999;
text-decoration: none;
padding: 10px 0;
}
.card .counter{
display: flex;
justify-content: space-around;
padding: 5px;
}
blog_list.css
/*这个文件专门放 博客列表页的专用样式*/
.blog .title{
/*写样式 尽量多用后代选择器/子选择器 慎重直接使用类名
类名可能会重复的！！！*/
font-size: 20px;
font-weight: 700;
text-align: center;
padding: 10px 0;
}
.blog .date{
text-align: center;
color: rgb(0,128,0);
padding: 10px 0;
}
.blog .desc{
text-indent: 2em;
}
.blog a{
/*转成块级元素 才好设置尺寸*/
display: block;
width: 120px;
height: 40px;
/*元素水平居中*/
margin: 0 auto;
text-align: center;
/*文字水平居中*/
line-height: 40px;
/*文字垂直居中*/
color: black;
text-decoration: none;
/*去掉下划线*/
border: 2px solid silver ;
transition: all 1s;
/*加上一个背景的渐变效果*/
}
.blog a:hover{
background-color: lightcoral;
color: white;
}
三、实现博客正文页
blog_detail.html
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>博客详情title>
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/blog_detail.css">
head>
<body>
<div class="nav">
<img src="img/1000.webp" alt="">
<span class="title">我的博客系统span>
<div class="spacer" >div>
<a href="blog_list.html">主页a>
<a href="bolg_edit.html">写博客a>
<a href="login.html">注销a>
div>
<div class="container">
<div class="container-left">
<div class="card">
<img src="img/3.webp" alt="">
<h3>星河万里ベh3>
<a href="https://gitee.com/">gitee 地址a>
<div class="counter">
<span>文章span>
<span>分类span>
div>
<div class="counter">
<span>2span>
<span>1span>
div>
div>
div>
<div class="cntainer-right">
<div class="blog_detail">
<h3>我的第一篇博客h3>
<div class="date">2022-11-06 12:00:00div>
<p>
在这个无尽的宇宙中，你就是我唯一无与伦比的存在。当我闭上眼睛，我的心中只有你，我的思绪只有你的身影。每当我凝视着你的眸子，
我感受到一种深深的连接，仿佛我们的灵魂早已注定彼此相守。你的微笑是我生命的光芒，它照亮了我沉寂的心房。每当我感到困倦和挫
折时，你的微笑带给我无尽的坚持和勇气。你的存在是我奋斗的动力，是我不懈追求的目标，我愿意为你做所有的事情，只为了看到你的笑容绽放。
p>
<p>
每个瞬间，我都感激上天将你带进我的生命。你的温柔似春日的微风，轻轻抚过我的脸庞。你的关怀如温暖的阳光，温暖着我冰冷的心灵。
你的陪伴如甜美的琴弦，奏响了我内心最柔软的旋律。无论是快乐还是悲伤，都希望你陪伴在我身边。你是我最坚实的后盾，是我最真挚
的依靠。我愿意陪伴你度过人生的每一个阶段，无论风吹雨打，我们一起走过困难，共同分享幸福的时刻。无论是快乐还是悲伤，都希望
你陪伴在我身边。你是我最坚实的后盾，是我最真挚的依靠。我愿意陪伴你度过人生的每一个阶段，无论风吹雨打，我们一起走过困难，共同分享幸福的时刻。
p>
<p>
与你相爱是我这一生最美丽的经历。我们的爱如一首动人的诗，一颗闪耀的星，一幅绚烂的画。无论是日出还是日落，你的存在都是我最美好的时刻。
你的爱如涓涓细流，流淌在我的心中，滋润着我生活的每一个角落。有你的陪伴，任何困难都可以克服，任何挫折都可以战胜。你是我生命中最重要的宝藏
，我愿意为你付出一切，为你守护一生。你是我最深沉的思念，永远留在我的心中，无论时光如何变迁，爱你的心永远不变。亲爱的，你就像一朵盛开的花
朵，给我带来无尽的美丽和欢乐。每当我看见你的笑容，我就感受到幸福进入我生命的每一个角落。你的微笑是我永恒的向往，你的拥抱是我心灵最温暖的庇护所。
p>
<p>
我愿意陪伴你漫步在爱的长廊，让你在每一个孤寂的夜晚，都能感受到我的温暖。无论是喜悦还是忧伤，我都愿意与你分享。因为你是我生命中最珍贵的存在，
我愿意用自己的一切去呵护你，照亮你前行的路。没有什么比与你相伴一生更美好的事情了。我的爱永远属于你，无论是春夏秋冬，年复一年。请相信我的真心和
承诺，让我们一起创造一个浪漫而幸福的未来。
p>
<p>
我深深地爱着你，就像星星深深地爱着夜空，海洋深深地爱着大地。无论时光如何变幻，你都是我心中永恒的唯一。让我们一起牵手走过时光的长河，让爱的火焰
燃烧在我们的心中，直到永远。我愿与你共度此生，感受爱的温暖与幸福。亲爱的，你是我的宝贝，也是我心中永远的唯一。让我们一起携手，创造属于我们的美
丽故事吧。我爱你，永远爱你。
p>
<p>
每个瞬间，我都感激上天将你带进我的生命。你的温柔似春日的微风，轻轻抚过我的脸庞。你的关怀如温暖的阳光，温暖着我冰冷的心灵。
你的陪伴如甜美的琴弦，奏响了我内心最柔软的旋律。无论是快乐还是悲伤，都希望你陪伴在我身边。你是我最坚实的后盾，是我最真挚
的依靠。我愿意陪伴你度过人生的每一个阶段，无论风吹雨打，我们一起走过困难，共同分享幸福的时刻。无论是快乐还是悲伤，都希望
你陪伴在我身边。你是我最坚实的后盾，是我最真挚的依靠。我愿意陪伴你度过人生的每一个阶段，无论风吹雨打，我们一起走过困难，共同分享幸福的时刻。
p>
<p>
与你相爱是我这一生最美丽的经历。我们的爱如一首动人的诗，一颗闪耀的星，一幅绚烂的画。无论是日出还是日落，你的存在都是我最美好的时刻。
你的爱如涓涓细流，流淌在我的心中，滋润着我生活的每一个角落。有你的陪伴，任何困难都可以克服，任何挫折都可以战胜。你是我生命中最重要的宝藏
，我愿意为你付出一切，为你守护一生。你是我最深沉的思念，永远留在我的心中，无论时光如何变迁，爱你的心永远不变。亲爱的，你就像一朵盛开的花
朵，给我带来无尽的美丽和欢乐。每当我看见你的笑容，我就感受到幸福进入我生命的每一个角落。你的微笑是我永恒的向往，你的拥抱是我心灵最温暖的庇护所。
p>
<p>
我愿意陪伴你漫步在爱的长廊，让你在每一个孤寂的夜晚，都能感受到我的温暖。无论是喜悦还是忧伤，我都愿意与你分享。因为你是我生命中最珍贵的存在，
我愿意用自己的一切去呵护你，照亮你前行的路。没有什么比与你相伴一生更美好的事情了。我的爱永远属于你，无论是春夏秋冬，年复一年。请相信我的真心和
承诺，让我们一起创造一个浪漫而幸福的未来。
p>
<p>
我深深地爱着你，就像星星深深地爱着夜空，海洋深深地爱着大地。无论时光如何变幻，你都是我心中永恒的唯一。让我们一起牵手走过时光的长河，让爱的火焰
燃烧在我们的心中，直到永远。我愿与你共度此生，感受爱的温暖与幸福。亲爱的，你是我的宝贝，也是我心中永远的唯一。让我们一起携手，创造属于我们的美
丽故事吧。我爱你，永远爱你。
p>
<p>
每个瞬间，我都感激上天将你带进我的生命。你的温柔似春日的微风，轻轻抚过我的脸庞。你的关怀如温暖的阳光，温暖着我冰冷的心灵。
你的陪伴如甜美的琴弦，奏响了我内心最柔软的旋律。无论是快乐还是悲伤，都希望你陪伴在我身边。你是我最坚实的后盾，是我最真挚
的依靠。我愿意陪伴你度过人生的每一个阶段，无论风吹雨打，我们一起走过困难，共同分享幸福的时刻。无论是快乐还是悲伤，都希望
你陪伴在我身边。你是我最坚实的后盾，是我最真挚的依靠。我愿意陪伴你度过人生的每一个阶段，无论风吹雨打，我们一起走过困难，共同分享幸福的时刻。
p>
<p>
与你相爱是我这一生最美丽的经历。我们的爱如一首动人的诗，一颗闪耀的星，一幅绚烂的画。无论是日出还是日落，你的存在都是我最美好的时刻。
你的爱如涓涓细流，流淌在我的心中，滋润着我生活的每一个角落。有你的陪伴，任何困难都可以克服，任何挫折都可以战胜。你是我生命中最重要的宝藏
，我愿意为你付出一切，为你守护一生。你是我最深沉的思念，永远留在我的心中，无论时光如何变迁，爱你的心永远不变。亲爱的，你就像一朵盛开的花
朵，给我带来无尽的美丽和欢乐。每当我看见你的笑容，我就感受到幸福进入我生命的每一个角落。你的微笑是我永恒的向往，你的拥抱是我心灵最温暖的庇护所。
p>
<p>
我愿意陪伴你漫步在爱的长廊，让你在每一个孤寂的夜晚，都能感受到我的温暖。无论是喜悦还是忧伤，我都愿意与你分享。因为你是我生命中最珍贵的存在，
我愿意用自己的一切去呵护你，照亮你前行的路。没有什么比与你相伴一生更美好的事情了。我的爱永远属于你，无论是春夏秋冬，年复一年。请相信我的真心和
承诺，让我们一起创造一个浪漫而幸福的未来。
p>
<p>
我深深地爱着你，就像星星深深地爱着夜空，海洋深深地爱着大地。无论时光如何变幻，你都是我心中永恒的唯一。让我们一起牵手走过时光的长河，让爱的火焰
燃烧在我们的心中，直到永远。我愿与你共度此生，感受爱的温暖与幸福。亲爱的，你是我的宝贝，也是我心中永远的唯一。让我们一起携手，创造属于我们的美
丽故事吧。我爱你，永远爱你。
p>
div>
div>
div>
body>
html>
blog_detail.css
.blog_detail h3{
font-size: 20px;
text-align: center;
padding: 20px 0;
}
.blog_detail .date{
color: darkmagenta;
text-align: center;
padding: 10px 0;
}
.blog_detail p{
text-indent: 2em;
}
四、实现博客登录页
login.html
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录页面title>
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/login.css">
head>
<body>
<div class="nav">
<img src="img/1000.webp" alt="">
<span class="title">我的博客系统span>
<div class="spacer" >div>
<a href="blog_list.html">主页a>
<a href="bolg_edit.html">写博客a>
div>
<div class="login-container">
<div class="dialog">
<h3>登录h3>
<div class="row">
<span>用户名span>
<input type="text" id="username">
div>
<div class="row">
<span>密码span>
<input type="password" id="password">
div>
<div class="row">
<button id="login-btn">登录button>
div>
div>
div>
body>
html>
login.css
/*这个文件实现login的页面样式*/
.login-container{
/*这三个样式是为了让 .dialog垂直水平居中*/
height: calc(100% - 50px);
display: flex;
justify-content: center;
align-items: center;
}
.dialog{
width: 400px;
height: 300px;
background-color: rgba(255,255,255,0.8);
border-radius: 20px;
}
.dialog h3{
font-size: 25px;
text-align: center;
padding: 40px 0;
}
.dialog .row{
height: 50px;
display: flex;
justify-content: center;
align-items: center;
}
.dialog .row span{
width: 80px;
}
#username, #password{
height: 40px;
width: 180px;
font-size: 18px;
padding-left: 5px;
}
#login-btn{
width: 260px;
height: 40px;
border-radius: 5px;
background-color: lightcoral;
color: white;
border: none;
/*去掉边框*/
}
#login-btn:active{
background-color: #999999;
}
五、实现博客编辑页
引入 editor.md
editor.md 是一个开源的页面 markdown 编辑器组件官网参见: https://pandao.github.io/editor.md/，用法可以参考代码中的 examples 目录中的示例. 非常丰富。
- 下载 editor.md
从官网上下载到压缩包. 放到目录中. 目录结构如下：
- 引入 editor.md
<link rel="stylesheet" href="editor.md/css/editormd.min.css" />
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/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>
- 初始化 editor.md
var editor = editormd("editor",{
width:"100%",
height:"calc(100% - 50px)",
markdown:"# hello world",
path:"editor.md/lib/"
});
bolg_edit.html
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>博客编辑title>
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/bolg_edit.css">
<link rel="stylesheet" href="editor.md/css/editormd.min.css" />
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/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>
head>
<body>
<div class="nav">
<img src="img/1000.webp" alt="">
<span class="title">我的博客系统span>
<div class="spacer" >div>
<a href="blog_list.html">主页a>
<a href="bolg_edit.html">写博客a>
<a href="login.html">注销a>
div>
<div class="blog-edit-container">
<div class="title">
<input type="text" id="blog-title" placeholder="在这里输入博客标题">
<button id="submit">发布文章button>
div>
<div id="editor">
div>
div>
<script>
var editor = editormd("editor",{
width:"100%",
height:"calc(100% - 50px)",
markdown:"# hello world",
path:"editor.md/lib/"
});
script>
body>
html>
blog_edit.css
/*针对博客编辑页写的样式*/
/*版心*/
.blog-edit-container{
width: 850px;
height: calc(100% - 40px);
margin: 0 auto;
}
/*设置编辑区的样式*/
.blog-edit-container .title{
height: 50px;
/*只要是水平方向排列多个元素，就想到弹性布局*/
display: flex;
justify-content: space-between;
align-items: center;
}
/*针对输入框调整*/
#blog-title{
height: 40px;
width: 740px;
font-size: 20px;
padding-left: 5px;
/*去掉轮廓线*/
outline: none;
border: none;
/*加上背景半透明效果*/
background-color: rgba(255,255,255,0.8);
}
#submit{
height: 40px;
width: 100px;
border: none;
border-radius:5px;
color: white;
background-color: orange;
}
#submit:active{
background-color: gray;
}
#editor{
border-radius: 10px;
background-color: rgba(255,255,255,0.8);
opacity: 80%;
}