文章目录
1. 博客系统
本博客分为四个页面
-
博客登录界面
-
博客主页界面
-
博客编辑界面
-
博客详情界面
1.1 导航栏
可以看出文章界面中都有共同的导航栏.
导航栏的前端代码:
<div class="nav">
<img src="../image/头像.jpg" alt="头像">
<span class="title">我的博客系统</span>
<a href="home.html">主页</a>
<a href="edit.html">创作</a>
<a href="login.html">注销</a>
</div>
common.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
/* background-image: url(../image/1.jpg); */
}
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 博客主页界面
home.html
<!DOCTYPE html>
<html lang="e