前段时间学了一点儿前端知识，主要是：
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>
<div class="container">
<div class="left">
<div class="card">
<img src="123.jpg" alt="">
<h3>Dark And Greyh3>
<a href="#">github 地址a>
<div class="counter">
<span>文章span>
<span>分类span>
div>
<div class="counter">
<span>2span>
<span>1span>
div>
div>
div>
<div class="right">
<div class="blog">
<div class="title">
我的第一篇博客
div>
<div class="date">
2022-05-16 12:48:00
div>
<div class="desc">
每天代码八小时，健康幸福一辈子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>
<a href="#">查看全文 >> a>
div>
<div class="blog">
<div class="title">
我的第二篇博客
div>
<div class="date">
2022-05-16 19:52:00
div>
<div class="desc">
每天代码八小时，健康幸福一辈子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>
<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，标题，连接之类的都是水平一行来进行排列的 */
/* 所以，这里我们就需要用到d性布局 */
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{
/* d性布局，目的：为了更好的水平排列 */
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>
<div class="container">
<div class="left">
<div class="card">
<img src="123.jpg" alt="">
<h3>Sunh3>
<a href="#">github 地址a>
<div class="counter">
<span>文章span>
<span>分类span>
div>
<div class="counter">
<span>2span>
<span>1span>
div>
div>
div>
<div class="right">
<div class="blog-content">
<h3>我的第一篇博客h3>
<div class="date">2022-05-16 19:30:00div>
<p>
每天代码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>
每天代码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>
每天代码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>
每天代码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>
每天代码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>
每天代码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>
每天代码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>
每天代码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>
每天代码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>
每天代码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>
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%;
/* 使用d性布局 */
/* 因为 类row，所拥有的元素都是 行内元素*/
/* 只要是涉及到行内元素，或者子元素的 *** 作都可以使用d性布局 */
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">
<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>
<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;
/* 为了方便调节尺寸，我们使用 d性布局 */
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文件中大概是这样：
好了，文章至此便已全部结束了，动手能力强的是不是都已经完成了呢~
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）