一 : 综述
博客系统是一个典型的web程序,有前端页面,也有后端代码,同时需要进行前后端交互,本节内容主要实现前端页面.
基本结构 :
二 : 博客列表页
2.1导航栏
页面结构 :
样式 :
1.起手式
整个页面的设置
单独导航栏的设置
导航栏图标的设置
占位
a标签的设置(三个按钮)
最终的导航栏效果 :
2.2实现页面主体
页面结构 :
样式 :
整体容器样式设置
左右界面设置
头像设置
最终的左侧界面效果 :
右侧标题 , 日期 ,正文
查看全文的按钮
右侧界面最终效果 :
整个博客列表页最终效果 :
2.3具体代码
blog_list.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>博客列表页</title>
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/blog_list.css">
</head>
<body>
<!--导航栏-->
<div class="nav">
<img src="image/tubiao.jpg" alt="">
<sapn class="title">我的博客系统</sapn>
<!--用这个spacer来占位-->
<span class="spacer"></span>
<!--按钮-->
<a href="blog_list.html">主页</a>
<a href="blog_edit.html">编辑页</a>
<a href="#">注销</a>
</div>
<!--页面主体-->
<div class="container">
<!--左侧个人信息-->
<div class="container-left">
<!-- 用.card表示用户信息 -->
<div class="card">
<img src="image/touxiang.jpg" alt="">
<h3>老白在这</h3>
<a href="#">gitee地址</a>
<div class="counter">
<span>文章</span>
<span>分类</span>
</div>
<div class="counter">
<span>5</span>
<span>8</span>
</div>
</div>
</div>
<!--右侧内容详情-->
<div class="container-right">
<!-- 此处表示一篇博客 -->
<div class="blog">
<div class="title">第一篇博客</div>
<div class="date">2022-10-05 20:45:35</div>
<div class="desc">从今天起,做一个幸福的人 Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto quaerat harum rerum magnam sapiente voluptatem, ea minima. Mollitia maxime odio harum ducimus voluptatum debitis voluptate exercitationem, error officia, vitae amet?
<a href="#">查看全文 >></a>
</div>
</div>
<div class="blog">
<div class="title">第二篇博客</div>
<div class="date">2022-10-06 14:45:35</div>
<div class="desc">俱往矣,数风流人物,还看今朝 Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto quaerat harum rerum magnam sapiente voluptatem, ea minima. Mollitia maxime odio harum ducimus voluptatum debitis voluptate exercitationem, error officia, vitae amet?
<a href="#">查看全文 >></a>
</div>
</div>
</div>
</body>
</html>
common.css
/*这是起手式,一般都一样*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
height: 100%;
background-image: url(../image/beijng.jpg);
background-repeat : no-repeat;
background-position: center center;
background-size: cover;
}
.nav {
width:100%;
height: 50px;
background-color: rgba(130,130,130,0.5);
color:blanchedalmond;
display: flex;
align-items: center;
}
.nav img {
width: 40px;
height: 40px;
border-radius: 20px;
margin-left: 30px;
margin-right: 10px;
}
.nav .spacer {
width: 70%;
}
.nav a {
color: rgba(255,255,255);
text-decoration: none;
padding:0 10px ;
}
.container {
width: 1000px;
height: calc(100%-50px);
margin: 0 auto;
/*实现左右布局,使用flex*/
display: flex;
justify-content: space-between;
}
.container-left {
height: 100%;
width: 200px;
}
.container-right {
height: 100%;
width: 795px;
background-color: rgba(255,255,255,0.8);
border-radius: 10px;
/*溢出之后如果内容多,自动加滚动条*/
overflow: auto ;
}
.card {
background-color: rgba(255,255,255,0.8);
border-radius: 10px;
padding: 30px;
}
/*用户头像*/
.card img {
width:140px;
height:140px;
border-radius: 70px;
}
/*用户名*/
.card h3 {
text-align:center;
padding: 10px;
}
/*gitee链接*/
.card a {
display: block;
text-align: center;
text-decoration: none;
padding: 10px;
color :#aaa;
}
/*文章和分类*/
.card .counter {
display: flex;
padding:5px;
justify-content: space-around;
}
blog_list.css
.blog {
width: 100%;
padding: 20px;
}
/*标题*/
.blog .title {
font-size: 20px;
font-weight: 700;
text-align: center;
padding: 10px 0;
}
/*日期*/
.blog .date {
color: cadetblue;
text-align: center;
padding: 5px;
}
/*首行缩进两字符*/
.blog .desc {
text-indent: 2em;
font-style: inherit;
}
/*查看全文的按钮*/
.blog a{
text-align: center;
display: block;
width:130px;
height: 40px;
margin:10px auto;
line-height: 40px;
border: 2px black solid;
color: black;
text-decoration: none;
transition: all 0.5s;
}
.blog a:hover {
background-color: #333;
color:#fff
}
2.4实现效果
三 : 博客详情页
3.1具体代码
blog_detail.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>博客详情页</title>
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/blog_detail.css">
</head>
<body>
<!-- 导航栏 -->
<div class="nav">
<img src="image/tubiao.jpg" alt="">
<span class="title">我的博客系统</span>
<!-- 这个 spacer 用来占位 -->
<span class="spacer"></span>
<!-- 来几个按钮 -->
<a href="blog_list.html">主页</a>
<a href="blog_edit.html">写博客</a>
<a href="#">注销</a>
</div>
<!--页面主体-->
<div class="container">
<!--左侧个人信息-->
<div class="container-left">
<!-- 用.card表示用户信息 -->
<div class="card">
<img src="image/touxiang.jpg" alt="">
<h3>老白在这</h3>
<a href="#">gitee地址</a>
<div class="counter">
<span>文章</span>
<span>分类</span>
</div>
<div class="counter">
<span>5</span>
<span>8</span>
</div>
</div>
</div>
<!-- 右侧内容详情 -->
<div class="container-right">
<!-- 这个 div 里来放博客的内容 -->
<div class="blog-content">
<!-- 博客标题 -->
<h3>我的第一篇博客</h3>
<!-- 博客时间 -->
<div class="date">2022-10-06 20:45:35</div>
<!-- 博客正文 -->
<div>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla, dolore corporis hic at ut temporibus perspiciatis quisquam quibusdam doloremque aut consequuntur a voluptate reprehenderit odio, placeat minus iusto ratione eaque.</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla, dolore corporis hic at ut temporibus perspiciatis quisquam quibusdam doloremque aut consequuntur a voluptate reprehenderit odio, placeat minus iusto ratione eaque.</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla, dolore corporis hic at ut temporibus perspiciatis quisquam quibusdam doloremque aut consequuntur a voluptate reprehenderit odio, placeat minus iusto ratione eaque.</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla, dolore corporis hic at ut temporibus perspiciatis quisquam quibusdam doloremque aut consequuntur a voluptate reprehenderit odio, placeat minus iusto ratione eaque.</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla, dolore corporis hic at ut temporibus perspiciatis quisquam quibusdam doloremque aut consequuntur a voluptate reprehenderit odio, placeat minus iusto ratione eaque.</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla, dolore corporis hic at ut temporibus perspiciatis quisquam quibusdam doloremque aut consequuntur a voluptate reprehenderit odio, placeat minus iusto ratione eaque.</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla, dolore corporis hic at ut temporibus perspiciatis quisquam quibusdam doloremque aut consequuntur a voluptate reprehenderit odio, placeat minus iusto ratione eaque.</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla, dolore corporis hic at ut temporibus perspiciatis quisquam quibusdam doloremque aut consequuntur a voluptate reprehenderit odio, placeat minus iusto ratione eaque.</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla, dolore corporis hic at ut temporibus perspiciatis quisquam quibusdam doloremque aut consequuntur a voluptate reprehenderit odio, placeat minus iusto ratione eaque.</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla, dolore corporis hic at ut temporibus perspiciatis quisquam quibusdam doloremque aut consequuntur a voluptate reprehenderit odio, placeat minus iusto ratione eaque.</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla, dolore corporis hic at ut temporibus perspiciatis quisquam quibusdam doloremque aut consequuntur a voluptate reprehenderit odio, placeat minus iusto ratione eaque.</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla, dolore corporis hic at ut temporibus perspiciatis quisquam quibusdam doloremque aut consequuntur a voluptate reprehenderit odio, placeat minus iusto ratione eaque.</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla, dolore corporis hic at ut temporibus perspiciatis quisquam quibusdam doloremque aut consequuntur a voluptate reprehenderit odio, placeat minus iusto ratione eaque.</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla, dolore corporis hic at ut temporibus perspiciatis quisquam quibusdam doloremque aut consequuntur a voluptate reprehenderit odio, placeat minus iusto ratione eaque.</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla, dolore corporis hic at ut temporibus perspiciatis quisquam quibusdam doloremque aut consequuntur a voluptate reprehenderit odio, placeat minus iusto ratione eaque.</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla, dolore corporis hic at ut temporibus perspiciatis quisquam quibusdam doloremque aut consequuntur a voluptate reprehenderit odio, placeat minus iusto ratione eaque.</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla, dolore corporis hic at ut temporibus perspiciatis quisquam quibusdam doloremque aut consequuntur a voluptate reprehenderit odio, placeat minus iusto ratione eaque.</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla, dolore corporis hic at ut temporibus perspiciatis quisquam quibusdam doloremque aut consequuntur a voluptate reprehenderit odio, placeat minus iusto ratione eaque.</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla, dolore corporis hic at ut temporibus perspiciatis quisquam quibusdam doloremque aut consequuntur a voluptate reprehenderit odio, placeat minus iusto ratione eaque.</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla, dolore corporis hic at ut temporibus perspiciatis quisquam quibusdam doloremque aut consequuntur a voluptate reprehenderit odio, placeat minus iusto ratione eaque.</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla, dolore corporis hic at ut temporibus perspiciatis quisquam quibusdam doloremque aut consequuntur a voluptate reprehenderit odio, placeat minus iusto ratione eaque.</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla, dolore corporis hic at ut temporibus perspiciatis quisquam quibusdam doloremque aut consequuntur a voluptate reprehenderit odio, placeat minus iusto ratione eaque.</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla, dolore corporis hic at ut temporibus perspiciatis quisquam quibusdam doloremque aut consequuntur a voluptate reprehenderit odio, placeat minus iusto ratione eaque.</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla, dolore corporis hic at ut temporibus perspiciatis quisquam quibusdam doloremque aut consequuntur a voluptate reprehenderit odio, placeat minus iusto ratione eaque.</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla, dolore corporis hic at ut temporibus perspiciatis quisquam quibusdam doloremque aut consequuntur a voluptate reprehenderit odio, placeat minus iusto ratione eaque.</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla, dolore corporis hic at ut temporibus perspiciatis quisquam quibusdam doloremque aut consequuntur a voluptate reprehenderit odio, placeat minus iusto ratione eaque.</p>
</div>
</div>
</div>
</div>
</body>
</html>
blog_detail.css
.blog-content {
padding: 30px;
}
.blog-content h3 {
text-align: center;
padding: 20px 0;
}
.blog-content .date {
text-align: center;
color:cadetblue;
padding: 10px 0;
}
.blog-content p {
text-indent: 2em;
}
3.2实现效果
四 : 博客登录页
4.1具体代码
blog_login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>博客登录页</title>
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/blog_login.css">
</head>
<body>
<!--导航栏-->
<div class="nav">
<img src="image/tubiao.jpg" alt="">
<sapn class="title">我的博客系统</sapn>
<!--用这个spacer来占位-->
<span class="sapcer"></span>
<!--按钮-->
<a href="blog_list.html">主页</a>
<a href="blog_edit.html">编辑页</a>
</div>
<!-- 构造页面 -->
<div class="login-container">
<div class="login-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">
<input type="button" value="提交" id="submit">
</div>
</div>
</div>
</body>
</html>
blog_login.css
.login-container {
height:calc(100%-50px);
display: flex;
/*水平居中*/
justify-content: center;
/*垂直居中*/
align-items: center;
}
.login-dialog {
width: 400px;
height: 350px;
background-color: reba(255,255,255,0.8);
border-radius: 10px;
}
.login-dialog h3 {
padding:75px 0;
text-align: center;
}
.login-dialog .row {
height:50px;
display: flex;
justify-content: center;
align-items: center;
}
.login-dialog .row span {
width: 100px;
font-weight: 700;
}
#username, #password {
width: 200px;
height: 40px;
font-size: 24px;
border: none;
outline: none;
padding-left: 5px;
border-radius: 10px;
background-color: beige;
}
#submit {
width: 300px;
height: 40px;
color: white;
background-color: #98FB98;
border: none;
border-radius: 10px;
}
#submit:active {
background-color: grey;
}
4.2实现效果
五 : 博客编辑页
5.1editor.md组件导入
自己实现markdown是有一定难度的 . 所以这里最关键的步骤 ,是使用markdown组件 , 下面我将介绍如何导入这个组件 .
第一步 : 网页搜索editor.md , 进入官网下载 .
第二步 : 将下载好的文件夹放在总的博客系统目录下 .
editor.md这个组件要想正常使用 , 还依赖一个东西jquery . jquery是js世界最知名的库 !
第三步 : 在页面中引入依赖的js , css等文件 . (参考官方文档) .
<!-- 引入 editor.md 的依赖 -->
<link rel="stylesheet" href="editor.md/css/editormd.min.css" />
<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>
需要注意目录结构 !
第四步 : 在js代码中 , 初始化editor.md .
<script>
// 初始化编辑器
var editor = editormd("editor", {
width:"100%",
height: "calc(100% - 50px)",
// 编辑器中的初始内容
markdown: "# 在这里写下一篇博客",
// 指定 editor.md 依赖的插件路径
path: "editor.md/lib/"
});
</script>
在书写这部分代码时 , 还有一些注意事项 :
5.2具体代码
blog_edit.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>博客编辑页</title>
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/blog_edit.css">
<!-- 引入 editor.md 的依赖 -->
<link rel="stylesheet" href="editor.md/css/editormd.min.css" />
<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>
</head>
<body>
<!-- 导航栏 -->
<div class="nav">
<img src="image/tubiao.jpg" alt="">
<span class="title">我的博客系统</span>
<!-- 这个 spacer 用来占位 -->
<span class="spacer"></span>
<!-- 来几个按钮 -->
<a href="blog_list.html">主页</a>
<a href="blog_edit.html">写博客</a>
<a href="#">注销</a>
</div>
<div class="blog-edit-container">
<!-- 标题编辑区 -->
<div class="title">
<input type="text" id="title" placeholder="请输入文章标题">
<input type="button" id="submit" value="发布文章">
</div>
<!-- 博客编辑器标签 -->
<div id="editor">
</div>
</div>
<script>
// 初始化编辑器
var editor = editormd("editor", {
width: "100%",
// 设定编辑器高度
height: "calc(100% - 50px)",
// 编辑器中的初始内容
markdown: "# 在这里写下一篇博客",
// 指定 editor.md 依赖的插件路径
path: "editor.md/lib/"
});
</script>
</body>
</html>
blog_edit.css
.blog-edit-container {
width: 1000px;
height: calc(100% - 50px);
margin: 0 auto;
}
.title {
height: 50px;
display: flex;
align-items: center;
justify-content: space-between;
}
#title {
width: 895px;
height: 40px;
border-radius: 10px;
border: none;
outline: none;
font-size: 22px;
padding-left: 5px;
background-color: rgba(255, 255, 255, 0.8);
}
#submit {
width: 100px;
height: 40px;
border-radius: 10px;
color: white;
background-color: orange;
border: none;
outline: none;
}
#submit:active {
background-color: rgb(32, 22, 22);
}
#editor {
border-radius: 10px;
/* background-color: rgba(255, 255, 255, 0.8); */
opacity: 80%;
}
5.3实现效果
至此 , 博客系统的前端部分代码全部完成 !