本文已参与「新人创作礼」活动，一起开启掘金创作之路。
博客详情页
因为这个页面的导航栏还有人物介绍是一样的，所以只要直接复制过来就好了。
呈现效果如下
结果预览
我们发现，预览效果比上面多的只是一点文本内容，这个其实并不难，我们现在网页里面添加内容，然后穿件一个CSS文件来添加样式。
页面代码
<div class="right">
<!-- 用这个标签来包裹整个博客内容 -->
<div class="blog-detial">
<!-- 标题 -->
<h3>我的第一篇博客</h3>
<!-- 时间 -->
<div class="time">2022-09-28</div>
<!-- 内容 -->
<p>
这边是填充内容 Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Delectus deserunt quibusdam fugit, vitae cum recusandae totam quidem,
pariatur in iusto eius tempore vel,
aperiam illum magni sint eaque expedita veniam.
</p>
</div>
</div>
样式代码
/* 博客详情页的样式 */
.blog-detial{
padding: 30px;
}
/* 标题的样式 */
.blog-detial h3{
text-align: center;
padding: 15px 0px;
}
/* 时间的样式 */
.blog-detial .time{
text-align: center;
padding: 5px 0px;
color: rgb(47, 190, 242);
}
/* 博客内容的样式 */
.blog-detial p{
text-indent: 2em;
padding: 10px 0px;
}
上面就是所有的代码，整体来说是简单的。但是上面还是会有问题的，那就是如果博客内容太多，就会导致页面变形。就会让多出来的内容，超过我们原本想的页面。我们解决的方法就是把滚动条放到我们的right里面加一个属性
overflow: auto;
这个我们可以加在我们原本的common.css里面的right。做到固定背景。
登录页面
因为登录页面的导航栏也是跟之前的一样的，所以我们依旧可以复制一下。
效果预览
代码
<!-- 页面结构 -->
<div class="login-con">
<!-- 登录标签的详情 -->
<div class="login-detail">
<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">
<!-- onclick可以实现页面的跳转功能 -->
<button onclick="location.href=('blog_list.html')">提交</button>
</div>
</div>
</div>
上面的都是页面代码，下面我们看看样式代码的样子吧
/* 登录页面的样式文件 */
.login-con{
width: 100%;
height: calc(100% - 50px);
align-items: center;
display: flex;
/*垂直居中*/
align-items: center;
/* 水平居中 */
justify-content: center;
}
/* 这个是框的样式。 */
.login-con .login-detail{
width: 350px;
height: 350px;
background-color:rgba(255,255,255,0.8);
border-radius: 20px;
}
/* 这个是登录那个标题的样式 */
.login-detail h3{
text-align: center;
padding: 50px 0px;
}
/* 这个是框里面内容的样式 */
.login-detail .row{
height: 50px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* 这个是用户名,密码,提交按钮的样式 */
.login-detail .row span{
/* 把span变成一个块级元素，这样好操作 */
display: block;
width: 100px;
font-weight: 700;
}
/* 这个是文本框的样式 */
.login-detail .row input{
width: 200px;
height: 40px;
/* 方框里面的内容样式 */
font-size: 20px;
line-height: 40px;
padding-left: 10px;
border-radius: 15px;
/* 去掉边框 */
border: none;
/* 去掉轮廓线 */
outline: none;
}
/* 这个是提交按钮的样式 */
.login-detail .row button{
width: 300px;
height: 50px;
border-radius: 10px;
color: wheat;
background-color: rgba(38, 224, 253, 0.826);
margin-top: 20px;
border: none;
outline: none;
}
/* 这个是按钮按下之后的样式 */
.row button:active{
/* 按下按钮之后,按钮会变灰 */
background-color: #666;
}
博客编辑页面
效果预览
<!-- 引入editor的路径 -->
<link rel="stylesheet" href="./editor.md/css/editormd.min.css">
<!-- 这个jquery不是editor的一部分,而是editor的依赖 -->
<script src="js/jquery.min.js"></script>
<script src="./editor.md/lib/prettify.min.js"></script>
<script src="./editor.md/editormd.js"></script>
jquery可以到网上去找一下jquery cdn，找一个网址，然后打开那个网址，复制里面的内容，放到自己创建的js/jquery.min.js文件里面。
接下来我们要初始化一下编辑器。
<script>
let editor = editormd("editor" ,{
// 设置尺寸
// 编辑器的宽度
width: "100%",
// 编辑器的高度
height: "500px",
// 编辑器里面初始化的内容
markdown: "# 在这里写博客",
// 指定依赖的路径
path: "editor.md/lib"
});
</script>
接下来我们看一下页面的结构
<!-- 包裹博客编辑页内容 -->
<div class="blog-edit-con">
<div class="title">
<input type="text">
<button>发布文章</button>
</div>
<!-- 放置编辑器 -->
<div id="editor">
</div>
</div>
接下来是样式
/* 博客编辑页专用的样式 */
.blog-edit-con{
width: 1000px;
height: calc(100% - 50);
margin: 0px auto;
}
/* 编辑页上面一部分的样式 */
.blog-edit-con .title{
width: 100%;
height: 50px;
display: flex;
align-items: center;
justify-content: space-between;
}
/* 编辑页上面的输入框样式 */
.blog-edit-con .title input{
width: 895px;
height: 40px;
border: none;
outline: none;
border-radius: 10px;
font-size: 20px;
line-height: 40px;
padding-left: 10px;
border-radius: 15px;
background-color: rgba(255, 255, 255, 0.626);
}
/* 发布文章的按钮样式 */
.blog-edit-con .title button{
width: 95px;
height: 40px;
color: wheat;
background-color: rgba(38, 224, 253, 0.826);
border-radius: 10px;
border: none;
outline: none;
}
/* 发布文章按钮的动画效果 */
.blog-edit-con .title button:active{
background-color: #666;
}
/* 编辑文本框的样式 */
#editor{
border-radius: 10px;
/* 设置透明度,之前设置的透明度,只能影响当前的,不能影响子元素 */
opacity: 80%;
}
