当前位置：首页 > news >正文

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

news 来源：原创 2024/5/9 11:40:15

博客网站前端页面的实现

博客登录页

相关代码

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