目录
主页
HTML
CSS
文章详细页面
HTML
CSS
登录页面
HTML
CSS
文章编辑页
HTML
CSS
这只是前端的页面组成，还没有接入后端，并不是完全体
主页
HTML
<!DOCTYPE html>
<!-- <html lang="en"> -->
<head>
<meta charset="UTF-8">
<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.css">
</head>
<body>
<!-- 导航栏 -->
<div class="nav">
<!-- logo图片 -->
<img src="image/logo.jpg" alt="" width="50px">
<span class="title">我的博客系统</span>
<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">
<div class="card">
<img src="image/蕾姆.jpg" alt="">
<h2>墨轩</h2>
<a href="#">github链接</a>
<div class="counter">
<span>文章</span>
<span>分类</span>
</div>
<div class="counter">
<span>2</span>
<span>3</span>
</div>
</div>
<!-- 右侧个人信息 -->
</div>
<div class="container-right">
<div class="blog">这是我的第一篇文章</div>
<div class="date">2024-3-27 20:20</div>
<div class="desc">文章内容Lorem ipsum dolor sit amet consectetur, adipisicing elit. At laboriosam quis quos, numquam tenetur cum ipsa architecto nihil, a asperiores error fugit. Praesentium eaque animi esse nemo ut nobis atque.</div>
<a href="blog_detail.html">查看全文 >> </a>
<!-- >是html的> 正常的>无法之间写入 -->
<div class="blog">这是我的第一篇文章</div>
<div class="date">2024-3-27 20:20</div>
<div class="desc">文章内容Lorem ipsum dolor sit amet consectetur, adipisicing elit. At laboriosam quis quos, numquam tenetur cum ipsa architecto nihil, a asperiores error fugit. Praesentium eaque animi esse nemo ut nobis atque.</div>
<a href="#">查看全文 >> </a>
<div class="blog">这是我的第一篇文章</div>
<div class="date">2024-3-27 20:20</div>
<div class="desc">文章内容Lorem ipsum dolor sit amet consectetur, adipisicing elit. At laboriosam quis quos, numquam tenetur cum ipsa architecto nihil, a asperiores error fugit. Praesentium eaque animi esse nemo ut nobis atque.</div>
<a href="#">查看全文 >> </a>
<div class="blog">这是我的第一篇文章</div>
<div class="date">2024-3-27 20:20</div>
<div class="desc">文章内容Lorem ipsum dolor sit amet consectetur, adipisicing elit. At laboriosam quis quos, numquam tenetur cum ipsa architecto nihil, a asperiores error fugit. Praesentium eaque animi esse nemo ut nobis atque.</div>
<a href="#">查看全文 >> </a>
<div class="blog">这是我的第一篇文章</div>
<div class="date">2024-3-27 20:20</div>
<div class="desc">文章内容Lorem ipsum dolor sit amet consectetur, adipisicing elit. At laboriosam quis quos, numquam tenetur cum ipsa architecto nihil, a asperiores error fugit. Praesentium eaque animi esse nemo ut nobis atque.</div>
<a href="#">查看全文 >> </a>
<div class="blog">这是我的第一篇文章</div>
<div class="date">2024-3-27 20:20</div>
<div class="desc">文章内容Lorem ipsum dolor sit amet consectetur, adipisicing elit. At laboriosam quis quos, numquam tenetur cum ipsa architecto nihil, a asperiores error fugit. Praesentium eaque animi esse nemo ut nobis atque.</div>
<a href="#">查看全文 >> </a>
<div class="blog">这是我的第一篇文章</div>
<div class="date">2024-3-27 20:20</div>
<div class="desc">文章内容Lorem ipsum dolor sit amet consectetur, adipisicing elit. At laboriosam quis quos, numquam tenetur cum ipsa architecto nihil, a asperiores error fugit. Praesentium eaque animi esse nemo ut nobis atque.</div>
<a href="#">查看全文 >> </a>
</div>
</div>
</body>
</html>CSS
html,body{
/* 让html和body占满浏览器窗口 */
height: 100%;
width: 100%;
background-image: url(../image/风景图.jpg);
/* background-repeat: no-repeat; */
background-size: cover;
}
.nav{
width: 100%;
height: 50px;
background-color: rgba(50, 50, 50,0.3);
color: white;
/* 开启弹性布局 */
display: flex;
/* 水平居中 */
align-items: center;
}
.nav img{
/* 将图片设为圆的 */
border-radius: 50px;
/* 左侧间距 */
margin-left: 30px;
/* 右侧间距 */
margin-right: 20px;
}
/* 用于隔开我的博客和主页 */
.nav .spacer{
width: 78%;
}
.nav a{
color: white;
/* 上下间隔0 左右6px */
padding: 0 6px;
}
.container{
width: 1000px;
/* 使用这个函数 -直接必须有空格 */
/* 因为是100% 导航栏自带50px 再用100% 会多出50px 所已要减去多出来的50px */
height: calc(100% - 100px);
margin: 0 auto;
/* 让两个div能在同一行 */
display: flex;
/* 元素之间留有空隙 */
justify-content: space-between;
}
.container-left{
height: 30%;
width: 200px;
}
.container-right{
height: 100%;
width: 750px;
background-color: rgba(255, 255, 255, 0.5);
/* 边框圆角 */
border-radius: 10px;
overflow: auto;
}
.card{
background-color: rgba(255,255,255,0.5);
/* 内边距距离 */
padding: 30px;
/* 边框圆角 */
border-radius: 10px;
}
/* 用户图片 */
.card img{
width: 140px;
height: 140px;
border-radius: 70px;
}
/* 用户昵称 */
.card h2{
text-align: center;
/* padding: 10px; */
}
/* 链接属性 */
.card a{
/* 开启弹性布局后 居中 */
display: block;
text-align: center;
}
/* 文章属性 */
.card .counter{
/* 开启弹性布局 */
display: flex;
text-align: center;
/* 文章与分类分开 */
justify-content: space-around;
}
/* 因为右侧文章会变换 所有右侧的css单独出来 */
右侧文章只要这个页面有，所以css是单独出来的
/* 右侧个人信息栏 */
.container-right{
/* 一个em为一个字的长度 */
text-indent: 3em;
/* 距离四个边都有20px的距离 */
padding: 20px;
}
.blog{
text-align: center;
/* 字体大小 */
font-size: 37px;
/* 行间距 上下5 左右0 */
padding: 5px 0;
/* 字体粗细 */
font-weight: 600;
}
.date{
text-align: center;
font-size: 20px;
color: grey;
/* 行间距 上下5 左右0 */
padding: 5px 0;
}
.container-right a{
/* 设置成块级元素 */
display: block;
width: 150px;
height: 30px;
/* 块级元素居中 上下10 左右自适应 */
margin: 10px auto;
/* 边框 粗细 黑色 实习 */
border: 2px black solid;
text-align: center;
color: black;
/* 去除下划线 */
text-decoration: none;
/* 颜色过渡 1s */
transition: all 1s;
}
/* 伪类选择器 鼠标放上去变色 */
.container-right a:hover{
background-color: black;
color: white;
}文章详细页面
HTML
里面包含多个css文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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.css">
<link rel="stylesheet" href="css/blog_detail.css">
</head>
<body>
<!-- 导航栏 -->
<div class="nav">
<!-- logo图片 -->
<img src="image/logo.jpg" alt="" width="50px">
<span class="title">我的博客系统</span>
<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">
<div class="card">
<img src="image/蕾姆.jpg" alt="">
<h2>墨轩</h2>
<a href="#">github链接</a>
<div class="counter">
<span>文章</span>
<span>分类</span>
</div>
<div class="counter">
<span>2</span>
<span>3</span>
</div>
</div>
<!-- 右侧个人信息 -->
</div>
<div class="container-right">
<div class="blog-content">
<h3>我的第一篇博客</h3>
<div class="date">2024-3-27 22:33</div>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
</div>
</div>
</div>
</body>
</html>CSS
.blog-content h3{
text-align: center;
}
登录页面
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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/login.css">
</head>
<body>
<!-- 导航栏 -->
<div class="nav">
<!-- logo图片 -->
<img src="image/logo.jpg" alt="" width="50px">
<span class="title">我的博客系统</span>
<span class="spacer"></span>
<!-- 导航栏 -->
<a href="blog_list.html">主页</a>
<a href="blog_edit.html">写博客</a>
</div>
<!-- 登录板块 -->
<div class="login-container">
<div class="login-dialog">
<p>登录</p>
<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>CSS
.login-container{
height: calc(100% - 50px);
/* 开启弹性布局 block和flex 盒子用flex */
display: flex;
/* 水平居中 */
justify-content: center;
/* 垂直居中 */
align-items: center;
}
.login-dialog{
width: 500px;
height: 300px;
/* 半透明 */
background-color: rgba(255,255,255,0.5);
/* 圆角 */
border-radius: 10px;
}
.login-dialog p{
font-weight: 700;
font-size: 30px;
text-align: center;
}
.login-dialog h3{
padding: 20px 0;
/* 文字水平居中 */
text-align: center;
}
.login-dialog .row{
height: 50px;
display: flex;
justify-content: center;
align-items: center;
}
.login-dialog .row span{
width: 100px;
font-size: 20px;
font-weight: 700;
}
#username, #password{
/* 框大小 */
width: 200px;
height: 40px;
font-size: 24px;
/* 去掉框的边框黑线 */
border: none;
/* 去掉选择时的边框黑线 */
outline: none;
/* 输入字体的缩进 */
padding-left: 5px;
/* 圆角 */
border-radius: 15px;
}
#submit{
width: 300px;
height: 40px;
color: black;
background-color: rgba(255,255,255,0.5);
border-radius: 10px;
/* 去掉边框 */
border: none;
}
/* 点击变色 */
#submit:active{
background-color: gray;
}文章编辑页
这里需要放入editor.md，和JS文件的jquery.min.js的依赖，放入文章编辑的库
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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-container.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">
<!-- logo图片 -->
<img src="image/logo.jpg" alt="" width="50px">
<span class="title">我的博客系统</span>
<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">
<!-- placeholder默认文字 -->
<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: "# 在这里写下一篇博客",
path: "editor.md/lib/"
});
</script>
</body>
</html>CSS
.blog-edit-container{
width: 1000px;
height: calc(100% - 50px);
margin: 0 auto;
}
/* 标题编辑区 */
.title{
height: 50px;
/* 水平方向布局 */
display: flex;
/* 中间有间隙 */
justify-content: space-between;
/* 居中 */
align-items: center;
}
/* 字体 */
#title{
height: 40px;
width: 890px;
font-size: 24px;
padding-left: 5px;
/* 去掉边框轮廓线 */
border: none;
/* 选中时轮廓线 */
outline: none;
border-radius: 10px;
}
#submit{
height: 45px;
width: 100px;
border-radius: 10px;
color: white;
background-color: coral;
border: none;
transition: all 0.5;
}
/* 点击时变色 */
#submit:active{
background-color: gray;
}
#editor {
/* 圆角 */
border-radius: 10px;
/* 因为他是复用editor的 所以现在这个块是子元素 用bc无法显示 */
/* background-color: rgba(255, 255, 255, 0.8); */
/* 用这个就都可以 */
opacity: 80%;
}
