博客系统！
main
博客列表
我的第一篇博客
2022-11-06 12:00:00
今天起，认真写博客 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Placeat quos illum quasi consequuntur non quisquam amet, dignissimos voluptatum magnam aspernatur ipsum at voluptates velit aut quia. Blanditiis accusantium in natus?
查看全文 >>
我的第一篇博客
2022-11-06 12:00:00
今天起，认真写博客 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Placeat quos illum quasi consequuntur non quisquam amet, dignissimos voluptatum magnam aspernatur ipsum at voluptates velit aut quia. Blanditiis accusantium in natus?
查看全文 >>
我的第一篇博客
2022-11-06 12:00:00
今天起，认真写博客 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Placeat quos illum quasi consequuntur non quisquam amet, dignissimos voluptatum magnam aspernatur ipsum at voluptates velit aut quia. Blanditiis accusantium in natus?
查看全文 >>
我的第一篇博客
2022-11-06 12:00:00
今天起，认真写博客 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Placeat quos illum quasi consequuntur non quisquam amet, dignissimos voluptatum magnam aspernatur ipsum at voluptates velit aut quia. Blanditiis accusantium in natus?
查看全文 >>
我的第一篇博客
2022-11-06 12:00:00
今天起，认真写博客 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Placeat quos illum quasi consequuntur non quisquam amet, dignissimos voluptatum magnam aspernatur ipsum at voluptates velit aut quia. Blanditiis accusantium in natus?
查看全文 >>
我的第一篇博客
2022-11-06 12:00:00
今天起，认真写博客 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Placeat quos illum quasi consequuntur non quisquam amet, dignissimos voluptatum magnam aspernatur ipsum at voluptates velit aut quia. Blanditiis accusantium in natus?
查看全文 >>
我的第一篇博客
2022-11-06 12:00:00
今天起，认真写博客 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Placeat quos illum quasi consequuntur non quisquam amet, dignissimos voluptatum magnam aspernatur ipsum at voluptates velit aut quia. Blanditiis accusantium in natus?
查看全文 >>
对应main的css
/* 先清除浏览器的默认样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
/* 使我们的边框和内边距不会变大 */
}
.nav {
/* 导航栏高度普遍都是50px */
height: 50px;
background-color: rgba(50, 50, 50, 0.4);
color: white;
display: flex;
/* 开启弹性布局，加上这个属性的元素的子元素 */
/* 子元素就会按照弹性布局来排列 */
/* 就是子元素不会按照块级元素和行内元素的规则工作 */
/* 元素都会统一排列成一行*/
justify-content: flex-start;
/* 控制元素在水平方向如何排列 */
align-items: center;
/* 控制元素在垂直方向如何排列 */
}
html{
/* 设置html的高度和浏览器窗口一样高 */
height: 100%;
}
body {
height: 100%;
/* 让body和他的父亲元素，也就是html一样高*/
background-image: url(back.png);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
.nav img{
width: 45px;
height: 40px;
margin-left: 30px;
/* 设置左边图片边距 */
margin-right: 10px;
/* 设置图片右侧和文字的间隔 */
border-radius: 20px;
/* 设置成图片头像成圆形 */
}
.nav .spacer {
/* 把宽度设置成百分比形式，以父元素为基准设置当前的尺寸 */
width: 70%;
height: 40px;
}
.nav a{
color: white;
/* 设置文本颜色 */
text-decoration: none;
/* 去掉下划线 */
padding: 0 10px;
/* 垂直方向0像素内边距 水平方向10内边距 */
/* 这里采用内边距把字体隔开是为了让字体点击区域更大些 */
}
.container {
/* 设定成固定宽度并且水平居中 */
width: 1000px;
height: calc(100% - 50px);
/* 减号旁边必须要写个空格，不然会误认为是命名 */
/* calc是个库函数，用于计算，这里写的是导航栏的高度 */
margin: 0 auto;
/* 为了让left和right可以水平居中布局，因此使用弹性布局 */
display: flex;
/* 让两者之间带上空白· */
justify-content: space-between;
}
.container .container-left{
height: 100%;
width: 200px;
}
.container .container-right {
height: 100%;
width: 796px;
background-color: rgba(255, 255, 255, 0.5);
border-radius: 20px;
padding: 20px;
overflow: auto;
/* 如果内容超出范围，自动添加滚动条 */
}
.card {
background-color: rgba(255, 255, 255, 0.5);
/* 设置内边距，为了让文字和图片不顶着边距 */
padding: 30px;
border-radius: 20px;
/* 设置大边框的圆角矩形 */
}
.card img {
width: 140px;
height: 140px;
border-radius: 70px;
/* 设置头像的圆角矩形 */
}
.card h3 {
text-align: center;
/* 文字水平居中 */
padding: 10px;
}
.card a{
/* 块级元素直接设置文字居中是没有效果的，要转换成行内元素 */
display: block;
text-align: center;
color: #999;
text-decoration: none;
padding: 10px 0;
}
.card .counter {
display: flex;
justify-content: space-around;
/* 控制元素在水平方向 设置文字环绕 */
padding: 5px;
}login
login
登录
用户名
密码
对应login的css
/* 这个文件实现登录页的样式 */
.login-container {
height: calc(100% - 50px);
display: flex;
justify-content: center;
align-items: center;
/* 为了让.dialog垂直水平居中 */
}
.dialog {
width: 400px;
height: 300px;
background-color: rgba(255,255,255,0.8);
border-radius: 20px;
}
.dialog h3 {
font-size: 20px;
text-align: center;
padding: 40px 0;
}
.dialog .row{
/* 针对对话框设置 */
height: 50px;
display: flex;
justify-content: center;
align-items: center;
}
.dialog .row span {
/* 针对文本设置 */
width: 80px;
}
#username, #password {
/* 针对输入框内容设置 */
height: 40px;
width: 180px;
font-size: 18px;
padding-left: 5px;
}
#login-button {
width: 260px;
height: 40px;
color: white;
background-color: green;
border-radius: 5px ;
border: none;
}
/* 点击的时候就变成灰色 */
#login-button:active {
background-color: grey;
}blog_list（文章列表）
/* 这个文件专门放博客列表页的专用样式 */
/* 针对博客的容器进行设置 */
.blog {
}
/* 写样式多用后代选择器 因为直接写类名可能会重复 后代选择器还会增加可读性 */
.blog .title {
font-size: 20px;
font-weight: 700;
/* 设置文字水平居中*/
text-align: center;
padding: 10px 0;
}
.blog .date{
text-align: center;
color: rgb(0, 128, 0);
padding: 10px 0;
}
.blog .desc {
/* 设置首行缩进 */
text-indent: 2em;
}
.blog a {
/* 转成块级元素，才好设置尺寸 */
display: block;
width: 120px;
height: 40px;
/* 设置元素水平居中 */
margin: 10px auto;
/* 设置文字水平居中 */
text-align: center;
/* 设置文字垂直居中 */
line-height: 40px;
color: black;
/* 改颜色为黑色 */
text-decoration: none;
/* 去掉下划线 */
border: 2px solid black;
/* 加上边框 */
/* 加上一个背景渐变效果 */
transition: all 0.4s;
}
/* 鼠标悬停的时候有个动态效果 */
.blog a:hover {
background-color: black;
color: white;
}blog_edit（博客编辑主页）
博客编辑
blog_edit的css
/* 针对博客编辑页写的样式 */
/* 版心 */
.blog-edit-container {
width: 1000px;
height: calc(100% - 50px);
margin: 0 auto;
}
/* 设置标题编辑区的样式 */
.blog-edit-container .title {
height: 50px;
/* 水平方向排列多个元素就要用到弹性布局 */
display: flex;
justify-content: space-around;
align-items: center;
}
/* 设置输入框高度宽度 */
#blog-title {
height: 40px;
width: 895px;
font-size: 20px;
padding-left: 5px;
/* 去掉轮廓线（）选中输入框时候的黑圈 */
outline: none;
/* 去掉边框 */
border: none;
border-radius: 5px;
background-color: rgba(255,255,255,0.8);
}
/* 设置文字框的高度宽度 */
#submit {
height: 40px;
width: 100px;
border: none;
border-radius: 5px;
background-color: orange;
}
/* 点击按钮的效果 */
#submit:active {
color: gray;
background-color: white;
}
#editor {
border-radius: 10px;
/* background-color: rgba(255,255,255,0.8); */
/* 不用上面那个设置透明度，因为子元素太多会妨碍效果 */
/* 使用opacity来设置透明度，同样可以对子元素其效果 */
opacity: 80%;
/* 这个值是百分号，相当于rgba中的0,8 */
}blog_detail （博客详细页）
博客详情页
我的第一篇博客
2022 11-06
今天起，认真写博客 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Placeat quos illum quasi consequuntur non quisquam amet, dignissimos voluptatum magnam aspernatur ipsum at voluptates velit aut quia. Blanditiis accusantium in natus?
blog_detail的css
/* 给博客详情页提供样式 */
.blog-detail h3 {
font-size: 20px;
text-align: center;
padding: 20px 0;
}
.blog-detail data {
color: rgb(0, 128, 0);
padding: 10px 0;
}
.blog-detail p{
text-indent: 2em;
}