文章目录
- 博客系统
-
- 博客列表页
- 博客详情页
- 博客登陆页
- 博客编辑页
博客系统
前段时间学了一点儿前端知识，主要是：
1、HTML常用标签
2、CSS选择器 + 常用样式
3、JS的基础语法
4、DOM API 常用方法
只是浅浅的学习了一点。不过依靠这些做一个勉勉强强的博客系统还是能行的~
总结一下最近的学习把，感觉前端还是比较好入门的。但是也仅仅只是入门好入而已哈哈哈~
考虑到我主要以后还是往后端开发走，所以前端只是浅浅的学习了，不至于以后遇到前端代码看不懂。
接下来就带大家一步步的入门一个仿CSDN博客系统~
如果有不懂的地方都有在注释中详细写出。
先随便来看看个页面的成效
博客列表页
来看看这里需要注意的地方有哪些~：到时候弄代码的时候要分开一个个突破。
大致就是这样，在不同页面也大同小异。我们一个一个来看~
博客列表页
这里我们主要要做的东西是博客列表页
感谢大佬强哥的完美注释。
首先我们的目标就是做出上图的头标签~~
为了能够在后续过程中，添加样式等操作，建议都引入一个类属性。大家做的时候可以把图片换成自己喜欢的。只需要修改src双引号中的地址即可。现在我们来运行一下我们的代码。
现在是不是感觉非常的丑哈哈哈。但是现在的抖音美女哪个不化妆呢？。现在我们给我们的页面也加上美颜修饰一下。
我们另外建立一个文件。专门用于全局的CSS。
感谢大佬强哥的完美注释。
我觉得注释已经非常非常完整了。就不再细琐了。继续运行我们的代码、
现在是不是就有牌面多了。像那么一回事了哈哈哈~~
我们来继续完善：接下来就是弄出具体的框架
首先，先分出左右结构：
接下来分别完善一下左右结构：
弄完这些之后。我们来看看现在的效果是如何的：
显然是不符合我们的预期设计的。现在我们在刚才的CSS代码基础上继续进行添加：
做完这部分美化之后，我们再来看看效果：
这个列表页就做好了。完整代码如下：
首先是HTML代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>博客主页</title><link rel="stylesheet" href="all.css"><link rel="stylesheet" href="boke1.css">
</head>
<body><!-- 导航栏 --><!-- 为了能够在后续过程中，添加样式等操作，建议都引入一个类属性 --><div class="navigation"><img src="123.jpg" alt=""><span>我的博客系统</span><!-- 空白元素，用于站位置 --><div class="spacer"></div><a href="bloghome.html">主页</a><a href="writingblog.html">写博客</a><a href="#">注销</a></div><!-- 这里的 .container 作为页面的版心 --><div class="container"><!-- 左侧用户信息区 --><div class="left"><!-- 表示整个用户信息区域 --><div class="card"><img src="123.jpg" alt=""><!-- 空格符 --><h3>Dark And Grey</h3><a href="#">github 地址</a><div class="counter"><span>文章</span><span>分类</span></div><div class="counter"><span>2</span><span>1</span></div></div></div><!-- 右侧内容区 --><div class="right"><!-- 一个 blog 对应一篇博客 --><div class="blog"><div class="title">我的第一篇博客</div><!-- 博客发布时间 --><div class="date">2022-05-16 12:48:00</div><!-- 博客内容摘要 --><div class="desc"><!-- 输入 lorem 可以UI及生成一句话 -->每天代码八小时，健康幸福一辈子Lorem ipsum dolor sit, amet consectetur adipisicing elit. Id numquam vitae voluptate, veniam ipsa placeat! Consectetur eligendi quia quibusdam, mollitia eos totam quod repellendus veritatis, iste natus odio nihil ea.</div><!-- 注意！这里不能直接写 > 号 --><!-- 因为会被 HTML认为是标签，而导致无法识别 --><!-- 这里就需要用转义字符：大于号的转义字符 就是 > --><a href="#">查看全文 >> </a></div><!-- 一个 blog 对应一篇博客 --><div class="blog"><div class="title">我的第二篇博客</div><!-- 博客发布时间 --><div class="date">2022-05-16 19:52:00</div><!-- 博客内容摘要 --><div class="desc"><!-- 输入 lorem 可以UI及生成一句话 -->每天代码八小时，健康幸福一辈子Lorem ipsum dolor sit, amet consectetur adipisicing elit. Id numquam vitae voluptate, veniam ipsa placeat! Consectetur eligendi quia quibusdam, mollitia eos totam quod repellendus veritatis, iste natus odio nihil ea.</div><!-- 注意！这里不能直接写 > 号 --><!-- 因为会被 HTML认为是标签，而导致无法识别 --><!-- 这里就需要用转义字符：大于号的转义字符 就是 > --><a href="#">查看全文 >> </a></div></div></div>
</body>
</html>
然后是boke1.css块代码：
/* 这个文件中专门写和博客列表页相关的样式 */
/*这里得感谢大佬强哥总结的注释*/
.blog{/* blog的宽度 和 父元素right是一样的 */width: 100%;/* 高度如果不设置，就取决于内容高度的总和 *//* 所以，我们这里不去设置 *//* 设置 每一篇博客的间距，通过 设置内边距 */padding: 20px;
}/* 标题 */
.blog .title{/* 居中 */text-align: center;/* 字体大小 */font-size: 22px;/* 字体粗细 */font-weight: bold;/* 设置边距 *//* 上边边距 10px，左右0px（因为blog里面已经设置了啦20px） */padding: 10px 0;
}/* 日期 */
.blog .date{/* 文本居中 */text-align: center;/* 字体颜色 */color: rgb(204, 33, 204);/* 边距 */padding: 10px;
}/* 自然段 */
.blog .desc{text-indent: 2em;
}/* 查看按钮 */
.blog a{/* 将 a标签 设置为 块级元素，方便设置尺寸 和 边距 */display: block;/* 尺寸 */width: 140px;height: 40px;/* 去掉下划线 */text-decoration: none;/* 字体颜色 */color: black;/* 文本内容居中 */text-align: center;/* 文本框垂直居中 */line-height: 40px;/* 文本框水平居中位置 */margin: 10px auto;/* 边框: 边框线条粗细2px，颜色：黑色，边框线条：实线 */border: 2px black solid;/* 如果想让变化的过程变得柔和一些，就可以加上过渡效果 */transition: all 0.5s;
}/* 伪类选择器 */
.blog a:hover{background-color: orange;
}最后是我们后面的页面中会共同用到的全局all.css代码块
/* 放置一些各个页面都会用到的公共样式 */
/* 导航栏就是属于每个页面都会用到的公共样式 *//* 首先，我们需要去掉浏览器样式 */
*{margin: 0;padding: 0;box-sizing: border-box;
}/* 给整个页面加上背景 */
html,body{/* html 的父元素就是浏览器窗口 *//* 此处的100%，意思是 html 元素的高度 和 浏览器一样高*//* body 的元素是 html *//* 其意思不言而喻，就是 “继承父亲的财产” */height: 100%;/* 加上背景图 *//* .. 是指 当前 common 文件的父级目录 *//* 我存放的图片的地方，就与它的父级目录是同一级 */background-image: url(99.jpg);/* 拒绝平铺 */background-repeat: no-repeat;/* 图片覆盖整个页面 */background-size: cover;/* 图片处于剧痛位置 */background-position: center;
}/* 导航栏样式 */
.navigation{width: 100%;/* 一般这里的尺寸都是设计稿规定好了的 *//* 但是这里并没有，所以这里的尺寸，自己决定 */height: 50px;/* 由于导航栏的背景颜色属于一种半透明的状态 *//* 所以我们要使用 rgba 的方式来进行处理 *//* 颜色你们自己发挥 *//* 需要注意的 透明度alpha 是一个 0 - 1 之间数字*/background-color: rgba(55,20,11, 0.6);/* 由于里面的logo，标题，连接之类的都是水平一行来进行排列的 *//* 所以，这里我们就需要用到弹性布局 */display: flex;/* 实现元素 垂直居中的效果。 */align-items: center;color: orange;}.navigation img{/* 将图片缩小一段 *//* 上期上下左右都留一点空位 */width: 40px;height: 40px;/* 将图片设置为原型 */border-radius: 50%;/* 设置 内/外边距 */margin-left: 30px;margin-right: 10px;
}.navigation .spacer{/* 相对于父元素的宽度，占比百分之70 */width: 80%;
}.navigation a{/* 去掉下划线 */text-decoration: none;/* 设置标签之间的间距 *//* 上下内边距0px，左右10px */padding: 0 10px;color: orange;
}/* 接下来是 版心相关的样式 */.container{/* 注意！既然要留有空白，那么宽度就不能是100% */width: 1000px;/* 版心的理想高度：页面高度 减去 导航栏的高度 */height: calc(100% - 50px);/* 水平居中 *//* 上下外边距为 0，左右边距由浏览器自动调整 */margin: 0 auto;display: flex;justify-content: space-between;
}/* 版心的左侧部分 */
.container .left{height: 100%;width: 200px;/* background-color: red; */
}
/* 版心的右侧部分 */
.container .right{height: 100%;/* 父类container 的宽度为1000px *//* 左侧栏占了200px */width: 795px;/* background-color: blue; *//* 背景颜色 */background-color: rgba(255, 255, 255,0.75);/* 边框圆角 */border-radius: 20px;/* 处理溢出问题 *//* 溢出了就滚动内容，没溢出就不滚动 */overflow: auto;
}/* 接下来实现 card 部分的样式 */
.card{/* 背景颜色 */background-color: rgba(255,255,255, 0.75);/* 背景区域圆角 */border-radius: 20px;/* 通过这里的内边距，就可以让图片水平居中 *//* 这里设置的30像素，意思是指4个方向，都是30px *//* 因为我们的图片长宽都是140px，而card的宽为200px *//* 200 -140 == 60px，两边一平摊刚好 30 px *//* 刚好能水平居中，而且上下空出30px */padding: 30px;
}.card img{/* card 的宽度为 200px 【默认与父类 left 宽度相同】*//* 先把图片的尺寸速效 */width: 140px;height: 140px;/* 将图片变成圆形形 */border-radius: 50%;
}.card h3{text-align: center;padding: 10px;
}.card a{/* 首先，先把 a 标签转化成 块级元素 *//* 因为 a 默认是行内元素，行内元素的很多边距是没有效果的 */display: block;/* 文本居中 */text-align: center;/* 去掉下划线 */text-decoration: none;/* 字体颜色 */color: rgb(64, 55, 55);/* 间距 */padding: 10px;
}.card .counter{/* 弹性布局，目的：为了更好的水平排列 */display: flex;/* 通过 justify-content: aroumd *//* 来使用它们左右进行分离排列 */justify-content: space-around;padding: 5px;
}博客详情页
有了上面的基础其实下面几个都非常好做了。我们来逐个突破把。我们先来看看我们的详情页是咋样的~~
我们可以看到这里布局其实和上面的博客列表页是基本上一模一样。只需进行稍加修改。
一点点修改之后大概的雏形就已经出来了。这里我当时用的图片不一样哈哈哈哈~不过并不影响。
加上博客详情页的专属CSS代码：
果然还是美化了之后画面更好看了~
这个详情页就做好了。完整代码如下：
老规矩首先来看HTML的代码块：boke2.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>博客详情页</title><link rel="stylesheet" href="all.css"><link rel="stylesheet" href="boke2.css">
</head>
<body><!-- 导航栏 --><!-- 为了能够在后续过程中，添加样式等操作，建议都引入一个类属性 --><div class="navigation"><img src="123.jpg" alt=""><span>我的博客系统</span><!-- 空白元素，用于站位置 --><div class="spacer"></div><a href="bloghome.html">主页</a><a href="writingblog.html">写博客</a><a href="#">注销</a></div><!-- 这里的 .container 作为页面的版心 --><div class="container"><!-- 左侧用户信息区 --><div class="left"><!-- 表示整个用户信息区域 --><div class="card"><img src="123.jpg" alt=""><!-- 空格符 --><h3>Sun</h3><a href="#">github 地址</a><div class="counter"><span>文章</span><span>分类</span></div><div class="counter"><span>2</span><span>1</span></div></div></div><!-- 右侧内容区 --><div class="right"><!-- 使用一个 div 来包裹整个博客的内容详情 --><div class="blog-content"><!-- 博客标题 --><h3>我的第一篇博客</h3><!-- 发布时间 --><div class="date">2022-05-16 19:30:00</div><!-- 博客内容 --><!-- 第一个自然段 --><p><!-- 输入lorem，就会自动生成一串随机字符 -->每天代码8小时，健康幸福一辈子，Lorem ipsum dolor sit, amet consectetur adipisicing elit. Id numquam vitae voluptate, veniam ipsa placeat! Consectetur eligendi quia quibusdam, mollitia eos totam quod repellendus veritatis, iste natus odio nihil ea.</p><!-- 第二个自然段 --><p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatibus similique cumque corrupti. Officiis adipisci exercitationem aspernatur ea libero quia, labore optio tempore delectus pariatur dicta officia blanditiis cum deleniti fuga.</p><!-- 第三个自然段 --><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo consectetur dolores ullam quo sed. Sunt, placeat voluptatem quia qui tenetur voluptas perspiciatis, numquam suscipit id ipsa veritatis iusto dolore itaque?</p><p><!-- 输入lorem，就会自动生成一串随机字符 -->每天代码8小时，健康幸福一辈子，Lorem ipsum dolor sit, amet consectetur adipisicing elit. Id numquam vitae voluptate, veniam ipsa placeat! Consectetur eligendi quia quibusdam, mollitia eos totam quod repellendus veritatis, iste natus odio nihil ea.</p><!-- 第二个自然段 --><p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatibus similique cumque corrupti. Officiis adipisci exercitationem aspernatur ea libero quia, labore optio tempore delectus pariatur dicta officia blanditiis cum deleniti fuga.</p><!-- 第三个自然段 --><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo consectetur dolores ullam quo sed. Sunt, placeat voluptatem quia qui tenetur voluptas perspiciatis, numquam suscipit id ipsa veritatis iusto dolore itaque?</p><p><!-- 输入lorem，就会自动生成一串随机字符 -->每天代码8小时，健康幸福一辈子，Lorem ipsum dolor sit, amet consectetur adipisicing elit. Id numquam vitae voluptate, veniam ipsa placeat! Consectetur eligendi quia quibusdam, mollitia eos totam quod repellendus veritatis, iste natus odio nihil ea.</p><!-- 第二个自然段 --><p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatibus similique cumque corrupti. Officiis adipisci exercitationem aspernatur ea libero quia, labore optio tempore delectus pariatur dicta officia blanditiis cum deleniti fuga.</p><!-- 第三个自然段 --><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo consectetur dolores ullam quo sed. Sunt, placeat voluptatem quia qui tenetur voluptas perspiciatis, numquam suscipit id ipsa veritatis iusto dolore itaque?</p><p><!-- 输入lorem，就会自动生成一串随机字符 -->每天代码8小时，健康幸福一辈子，Lorem ipsum dolor sit, amet consectetur adipisicing elit. Id numquam vitae voluptate, veniam ipsa placeat! Consectetur eligendi quia quibusdam, mollitia eos totam quod repellendus veritatis, iste natus odio nihil ea.</p><!-- 第二个自然段 --><p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatibus similique cumque corrupti. Officiis adipisci exercitationem aspernatur ea libero quia, labore optio tempore delectus pariatur dicta officia blanditiis cum deleniti fuga.</p><!-- 第三个自然段 --><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo consectetur dolores ullam quo sed. Sunt, placeat voluptatem quia qui tenetur voluptas perspiciatis, numquam suscipit id ipsa veritatis iusto dolore itaque?</p><p><!-- 输入lorem，就会自动生成一串随机字符 -->每天代码8小时，健康幸福一辈子，Lorem ipsum dolor sit, amet consectetur adipisicing elit. Id numquam vitae voluptate, veniam ipsa placeat! Consectetur eligendi quia quibusdam, mollitia eos totam quod repellendus veritatis, iste natus odio nihil ea.</p><!-- 第二个自然段 --><p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatibus similique cumque corrupti. Officiis adipisci exercitationem aspernatur ea libero quia, labore optio tempore delectus pariatur dicta officia blanditiis cum deleniti fuga.</p><!-- 第三个自然段 --><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo consectetur dolores ullam quo sed. Sunt, placeat voluptatem quia qui tenetur voluptas perspiciatis, numquam suscipit id ipsa veritatis iusto dolore itaque?</p><p><!-- 输入lorem，就会自动生成一串随机字符 -->每天代码8小时，健康幸福一辈子，Lorem ipsum dolor sit, amet consectetur adipisicing elit. Id numquam vitae voluptate, veniam ipsa placeat! Consectetur eligendi quia quibusdam, mollitia eos totam quod repellendus veritatis, iste natus odio nihil ea.</p><!-- 第二个自然段 --><p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatibus similique cumque corrupti. Officiis adipisci exercitationem aspernatur ea libero quia, labore optio tempore delectus pariatur dicta officia blanditiis cum deleniti fuga.</p><!-- 第三个自然段 --><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo consectetur dolores ullam quo sed. Sunt, placeat voluptatem quia qui tenetur voluptas perspiciatis, numquam suscipit id ipsa veritatis iusto dolore itaque?</p><p><!-- 输入lorem，就会自动生成一串随机字符 -->每天代码8小时，健康幸福一辈子，Lorem ipsum dolor sit, amet consectetur adipisicing elit. Id numquam vitae voluptate, veniam ipsa placeat! Consectetur eligendi quia quibusdam, mollitia eos totam quod repellendus veritatis, iste natus odio nihil ea.</p><!-- 第二个自然段 --><p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatibus similique cumque corrupti. Officiis adipisci exercitationem aspernatur ea libero quia, labore optio tempore delectus pariatur dicta officia blanditiis cum deleniti fuga.</p><!-- 第三个自然段 --><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo consectetur dolores ullam quo sed. Sunt, placeat voluptatem quia qui tenetur voluptas perspiciatis, numquam suscipit id ipsa veritatis iusto dolore itaque?</p><p><!-- 输入lorem，就会自动生成一串随机字符 -->每天代码8小时，健康幸福一辈子，Lorem ipsum dolor sit, amet consectetur adipisicing elit. Id numquam vitae voluptate, veniam ipsa placeat! Consectetur eligendi quia quibusdam, mollitia eos totam quod repellendus veritatis, iste natus odio nihil ea.</p><!-- 第二个自然段 --><p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatibus similique cumque corrupti. Officiis adipisci exercitationem aspernatur ea libero quia, labore optio tempore delectus pariatur dicta officia blanditiis cum deleniti fuga.</p><!-- 第三个自然段 --><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo consectetur dolores ullam quo sed. Sunt, placeat voluptatem quia qui tenetur voluptas perspiciatis, numquam suscipit id ipsa veritatis iusto dolore itaque?</p><p><!-- 输入lorem，就会自动生成一串随机字符 -->每天代码8小时，健康幸福一辈子，Lorem ipsum dolor sit, amet consectetur adipisicing elit. Id numquam vitae voluptate, veniam ipsa placeat! Consectetur eligendi quia quibusdam, mollitia eos totam quod repellendus veritatis, iste natus odio nihil ea.</p><!-- 第二个自然段 --><p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatibus similique cumque corrupti. Officiis adipisci exercitationem aspernatur ea libero quia, labore optio tempore delectus pariatur dicta officia blanditiis cum deleniti fuga.</p><!-- 第三个自然段 --><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo consectetur dolores ullam quo sed. Sunt, placeat voluptatem quia qui tenetur voluptas perspiciatis, numquam suscipit id ipsa veritatis iusto dolore itaque?</p><p><!-- 输入lorem，就会自动生成一串随机字符 -->每天代码8小时，健康幸福一辈子，Lorem ipsum dolor sit, amet consectetur adipisicing elit. Id numquam vitae voluptate, veniam ipsa placeat! Consectetur eligendi quia quibusdam, mollitia eos totam quod repellendus veritatis, iste natus odio nihil ea.</p><!-- 第二个自然段 --><p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatibus similique cumque corrupti. Officiis adipisci exercitationem aspernatur ea libero quia, labore optio tempore delectus pariatur dicta officia blanditiis cum deleniti fuga.</p><!-- 第三个自然段 --><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo consectetur dolores ullam quo sed. Sunt, placeat voluptatem quia qui tenetur voluptas perspiciatis, numquam suscipit id ipsa veritatis iusto dolore itaque?</p></div></div></div>
</body>
</html>再来看看专属页面boke2.css：
/* 给博客详情页使用的样式文件 *//* 首先，我们需要给 blog-content 设置内边距*/
/* 因为你们仔细看看模板，就会知道内容与边框是有一定的距离的 */
.blog-content{padding: 30px;
}/* 标题 */
.blog-content h3{/* 标题居中 */text-align: center;/* 设置边距，因为标题与下面的时间是有距离的 *//* .blog-content设置的边距 和这个没有关系！！！ *//* .blog-content 是针对整体，.blog-content h3 是针对内容中的标题 *//* 上下 20 px，左右0px */padding: 20px 0;}/* 日期 */
.blog-content .date{/* 文本居中 */text-align: center;/* 字体颜色 */color: rgb(204, 33, 204);/* 针对日期设置间距 */padding: 20px;
}/* 自然段 */
.blog-content p{/* 每个自然段首行缩进 2个字符 */text-indent: 2em;/* 给每个自然段设置边距，使其每个自然段隔开 */padding: 10px 0;
}虽然这里我没有再贴上全局部分的CSS代码。但是你们要记得添加~
博客登陆页
吃了前面的福利，这部分的代码也是稍加修改即可
先来看看我们的目标页面
将boke1.html中的稍加修改
有点不大好看哈哈哈哈~
话不多说加上CSS
我们来看看成效：
老规矩首先来看HTML的代码块：boke3.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>博客登录页</title><link rel="stylesheet" href="all.css"><link rel="stylesheet" href="boke3.css">
</head>
<body><!-- 导航栏 --><!-- 为了能够在后续过程中，添加样式等操作，建议都引入一个类属性 --><div class="navigation"><img src="123.jpg" alt=""><span>我的博客系统</span><!-- 空白元素，用于站位置 --><div class="spacer"></div><a href="bloghome.html">主页</a><a href="writingblog.html">写博客</a><!-- <a href="#">注销</a> --></div><!-- 登录页面内容区域 --><div class="login-container"><!-- 加上一个对话框 --><div class="login-dialog"><h3>登陆</h3><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"><button>提交</button></div></div></div>
</body>
</html>CSS代码块：
/* 登录页面的专用样式文件 */.login-container{/* 页面宽度 */width: 100%;/* 减去导航的高度 */height: calc(100% - 50px);/* 需要让里面的子元素，垂直水平居中，就会用到 flex */display: flex;/* 垂直居中 */align-items: center;/* 水平居中 */justify-content: center;}.login-dialog{/* 尺寸 */width: 400px;height: 350px;background-color: rgba(255, 255, 255, 0.75);/* 边框圆角 */border-radius: 15px;
}.login-dialog h3{/* 文本居中 */text-align: center;/* 字体大小 */font-size: 20px;/* 间距 *//* 上下 50 边距，左右苓边距 */padding: 50px 0;}.login-dialog .row{/* 尺寸 */height: 50px;width: 100%;/* 使用弹性布局 *//* 因为 类row，所拥有的元素都是 行内元素*//* 只要是涉及到行内元素，或者子元素的操作都可以使用弹性布局 */display: flex;justify-content: center;align-items: center;
}/* 针对 .login-dialog 中 span 标签 */
.login-dialog .row span{/* 把span 转化成块级元素，方便您设置尺寸 *//* 因为行内元素设置尺寸，大部分操作都是不会生效的 */display: block;/* 尺寸 */width: 100px;/* 字体加粗 */font-weight: 700;
}/* 使用并集选择器，同时选择 用户名和密码的输入框 */
#username,#password{width: 200px;height: 40px;/* 去掉边框线 */border: none;/* 去掉轮廓线 */outline: none;/* 字体大小 */font-size: 22px;/* 文本垂直居中 */line-height: 40px;/* 设置 左内边距，让输入的数据与边框隔开 */padding-left: 10px;/* 设置边框圆角 */border-radius: 15px;
}.row button{width: 300px;height: 50px;/* 背景颜色 */background-color: rgb(21, 100, 21);/* 字体颜色 */color: white;/* 字体大小 */font-size: 20px;/* 去掉边框线 */border: none;/* 去掉轮廓线 */outline: none;/* 边框圆角 */border-radius: 20px;
}.row button:active{/* 背景颜色 */background-color: white;/* 字体颜色 */color: black;
}同样也是要加上全局的CSS 代码块。
博客编辑页
来到了这个最麻烦的地方了~
我们现在来看看CSDN的markdown编辑器。我此时此刻正在码字哈哈哈，我们既然是要实现一个伪CSDN博客系统，自然是少不了markdown。
先看看我们的目标是什么样的：
首先我们得先下载一个markdown编辑器
可以点击这里下载。然后解压缩到我们做网页的文件夹
之后我们还需要将这个文件夹中的内容引入HTML中。
可能有些人已经发现我们这儿还多了一些js的文件。我们还需要再建立一个js的文件。然后在里面创建一个文本文档。重命名成下面的名字。
jquery 其实就是js中最知名的第三方库，可以这么说站在十年前，jQuery 在 JS 中的低位，就相当于 Spring 在 Java 中的低位。但凡是写一个前端的程序，都会使用到 jQuery。正因为 jQuery 非常非常火，所以很多的第三方库，也要依赖 jQuery。我们就需要通过其它手段来安装引入 jQuery，因为 jQuery 是另外一个库，不能直接使用。需要我们先去下载它。
我们点击红色框框中的内容：
然后复制这段URL到我们自己的浏览器打开
我们把这段内容全部复制（一定要全部复制！！！），然后将刚刚创建的文本文档用VS打开，将这段文字粘贴到这个创建的文件中。
**在完成好下载以及引入操作以后。**一定要确定你们引入的文件是刚刚下载好的，不要引入错误了。不然是跑不起来的！！！！
现在我们可以来初始化这个markdown编辑器了。
加入一些CSS：
现在可以来跑一下了：
老规矩贴出完整代码
HTML代码块：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>博客编辑页</title><link rel="stylesheet" href="boke4.css"><link rel="stylesheet" href="all.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.min.js"></script>
</head>
<body><!-- 导航栏 --><!-- 为了能够在后续过程中，添加样式等操作，建议都引入一个类属性 --><div class="navigation"><img src="123.jpg" alt=""><span>我的博客系统</span><!-- 空白元素，用于站位置 --><div class="spacer"></div><a href="bloghome.html">主页</a><a href="writingblog.html">写博客</a><a href="#">注销</a></div><!-- 包裹整个博客编辑页内容的顶级容器 --><div class="blog-edit-container"><!-- 内容分为两个部分：标题区 和 编辑区 --><!-- 标题区 --><div class="title"><!-- 输入框 --><input type="text"><button>发布文章</button></div><!-- 编辑区：放置 markdown 编译器 --><div id="editor"></div><script>// 初始化编译器let editor = editormd("editor",{// 这里的尺寸必须在这里设置，设置样式会被 editormd 自动覆盖掉width: "100%",// 设置编译器的高度height: "calc(100% - 50px)",// 编译器中的初始内容markdown: "# 在这里写一篇博客",// 指定 editor.md 依赖的插件路径path: "./editor.md/lib/"});</script></div>
</body>
</html>专属CSS代码块：
/* 这是博客编辑页专用的样式文件 *//* 容器 */
.blog-edit-container {/* 尺寸 */width: 1000px;/* 页面高度 - 导航栏高度 */height: calc(100% - 50px);/* 水平居中 */margin: 0 auto;}
/* 先针对标题区 的 div 下手 */
.blog-edit-container .title{/* 与分类元素 .blog-edit-container 一样：1000px */width: 100%;/* 标题区域高度 */height: 50px;/* 为了方便调节尺寸，我们使用 弹性布局 */display: flex;/* 垂直居中 */align-items: center;/* 使子元素 输入框 和 按钮 靠两边放置，中间留个缝 */justify-content: space-between;
}.blog-edit-container .title input{/* 尺寸 *//* 宽度我们要考虑一下 *//* 总长度是1000px，我打算给按钮设置 100px 的宽度*//* 那么 输入的宽度就应该是 900px *//* 但是模板中，两者是不能紧挨着的 *//* 所以我给 890px */width: 890px;height: 40px;/* 边框圆角 */border-radius: 15px;/* 去掉边框线 */border: none;/* 去掉轮廓线 */outline: none;/* 背景颜色 和 透明度 */background-color: rgba(255, 255, 255, 0.75);font-size: 20px;padding-left: 10px;
}.blog-edit-container .title button{width: 100px;height: 40px;/* 背景颜色 */background-color: rgb(240, 163, 21);/* 字体颜色 */color: white;/* 去掉边框线 */border: none;/* 去掉轮廓线 */outline: none;/* 边框圆角 */border-radius: 15px;
}
/* 点击时，按钮背景颜色为黑色 */
.blog-edit-container .title button:active{background-color: black;
}#editor{border-radius: 15px;/* background-color 只是针对当前元素进行设置，不会影响到子元素 *//* background-color: rgba(255, 255, 255, 0.75); *//* opacity 会影响到子元素 *//* 给最外面的父元素设置了透明，里面的元素也会一起半透明 */opacity: 75%;
}最后这个js文件中大概是这样：
好了，文章至此便已全部结束了，动手能力强的是不是都已经完成了呢~