珠海知名网站,青柠影院免费观看电视剧高清8,seo企业网站源码,安溪住房和城乡建设网站文章目录 1.预期效果1.1博客列表页效果1.2博客详情页效果1.3博客登陆页效果1.4博客编辑页效果 2.实现博客列表页2.1实现导航栏2.2实现版心2.3实现个人信息2.4实现博客列表2.5博客列表页完整代码 3.实现博客正文页3.1引入导航栏3.2引入版心3.3引入个人信息3.4实现博客正文3.5博客… 文章目录 1.预期效果1.1博客列表页效果1.2博客详情页效果1.3博客登陆页效果1.4博客编辑页效果 2.实现博客列表页2.1实现导航栏2.2实现版心2.3实现个人信息2.4实现博客列表2.5博客列表页完整代码 3.实现博客正文页3.1引入导航栏3.2引入版心3.3引入个人信息3.4实现博客正文3.5博客正文页完整代码 4.实现博客登陆页4.1引入导航栏4.2实现版心4.3实现登陆框4.4博客登录页完整代码 5.实现博客编辑页5.1引入导航栏5.2实现编辑区5.3引入jquery5.4引入 editor.md5.5博客编辑页完整代码 大家好我是晓星航。今天为大家带来的是 博客系统(页面设计) 相关的讲解
1.预期效果
1.1博客列表页效果 1.2博客详情页效果 1.3博客登陆页效果 1.4博客编辑页效果 2.实现博客列表页
创建 blog_list.html, 编写博客列表页.
2.1实现导航栏
编辑 blog_list.html, 创建导航栏的 html 代码.
导航栏里面包含 logo, 标题, 以及一些按钮(跳转链接).为了实现左右排列, 在 logo 和 按钮 之间加一个 spacer 作为占位器. !-- 这是一个导航栏 --div classnavimg srcimage/logo2.jpg altspan classtitle我的博客系统/spana href#主页/aa href#写博客/aa href#注销/a/div准备一个 logo2.jpg(星际争霸), 放到 img 目录中. 创建 common.css . 对于导航栏来说, 每个页面都需要, 因此把样式提取出来. 先清除浏览器默认样式准备一个 cat.jpg 作为背景图.需要把 html 和 body 高度都设为 100%, 使背景的高度和浏览器窗口高度一样.导航栏 nav 内部使用 flex 布局, 用来排列 logo 和一些按钮.
* {margin: 0;padding: 0;box-sizing: border-box;
}
/* 设置整体页面高度 */
html, body {height: 100%;background-image: url(../img/cat.jpg);background-position: center center;background-size: cover;background-repeat: no-repeat;
}
/* 上方导航栏 */
.nav {width: 100%;height: 50px;background-color: rgba(51, 51, 51, 0.4);color: #fff;display: flex;justify-content: left;align-items: center;
}
/* 导航栏中的图标 */
.nav img {width: 40px;height: 40px;margin-left: 30px;margin-right: 10px;border-radius: 50%;
}
/* 导航栏中的占位器 */
.nav .spacer {width: 70%;
}
/* 导航栏中的按钮 */
.nav a {color: #fff;text-decoration: none;padding: 0 10px;
}代码解析 这里的 100% 相当于是网页的高度它可以随着网页大小的动态变化而变化。 注意 - 两侧必须要有一个空格因为在 CSS中 - 可能是标识符的一部分CSS如果要表达减法运算就得加上空格。 那么我们之前了解到 CSS 不能进行算数运算那么这里我们为什么可以有算术间的运算呢 答因为那是针对 CSS2 这个版本在进化到 CSS3 之后此时我们引入了少量的运算(但是在运算符的两侧一定要加上空格不然可能会被编译器误解成标识符) 引入 common.css
link relstylesheet hrefcss/conmmon.css使用css前 使用css后 2.2实现版心
编辑 blog_list.html
container 作为版心, 实现居中对齐的效果.左侧放用户信息右侧放博客列表
!-- 版心 --
div classcontainer!-- 左侧个人信息 --div classcontainer-left/div!-- 右侧内容详情 --div classcontainer-right/div
/div编辑 common.css
/* 页面内容容器, 版心 */
.container {/* 使用 calc 计算高度 */height: calc(100% - 50px);/* 设置版心宽度 */width: 1000px;/* 水平居中 */margin: 0 auto;/* 使用弹性布局 */display: flex;justify-content: space-between;align-items: center;
}
/* 左侧部分, 用来放置用户信息 */
.container-left {height: 100%;width: 200px;
}
/* 右侧部分, 用来放置正文 */
.container-right {height: 100%;/* 和左侧部分中间留出 5px 间隙 */width: 795px;/* 如果内容溢出就自动加上滚动条 */overflow: auto;background-color: rgba(255, 255, 255, 0.8);border-radius: 10px;
}2.3实现个人信息
编辑 blog_list.html
把个人信息放到一个 .card div 中.个人信息中包含 头像 (img), 用户名 (h3), 用户的 github (a), 用户的文章数量和分类数量.
!-- 左侧个人信息 --
div classcontainer-leftdiv classcardimg srcimg/doge.jpg classavtar alth3比特汤老湿/h3a hrefhttp:www.github.comgithub 地址/adiv classcounterspan文章/spanspan分类/span/divdiv classcounterspan2/spanspan1/span/div/div
/div编辑 common.css
/* 展示用户信息的卡片 */
.card {background-color: rgba(255, 255, 255, 0.8);border-radius: 10px;padding: 30px;
}
/* 用户头像 */
.card img {width: 140px;height: 140px;border-radius: 50%;
}
/* 用户名 */
.card h3 {text-align: center;padding: 10px;
}
/* 用户 github 链接 */
.card a {display: block;text-align: center;color: #999;text-decoration: none;padding: 10px;
}
/* 展示文章数目的面板 */
.card .counter {padding: 5px;display: flex;justify-content: space-around;
}2.4实现博客列表
编辑 blog_list.html
每个博客使用 div.blog 来表示.每个博客中包含标题, 发布时间, 描述, 查看全文按钮.
!-- 右侧内容详情 --
div classcontainer-right!-- 每一篇博客包含标题, 摘要, 时间 --div classblogdiv classtitle我的第一篇博客/divdiv classdate2021-06-02/divdiv classdesc
从今天起, 我要认真敲代码. Lorem ipsum, dolor sit amet consectetur
adipisicing elit. Cum distinctio ullam eum utveroab laborum numquam tenetur est in dolorum a sint, assumenda
adipisci similique quaerat vel.Facere,et./diva hrefblog_content.html?blogId1 classdetail查看全文 gt;gt;/a/divdiv classblogdiv classtitle我的第二篇博客/divdiv classdate2021-06-02/divdiv classdesc从今天起, 我要认真敲代码. Lorem ipsum, dolor sit amet consectetur
adipisicing elit. Cum distinctio ullam eum utveroab laborum numquam tenetur est in dolorum a sint, assumenda
adipisci similique quaerat vel.Facere,et./diva hrefblog_content.html?blogId2 classdetail查看全文 gt;gt;/a/div
/div创建 blog_list.css 这部分内容不再是公共部分了, 放到单独的 css 中. 使用伪类选择器 .blog .detail:hover , 实现光标悬停时修改样式的功能.给 .blog .detail 中加上过度效果 transition: all 0.3s; 使悬停的样式改变更逼真 .
/* 表示一篇博客 */
.blog {width: 100%;padding: 10px 20px;
}
/* 博客的标题 */
.blog .title {color: black;font-size: 20px;font-weight: 700;text-align: center;padding: 10px 0;
}
/* 博客的摘要 */
.blog .desc {color: #000;text-indent: 2em;margin-top: 10px;
}
/* 博客的日期 */
.blog .date {color: #008000;margin-top: 10px;
text-align: center;
}
/* 查看详情 按钮 */
.blog .detail {display: block;width: 120px;height: 40px;line-height: 40px;color: black;text-align: center;text-decoration: none;margin: 10px auto 0 auto;border: 2px solid black;/* 给颜色加上过渡效果 */transition: all 0.3s;
}
/* 查看详情按钮的鼠标 hover 效果 */
.blog .detail:hover {background-color: #000;color: #fff;
}引入 blog_list.css
link relstylesheet hrefcss/blog_content.css2.5博客列表页完整代码
博客列表页面的HTML和CSS的全部代码如下
blog_list.html完整代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title博客列表页/titlelink relstylesheet hrefcss/common.csslink relstylesheet hrefcss/blog_list.css
/head
body!-- 这是一个导航栏 --div classnavimg srcimage/logo.jpg altspan classtitle我的博客系统/span!-- 这个标签仅仅用于占位把这几个 a 标签挤到右边去 --div classspacer/diva href#主页/aa href#写博客/aa href#注销/a/div!-- 页面主体部分 --div classcontainer!-- 左侧信息 --div classcontainer-left!-- 使用这个 .card 表示用户信息 --div classcard!-- 用户头像 --img srcimage/Jay.jpg alt!-- 用户名 --h3晓星航/h3a href#github 地址/adiv classcounterspan文章/spanspan分类/span/divdiv classcounterspan2/spanspan1/span/div/div/div!-- 右侧信息 --div classcontainer-right!-- 表示一篇博客 --div classblog!-- 博客标题 --div classtitle我的第一篇博客/div!-- 发布时间 --div classdate2023-10-16/div!-- 博客摘要 --div classdesc从今天起我要认真敲代码. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Qui excepturi temporibus iure perspiciatis iusto enim corrupti quo laboriosam eos recusandae laudantium maxime, a inventore, dolorum itaque officia ducimus esse quam./div!-- 查看全文按钮 --a href#查看全文 gt;gt; /a/div!-- 表示一篇博客 --div classblog!-- 博客标题 --div classtitle我的第一篇博客/div!-- 发布时间 --div classdate2023-10-16/div!-- 博客摘要 --div classdesc从今天起我要认真敲代码. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Qui excepturi temporibus iure perspiciatis iusto enim corrupti quo laboriosam eos recusandae laudantium maxime, a inventore, dolorum itaque officia ducimus esse quam./div!-- 查看全文按钮 --a href#查看全文 gt;gt; /a/div!-- 表示一篇博客 --div classblog!-- 博客标题 --div classtitle我的第一篇博客/div!-- 发布时间 --div classdate2023-10-16/div!-- 博客摘要 --div classdesc从今天起我要认真敲代码. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Qui excepturi temporibus iure perspiciatis iusto enim corrupti quo laboriosam eos recusandae laudantium maxime, a inventore, dolorum itaque officia ducimus esse quam./div!-- 查看全文按钮 --a href#查看全文 gt;gt; /a/div!-- 表示一篇博客 --div classblog!-- 博客标题 --div classtitle我的第一篇博客/div!-- 发布时间 --div classdate2023-10-16/div!-- 博客摘要 --div classdesc从今天起我要认真敲代码. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Qui excepturi temporibus iure perspiciatis iusto enim corrupti quo laboriosam eos recusandae laudantium maxime, a inventore, dolorum itaque officia ducimus esse quam./div!-- 查看全文按钮 --a href#查看全文 gt;gt; /a/div!-- 表示一篇博客 --div classblog!-- 博客标题 --div classtitle我的第一篇博客/div!-- 发布时间 --div classdate2023-10-16/div!-- 博客摘要 --div classdesc从今天起我要认真敲代码. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Qui excepturi temporibus iure perspiciatis iusto enim corrupti quo laboriosam eos recusandae laudantium maxime, a inventore, dolorum itaque officia ducimus esse quam./div!-- 查看全文按钮 --a href#查看全文 gt;gt; /a/div!-- 表示一篇博客 --div classblog!-- 博客标题 --div classtitle我的第一篇博客/div!-- 发布时间 --div classdate2023-10-16/div!-- 博客摘要 --div classdesc从今天起我要认真敲代码. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Qui excepturi temporibus iure perspiciatis iusto enim corrupti quo laboriosam eos recusandae laudantium maxime, a inventore, dolorum itaque officia ducimus esse quam./div!-- 查看全文按钮 --a href#查看全文 gt;gt; /a/div!-- 表示一篇博客 --div classblog!-- 博客标题 --div classtitle我的第一篇博客/div!-- 发布时间 --div classdate2023-10-16/div!-- 博客摘要 --div classdesc从今天起我要认真敲代码. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Qui excepturi temporibus iure perspiciatis iusto enim corrupti quo laboriosam eos recusandae laudantium maxime, a inventore, dolorum itaque officia ducimus esse quam./div!-- 查看全文按钮 --a href#查看全文 gt;gt; /a/div!-- 表示一篇博客 --div classblog!-- 博客标题 --div classtitle我的第一篇博客/div!-- 发布时间 --div classdate2023-10-16/div!-- 博客摘要 --div classdesc从今天起我要认真敲代码. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Qui excepturi temporibus iure perspiciatis iusto enim corrupti quo laboriosam eos recusandae laudantium maxime, a inventore, dolorum itaque officia ducimus esse quam./div!-- 查看全文按钮 --a href#查看全文 gt;gt; /a/div!-- 表示一篇博客 --div classblog!-- 博客标题 --div classtitle我的第一篇博客/div!-- 发布时间 --div classdate2023-10-16/div!-- 博客摘要 --div classdesc从今天起我要认真敲代码. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Qui excepturi temporibus iure perspiciatis iusto enim corrupti quo laboriosam eos recusandae laudantium maxime, a inventore, dolorum itaque officia ducimus esse quam./div!-- 查看全文按钮 --a href#查看全文 gt;gt; /a/div!-- 表示一篇博客 --div classblog!-- 博客标题 --div classtitle我的第一篇博客/div!-- 发布时间 --div classdate2023-10-16/div!-- 博客摘要 --div classdesc从今天起我要认真敲代码. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Qui excepturi temporibus iure perspiciatis iusto enim corrupti quo laboriosam eos recusandae laudantium maxime, a inventore, dolorum itaque officia ducimus esse quam./div!-- 查看全文按钮 --a href#查看全文 gt;gt; /a/div/div/div
/body
/htmlcommon.css完整代码:
/* 写样式的起手式先去除浏览器的公共样式并且设置 border-box避免元素盒子被内边距和边框撑大 */
* {margin: 0;padding: 0;box-sizing: border-box;
}html, body {/* html 是页面的最顶层元素 高度 100% 是相对父元素来说是 100% (和父元素一样高)对于 html 标签来说父元素就是浏览器窗口浏览器窗口多高html就多高。body 的父亲是 html设为 100% 意思是 body 和 html 一样高。如果不设置高度此时元素的默认高度取决于内部的内容。*/height: 100%;
}body {/* 相对路径的基准路径就是当前文件所在路径 *//* background-image: url(../image/physics.jpg); */background-image: url(../image/dog.jpg);background-repeat: no-repeat;background-size: cover;background-position: center center;
}
/* 实现导航栏的样式 */
.nav {/* 设置宽度 和 父元素一样宽 *//* 块级元素来说 默认就是 width: 100% */width: 100%;/* 设置高度是 50px */height: 50px;background-color: rgba(50, 50, 50, 0.3);color:white;/* 导航栏里面的元素都是水平排列弹性布局来设置 */display: flex;/* 垂直方向子元素居中 */align-items: center;
}.nav img{width: 40px;height: 40px;margin-left: 30px;margin-right: 10px;/* 让元素变园把内切圆半径设置为宽度的一半就正好是一个圆形 */border-radius: 50%;
}.nav .spacer {width: 70%;
}.nav a {color:white;/* 去掉下划线 */text-decoration: none;/* 为了让这几个 a 标签不要贴的这么紧凑加上个内边距此处使用外边距也行内边距更好。内边距也是元素的内容可以增大用户点击的面积 */padding: 0 10px;
}/* 编写页面主题样式 */
.container {/* 设置主题部分宽度 1000px */width: 1000px;/* 高度能够填充整个页面 */height: calc(100% - 50px);/* 水平居中 */margin: 0 auto;/* 为了方便看效果临时加上个背景色后面再去掉 *//* background-color: blue; *//* 弹性布局 */display: flex;align-items: center;justify-content: space-between;
}.container-left {/* 尺寸写 百分数是相对于父元素为基准 */height: 100%;width: 200px;/* background-color: red; */
}.container-right {height: 100%;/* 此处不设置为 800而是留出 5px 作为中缝 */width: 795px;background-color: rgba(255, 255, 255, 0.8);border-radius: 10px;/* 让这个元素自己能带上滚动条 *//* 这个属性表示内容没有溢出无滚动条如果内容溢出了则自动加上滚动条 */overflow: auto;
}/* 左侧用户信息 */
.card {background-color: rgba(255, 255, 255, 0.8);border-radius: 10px;/* 设置内边距让内容和边框之间有点距离 */padding: 30px;
}/* 用户头像 */
.card img {width: 140px;height: 140px;border-radius: 50%;
}/* 用户名字 */
.card h3 {/* 让文字水平居中 */text-align: center;/* 让文字和上下都有边距 *//* 使用内边距或者外边距均可~~ 更倾向于使用内边距 *//* 因为外边距有的时候有坑 */padding: 10px;
}/* 用户的 github 链接 */
.card a {/* a 标签是行内元素行内元素的很多东西比较膈应 */text-align: center;/* 为了配合上述样式设置成块级元素即可 */display: block;color: #777;text-decoration: none;padding: 10px;
}.card .counter {/* 为了让里面的元素水平排列使用弹性布局 */display: flex;justify-content: space-evenly;/* 让元素之间有点距离感 */padding: 5px;
}blog_list.css完整代码
/* 认为这个文件是给博客列表页实现样式的 *//* 设置整个博客的容器元素的样式 */
.blog {width: 100%;padding: 20px;
}.blog .title {text-align: center;font-size: 24px;font-weight: 700;padding: 10px;
}.blog .date {text-align: center;color: rgb(15, 189, 114);padding: 10px;
}.blog .desc {text-indent: 2em;
}.blog a {/* a 标签不方便设置样式转成块级元素 */display: block;width: 120px;height: 40px;/* 设置水平居中 */margin-top: 20px;margin-left: auto;margin-right: auto;/* 设置边框 */border: 2px solid black;/* 让文字水平居中 */text-align: center;/* 让文字垂直居中 */line-height: 40px;/* 去掉下划线 */text-decoration: none;/* 文字改成黑色 */color: black;/* 圆角矩形 */border-radius: 10px;/* 给鼠标加一个悬停过渡效果 */transition: all 0.8s;
}/* 设置一下让鼠标滑倒按钮上有一个变化 */
.blog a:hover {color: white;background: #666;
}3.实现博客正文页
创建 blog_content.html
3.1引入导航栏
编辑 blog_content.html 这部分代码和 blog_list.html 中相同, 直接复制即可. !-- 导航栏 --
div classnavimg srcimg/logo2.jpg altspan classtitle我的博客系统/span!-- 用来占据中间位置 --span classspacer/spana hrefblog_list.html主页/aa hrefblog_edit.html写博客/aa hreflogout注销/a
/div引入样式 common.css
link relstylesheet hrefcss/conmmon.css3.2引入版心
编辑 blog_content.html 这部分代码和 blog_list.html 相同, 直接复制 !-- 版心 --
div classcontainer!-- 左侧个人信息 --div classcontainer-left/divdiv classcontainer-right/div
/div3.3引入个人信息
编辑 blog_content.html 这部分代码和 blog_list.html 相同, 直接复制 !-- 左侧个人信息 --
div classcontainer-leftdiv classcardimg srcimg/doge.jpg classavtar alth3比特汤老湿/h3a hrefhttp:www.github.comgithub 地址/adiv classcounterspan文章/spanspan分类/span/divdiv classcounterspan2/spanspan1/span/div/div
/div3.4实现博客正文
编辑 blog_content.html
博客内容整体放倒 div.blog-content 中.博客内容中包含博客标题 (h3), 博客时间(div.date), 博客正文§
div classblog-content
!-- 博客标题 --h3我的第一篇博客/h3!-- 博客时间 --div classdate2021-06-02/div!-- 博客正文 --p从今天起我要好好敲代码.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut recusandae
omnis natus ut! Autem aliasullam sit facilis ipsa dolore, molestiae neque aperiam in a facere dolor
mollitia dolorum animi.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut recusandae
omnis natus ut! Autem aliasullam sit facilis ipsa dolore, molestiae neque aperiam in a facere dolor
mollitia dolorum animi.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut recusandae
omnis natus ut! Autem aliasullam sit facilis ipsa dolore, molestiae neque aperiam in a facere dolor
mollitia dolorum animi./ppLorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium sint
accusantium, enim istecorrupti itaque, omnis alias maiores nemo quae rerum deleniti facere
officiis iure velit. Blanditiispariatur delectus perferendis.Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium sint
accusantium, enim istecorrupti itaque, omnis alias maiores nemo quae rerum deleniti facere
officiis iure velit. Blanditiispariatur delectus perferendis./p
/div创建 blog_content.css
/* 博客正文容器 */
.blog-content {padding: 30px;
}
/* 博客标题 */
.blog-content h3 {text-align: center;padding: 20px 0;
}
/* 博客日期 */
.blog-content .date {color: #008000;padding: 10px 0;text-align: center;
}
/* 博客内容段落 */
.blog-content p {text-indent: 2em;
padding: 10px 0;
}引入 blog_content.css
link relstylesheet hrefcss/blog_content.css这时我们发现如果我们滚动旁边的滚动条时背景也跟着滚动了就好像一个化了妆的小姑娘突然卸妆了一样 那么针对这个问题我们解决方法就是将滚动条从旁边移动到我们的博客页面中从而达到一个内容动而背景不变的效果。 这个 auto 属性表示内容没有溢出无滚动条如果内容溢出了则自动加上滚动条。 此时我们可以看到我们现在的滚动条从页面外变化到了页面中背景也不会变化了。 3.5博客正文页完整代码
博客正文页全部代码
blog_detail.html:
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title博客详情页/titlelink relstylesheet hrefcss/common.csslink relstylesheet hrefcss/blog_detail.css
/head
body!-- 这是一个导航栏 --div classnavimg srcimage/logo.jpg altspan classtitle我的博客系统/span!-- 这个标签仅仅用于占位把这几个 a 标签挤到右边去 --div classspacer/diva href#主页/aa href#写博客/aa href#注销/a/div!-- 页面主体部分 --div classcontainer!-- 左侧信息 --div classcontainer-left!-- 使用这个 .card 表示用户信息 --div classcard!-- 用户头像 --img srcimage/Jay.jpg alt!-- 用户名 --h3晓星航/h3a href#github 地址/adiv classcounterspan文章/spanspan分类/span/divdiv classcounterspan2/spanspan1/span/div/div/div!-- 右侧信息 --div classcontainer-right!-- 博客标题 --div classtitle我的第一篇博客/div!-- 博客发布时间 --div classdate2023-10-16/div!-- 博客正文 --div classcontentp从今天开始我要认真敲代码 Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde ducimus sint beatae blanditiis nesciunt, deleniti ipsum inventore at fugit eaque accusantium commodi officiis, nobis fuga incidunt accusamus veritatis, dicta rem!从今天开始我要认真敲代码 Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde ducimus sint beatae blanditiis nesciunt, deleniti ipsum inventore at fugit eaque accusantium commodi officiis, nobis fuga incidunt accusamus veritatis, dicta rem!从今天开始我要认真敲代码 Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde ducimus sint beatae blanditiis nesciunt, deleniti ipsum inventore at fugit eaque accusantium commodi officiis, nobis fuga incidunt accusamus veritatis, dicta rem!/pp从今天开始我要认真敲代码 Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde ducimus sint beatae blanditiis nesciunt, deleniti ipsum inventore at fugit eaque accusantium commodi officiis, nobis fuga incidunt accusamus veritatis, dicta rem!从今天开始我要认真敲代码 Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde ducimus sint beatae blanditiis nesciunt, deleniti ipsum inventore at fugit eaque accusantium commodi officiis, nobis fuga incidunt accusamus veritatis, dicta rem!从今天开始我要认真敲代码 Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde ducimus sint beatae blanditiis nesciunt, deleniti ipsum inventore at fugit eaque accusantium commodi officiis, nobis fuga incidunt accusamus veritatis, dicta rem!/pp从今天开始我要认真敲代码 Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde ducimus sint beatae blanditiis nesciunt, deleniti ipsum inventore at fugit eaque accusantium commodi officiis, nobis fuga incidunt accusamus veritatis, dicta rem!从今天开始我要认真敲代码 Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde ducimus sint beatae blanditiis nesciunt, deleniti ipsum inventore at fugit eaque accusantium commodi officiis, nobis fuga incidunt accusamus veritatis, dicta rem!从今天开始我要认真敲代码 Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde ducimus sint beatae blanditiis nesciunt, deleniti ipsum inventore at fugit eaque accusantium commodi officiis, nobis fuga incidunt accusamus veritatis, dicta rem!/p/div/div/div
/body
/html4.实现博客登陆页
4.1引入导航栏
编辑 login.html 这部分代码和 blog_list.html 中相同, 直接复制即可. !-- 导航栏 --
div classnavimg srcimg/logo2.jpg altspan classtitle我的博客系统/span!-- 用来占据中间位置 --span classspacer/spana hrefblog_list.html主页/aa hrefblog_edit.html写博客/a
/div引入样式 common.css
link relstylesheet hrefcss/conmmon.css注意在博客登录页是没有注销按钮的(都没有登录何谈注销呢) 4.2实现版心
编辑 login.html 使用 flex 使登陆对话框能够在页面中水平垂直居中. !-- 版心 --
div classlogin-container/div创建 login.css
.login-container {width: 100%;height: calc(100% - 50px);display: flex;justify-content: center;align-items: center;
}引入 login.css
link relstylesheet hrefcss/login.css4.3实现登陆框
编辑 login.html
登陆框整体放倒 div.login-dialog 中.内部包含三个行, 使用 div.row 表示.每个行里分别包含, 用户名输入框, 密码输入框, 提交按钮.
!-- 中间的登陆框 --
div classlogin-dialogh3登陆/h3div classrowspan用户名/spaninput typetext idusername/divdiv classrowspan密码/spaninput typepassword idpassword/divdiv classrowbutton idsubmit提交/button/div
/div编辑 login.css
使用 #submit:active 伪类选择器, 实现点击按钮时样式切换的效果.
.login-dialog {width: 400px;height: 400px;background-color: rgba(255, 255, 255, 0.8);border-radius: 10px;
}
.login-dialog h3 {padding: 50px 0;text-align: center;
}
.login-dialog .row {height: 50px;display: flex;justify-content: center;align-items: center;
}
.login-dialog .row span {display: block;width: 100px;
font-weight: 700;
}
#username,
#password {width: 200px;height: 40px;line-height: 40px;font-size: 24px;border-radius: 10px;border: none;outline: none;text-indent: 10px;
}
#submit {width: 300px;height: 50px;color: white;background-color: green;border: none;border-radius: 10px;
}
#submit:active {background-color: #666;
}4.4博客登录页完整代码
博客登录页面完整代码
login.html:
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title登录页面/titlelink relstylesheet hrefcss/common.csslink relstylesheet hrefcss/login.css
/head
body!-- 这是一个导航栏 --div classnavimg srcimage/logo.jpg altspan classtitle我的博客系统/span!-- 这个标签仅仅用于占位把这几个 a 标签挤到右边去 --div classspacer/diva href#主页/aa href#写博客/a/div!-- 正文部分 --!-- 贯穿整个页面的容器 --div classlogin-container!-- 垂直水平居中的登录对话框 --div classlogin-dialogh3登录/h3div classrowspan用户名/spaninput typetext idusername placeholder手机号/邮箱/divdiv classrowspan密码/spaninput typepassword idpassword/divdiv classrowbutton idsubmit登录/button/div/div/div
/body
/htmllogin.css:
/* 这个文件专门放登录页面的样式 */.login-container {width: 100%;height: calc(100% - 50px);/* background-color: rgb(128, 0, 0); *//* 为了让对话框能够垂直水平居中使用弹性布局 */display: flex;justify-content: center;align-items: center;
}.login-dialog {width: 400px;height: 330px;background-color: rgba(255,255,255,0.8);border-radius: 10px;
}.login-dialog h3 {text-align: center;padding: 50px 0;
}.login-dialog .row {height: 50px;display: flex;justify-content: center;align-items: center;
}.login-dialog .row span {width: 100px;font-size: 18px;
}#username, #password {width: 200px;height: 40px;border-radius: 5px;/* 去掉边框 */bottom: none;/* 放大字体 */font-size: 18px;padding-left: 5px;
}#submit {width: 300px;height: 40px;color: white;background-color: orange;border: none;border-radius: 10px;
}#submit:active {background-color: #666;
}5.实现博客编辑页
创建 blog_edit.html
5.1引入导航栏
编辑 blog_edit.html 这部分代码和 blog_list.html 中相同, 直接复制即可. !-- 导航栏 --
div classnavimg srcimg/logo2.jpg altspan classtitle我的博客系统/span!-- 用来占据中间位置 --span classspacer/spana hrefblog_list.html主页/aa hrefblog_edit.html写博客/aa hreflogout注销/a
/div引入样式 common.css
link relstylesheet hrefcss/conmmon.css5.2实现编辑区
编辑 blog_edit.html
整个编辑区放到 div.blog-edit-container 中.里面包含一个标题编辑区, 和内容编辑区.标题编辑区, 包含一个 input, 用来填写标题, 以及一个 button 按钮用于提交.内容编辑区先创建一个 div#editor, 后面将使用 editor.md 进行初始化.
!-- 编辑框容器 --
div classblog-edit-container!-- 标题编辑区 --div classtitleinput typetext placeholder在这里写下文章标题 idtitlebutton idsubmit发布文章/button/div!-- 创建编辑器标签 --div ideditor/div
/div创建 blog_edit.css #editor 需要使用 opacity: 80%; 设置透明度. 如果直接使用 background-color 后面会被 editor.md 给覆盖掉. .blog-edit-container {width: 1000px;height: calc(100% - 50px);margin: 0 auto;
}
.blog-edit-container .title {width: 100%;height: 50px;display: flex;justify-content: space-between;align-items: center;
}
#title {height: 40px;width: 890px;text-indent: 10px;border-radius: 10px;outline: none;border: none;background-color:rgba(255, 255, 255, 0.8);
}
#submit {height: 40px;width: 100px;color: white;background-color: orange;
border: none;outline: none;border-radius: 10px;
}
#editor {border-radius: 10px;/* 针对 #editor 用 bgc 属性无法设置半透明了. 里面包含的内容带了背景色 *//* background-color:rgba(255, 255, 255, 0.8); *//* 可以使用 opacity 属性实现 */opacity: 80%;
}5.3引入jquery
首先我们引入jquery
网上找到 jquery 源码 在找到官网后继续找到后缀为 min.js 的这个链接点击右侧的复制链接 复制完连接后我们找到一个新的标签页并把我们之前复制的链接粘贴上去访问
此时我们有两个选择
方法一
全选我们的代码复制之后新建一个js目录和一个 jquery.min.js 文件。
直接把刚才复制的全部代码粘贴到我们新建的 jquery.min.js 文件中即可。(这种方法粗暴野蛮但是确实是一个简单的办法) 引入js代码。
法二
直接引入js链接
5.4引入 editor.md
js引入好之后我们就可以开始引入editor.md了
editor.md 是一个开源的页面 markdown 编辑器组件.
这里的代码是需要进入github上进行下载的
如果github进不去可以下一个steam
使用它加速之后我们github就可以轻松进入了(steam是一个免费加速的软件他加速的原理是实时查找GitHub的VPN并进行切换因此我们进入GitHub可以不会掉线) 进入GitHub之后我们搜索 editor.md 并找到
这个进行下载 上述两种方式都可以进行代码的下载。 下载好后我们选择一个我们可以找得到的位置解压存放
[官网参见](Editor.md - 开源在线 Markdown 编辑器 (pandao.github.io))
把整个目录都拷贝到我们当前的前端页面文件夹中 用法可以参考代码中的 examples 目录中的示例. 非常丰富.
下载 editor.md
从官网上下载到压缩包. 放到目录中. 目录结构如下: 引入 editor.md
第一步先保证页面里有一个 id 为 editor 的 div !-- 博客编辑器这里用 id 是为了和 markdown编辑器对接而设置的 --div ideditor/div第二步引入 editor.md 对应的 css 和 js这些引入代码必须放到 jquery 引入代码的下方 !-- 引入 editor.md 的依赖 --link relstylesheet hrefeditor.md/css/editormd.min.cssscript srceditor.md/lib/marked.min.js/scriptscript srceditor.md/lib/prettify.min.js/scriptscript srceditor.md/editormd.js/script初始化 editor.md
编辑 blog_edit.html (官方文档上有的直接复制粘贴即可) script
// 初始化编辑器
var editor editormd(editor, {// 这里的尺寸必须在这里设置. 设置样式会被 editormd 自动覆盖掉. width: 100%,// 高度 100% 意思是和父元素一样高. 要在父元素的基础上去掉标题编辑区的高度height: calc(100% - 50px),// 编辑器中的初始内容markdown: # 在这里写下一篇博客,// 指定 editor.md 依赖的插件路径path: editor.md/lib/
});
/script初始化代码是要创建一个 editor 对象就对应着页面的 markdown 编辑器通过 这个函数来构造。这个函数就是在 editormd.js 这个文件中定义的。 这个 id 就对应上面的 div#editor此处必须写作 id 不能写为其他选择器。
5.5博客编辑页完整代码
blog_edit.html:
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title博客编辑页/titlelink relstylesheet hrefcss/common.csslink relstylesheet hrefcss/blog_edit.cssscript srcjs/jquery.min.js/script!-- 引入 editor.md 的依赖 --link relstylesheet hrefeditor.md/css/editormd.min.cssscript srceditor.md/lib/marked.min.js/scriptscript srceditor.md/lib/prettify.min.js/scriptscript srceditor.md/editormd.js/script
/head
body!-- 这是一个导航栏 --div classnavimg srcimage/logo.jpg altspan classtitle我的博客系统/span!-- 这个标签仅仅用于占位把这几个 a 标签挤到右边去 --div classspacer/diva href#主页/aa href#写博客/aa href#注销/a/div!-- 编辑区的容器 --div classblog-edit-container!-- 博客标题编辑区 --div classtitleinput typetext idtitle placeholder输入文章标题button idsubmit发布文章/button/div!-- 博客编辑器这里用 id 是为了和 markdown编辑器对接而设置的 --div ideditor/div/divscript// 初始化编辑器var editor editormd(editor, {// 这里的尺寸必须在这里设置. 设置样式会被 editormd 自动覆盖掉. width: 100%,// 设置编辑器高度height: calc(100% - 50px),// 编辑器中的初始内容markdown: # 在这里写下一篇博客,// 指定 editor.md 依赖的插件路径path: editor.md/lib/});/script
/body
/htmlblog_edit.css:
/* 这个文件用来写博客编辑页的样式 */.blog-edit-container {width: 1000px;height: calc(100% - 50px);margin: 0 auto;
}.blog-edit-container .title {height: 50px;display: flex;align-items: center;justify-content: space-between;
}#title {height: 40px;width: 895px;border: none;padding-left: 5px;font-size: 20px;border-radius: 5px;/* 去掉轮廓线鼠标选中后黑圈 */outline: none;/* 设置背景半透明 */background-color: rgba(255, 255, 255, 0.7);
}#title:focus {background-color: rgb(255, 255, 255);
}#submit {height: 40px;width: 100px;border-radius: 5px;background-color: orange;border: none;
}#submit:active{background-color: #666;
}#editor {border-radius: 10px;/* 给editor设置半透明虽然editor自身半透明了但是这里面的元素不是透明的导致仍然看不到背景 *//* background-color: rgba(255, 255, 255, 0.8); */opacity: 80%;
}jquery.min.js: 此处代码字数过多就不展示了详细请参考5.3的链接可以在里面全选复制 js代码。 div ideditor/div/divscript// 初始化编辑器var editor editormd(editor, {// 这里的尺寸必须在这里设置. 设置样式会被 editormd 自动覆盖掉. width: 100%,// 设置编辑器高度height: calc(100% - 50px),// 编辑器中的初始内容markdown: # 在这里写下一篇博客,// 指定 editor.md 依赖的插件路径path: editor.md/lib/});/scriptblog_edit.css:
/* 这个文件用来写博客编辑页的样式 */.blog-edit-container {width: 1000px;height: calc(100% - 50px);margin: 0 auto;
}.blog-edit-container .title {height: 50px;display: flex;align-items: center;justify-content: space-between;
}#title {height: 40px;width: 895px;border: none;padding-left: 5px;font-size: 20px;border-radius: 5px;/* 去掉轮廓线鼠标选中后黑圈 */outline: none;/* 设置背景半透明 */background-color: rgba(255, 255, 255, 0.7);
}#title:focus {background-color: rgb(255, 255, 255);
}#submit {height: 40px;width: 100px;border-radius: 5px;background-color: orange;border: none;
}#submit:active{background-color: #666;
}#editor {border-radius: 10px;/* 给editor设置半透明虽然editor自身半透明了但是这里面的元素不是透明的导致仍然看不到背景 *//* background-color: rgba(255, 255, 255, 0.8); */opacity: 80%;
}jquery.min.js: 此处代码字数过多就不展示了详细请参考5.3的链接可以在里面全选复制 js代码。 感谢各位读者的阅读本文章有任何错误都可以在评论区发表你们的意见我会对文章进行改正的。如果本文章对你有帮助请动一动你们敏捷的小手点一点赞你的每一次鼓励都是作者创作的动力哦
