- 1. 博客系统
- 1.1 导航栏
- 1.2 博客主页界面
- 1.3 博客详情界面
- 1.4 博客登陆界面
- 1.5 博客编辑界面
本博客分为四个页面
-
博客登录界面
-
博客主页界面
-
博客编辑界面
-
博客详情界面
可以看出文章界面中都有共同的导航栏.
导航栏的前端代码:
common.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,body{
height: 100%;
background-image: url(../image/1.jpg);
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}
.nav {
width: 100%;
height: 50px;
background-color: rgba(54, 54, 54,0.36);
display: flex;
justify-content: left;
align-items: center;
}
.nav img {
width: 40px;
height: 40px;
margin: 0 10px 0 20px;
border-radius: 50%;
}
.nav .title{
width:83%;
color:white;
}
.nav a{
width: 50px;
color:white;
text-decoration: none;
}
.parent{
width: 1000px;
height: calc(100% - 50px);
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
}
.parent .left{
height: 100%;
width: 200px;
}
.parent .right {
height: 100%;
width: 795px;
background-color: rgba(255,255,255,0.8);
border-radius: 10px;
}
.left .card{
background-color: rgba(255,255,255,0.8);
border-radius: 10px;
padding: 30px;
}
.left .card img {
width: 140px;
height: 140px;
border-radius: 50%;
padding: 10px;
}
.left .card .name{
display: block;
font-size: 30px;
font-weight: 700;
text-align: center;
padding: 5px;
}
.left .card a{
display: block;
width: 140px;
text-decoration: none;
color: gray;
text-align: center;
padding: 5px;
}
.left .card .one {
display: flex;
justify-content: space-around;
align-items: center;
padding: 10px;
}
1.2 博客主页界面
https://blog.csdn.net/wwzzzzzzzzzzzzz/article/details/home.html
Document
我的第一篇博客
class="date">2022-4-17
今天开始我要认真写博客 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore similique, nobis labore, officiis harum vel amet iste enim, cupiditate eveniet dolores optio eligendi in dicta veniam obcaecati rerum voluptas ipsum.
查看全文">>">>
我的第二篇博客
class="date">2022-4-18
昨天开始我要认真写博客 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore similique, nobis labore, officiis harum vel amet iste enim, cupiditate eveniet dolores optio eligendi in dicta veniam obcaecati rerum voluptas ipsum.
查看全文">>">>
list.css
.article .title{
text-align: center;
margin: 10px;
}
.article .date{
display: block;
color:green;
text-decoration: none;
text-align: center;
margin: 5px;
}
.article .desc {
text-indent: 2em;
margin: 5px;
}
.article .more{
display: block;
width: 100px;
height: 30px;
line-height: 30px;
text-align: center;
margin: 0 auto;
text-decoration: none;
border: 1px solid black;
color:black;
}
.article .more:active{
background-color: black;
color:white;
}
1.3 博客详情界面
https://blog.csdn.net/wwzzzzzzzzzzzzz/article/details/art.html
Document
我的第一篇博客
class="date">2022-4-17
今天开始我要认真写博客 Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque eveniet alias aperiam explicabo rerum odit, voluptatibus nesciunt ducimus nihil officia excepturi possimus, quos incidunt est quidem ad iure dolor adipisci.
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Architecto laborum nemo quasi, rem, ab totam temporibus sapiente commodi beatae deleniti cum? Quos, ipsam dolores sit minus voluptatem repellendus maiores est?
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sint amet nihil odit obcaecati aspernatur, totam quas dolores reprehenderit quam officiis tempore explicabo laboriosam aut sit sunt, possimus culpa expedita quis?
moreList.css
.article .title{
text-align: center;
margin: 10px;
}
.article .date{
display: block;
color:green;
text-decoration: none;
text-align: center;
margin: 5px;
}
.article .desc {
text-indent: 2em;
margin: 5px;
}
.article p{
margin-top: 15px;
}
1.4 博客登陆界面
https://blog.csdn.net/wwzzzzzzzzzzzzz/article/details/login.html
Document
登录
class="name">用户名
class="name">密码
login.css
#one {
height: calc(100% - 50px);
display: flex;
justify-content: center;
align-items: center;
}
.login {
background-color: rgba(255,255,255,0.8);
width: 400px;
padding: 25px;
border-radius: 10px;
padding-bottom: 50px;
}
.login .text {
font-size: 25px;
font-weight: 400;
text-align: center;
margin: 25px;
}
.login .one{
display: flex;
justify-content: center;
align-items: center;
}
.login .one .name {
width: 100px;
height: 50px;
line-height: 50px;
font-weight: 600;
}
.login .one input{
width: 200px;
height: 30px;
border-radius: 5px;
padding: 3px;
border:none;
}
.login .submit button{
display: block;
width: 300px;
height: 40px;
background-color: rgb(41, 128, 0);
margin: 0 auto;
color: white;
border: none;
border-radius: 5px;
}
.login .submit button:hover{
background-color: rgba(41,128,0,0.8);
}
.login .submit button:active{
background-color: white;
color:rgb(41, 128, 0);
}
1.5 博客编辑界面
这里我们采用的是别人实现好的markdown编辑器
https://pandao.github.io/editor.md/
下载之后放到项目目录里
在https://blog.csdn.net/wwzzzzzzzzzzzzz/article/details/edit.html中映入依赖
https://blog.csdn.net/wwzzzzzzzzzzzzz/article/details/edit.html
Document
edit.css
.leader{
width: 1000px;
height: calc(100% - 50px);
margin: 0 auto;
}
.leader .empOne{
display: flex;
justify-content: center;
align-items: center;
}
.leader .empOne .title{
width: 800px;
height: 40px;
border-radius: 8px;
outline: none;
border:1px solid rgba(0,0,0,0.2);
padding-left: 5px;
background-color: rgba(255,255,255,0.8);
}
.leader .empOne .publish {
margin: 10px;
width: 180px;
height: 40px;
border-radius: 8px;
border: none;
color:white;
background-color: rgb(255,127,39);
}
.leader .empOne .publish:hover{
background-color: rgb(255,127,39,0.6);
}
.leader .empOne .publish:active{
background-color: #fff;
}
#editor{
border-radius: 8px;
opacity: 80%;
}
这是用来设置编辑页面的属性
