博客页面---前端

主页

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">查看全文 &gt;&gt; </a><!-- &gt;是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="#">查看全文 &gt;&gt; </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="#">查看全文 &gt;&gt; </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="#">查看全文 &gt;&gt; </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="#">查看全文 &gt;&gt; </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="#">查看全文 &gt;&gt; </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="#">查看全文 &gt;&gt; </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%;
}