首先,页面最顶上是一个导航栏,导航栏的左侧是一个logo 和 一个 标题,导航栏的右侧有几个简单按钮。
主页,就是当前的博客列表页
写博客,就是点击之后,会进入到博客编辑页面。
注销,就是退出登录。
再往下看,就是页面内容部分。
页面内容部分被分成左右两个部分
1、左侧展示的是当前用户的信息
2、右侧,则是博客列表
蕴含了很多博客的信息。
每一篇博客都对应着列表中的一项。
博客详情页效果
博客详情页,显示了当前博客的详细正文
这个页面的效果,相比于主页是类似的。
导航效果是一致的。
左侧显示的不再是用户信息,而是该篇博客的作者信息。
这就好比,你们此刻在看我的博客,左侧显示的是我的信息,而不是你们的。
而右侧,由文章列表,变成一篇文章的正文内容。
博客登陆页效果
这个相比上面的页面内,就更简单了。
主要包含了一个登录框,里面包括用 输入用户名 和 密码的文本框
还有一个 提交 / 登录 按钮
博客编辑页效果
就是 点击 “写博客” 进入的页面。
1、导航没有改变。
2、输入框,输入博客的标题
3、发布按钮
4、markdown 编译器,按照 markdown 的语法来编辑博客内容
有的人可能会有疑问,就这么几个吗?
修改博客页面,注册页面呢?
展开你们的想象,修改博客的页面不就是编辑博客的页面嘛。【写过博客都知道】、
至于注册页面一般是与登录页面绑定的。
换个说法,你们要是掌握了上述这个几个页面,其它页面不过就是套层皮。
上面只是一个小问题,更多的是,就我们菜鸟,能实现出一个 markdown 编译器 嘛。。
答案,肯定不是可能的。
但是!我可以引入一个第三方开源软件 来完成这里的编译器的实现。
也就是说,不需要我们去实现 markdown 编译器,引入一个插件,用别人写好的,直接用就行了。
====================================================================
准备工作,选好项目的存储位置,创建存储文件夹。
创建项目文件。
下面正式开始
我们实现的时候,就要参考下面这张图了。
大家要注意!未来在公司真的是要去从事前端,开发一些页面的话。
一般来说,都会给你 原形图 / 设计图。
开发一个页面,不是在脑子里,凭空搞出来了。
而是需要先设计好,然后再对照着这个设计稿来进行开发。
设计稿,一般是产品经理,或者美工(UED)提供的。
如果没有设计图,凭空去想页面的样式,是特别不好做的。
这就是 既要实现代码,又要完成设计工作。
设计稿,一般来说,是一个 PS(PhotoShop) 搞出来的文件。
非常方便程序员来获取到里面的一些细节。
比如,某个东西的尺寸,颜色,位置,字体大小。
我们只需要按照别人的设计稿,来写代码就行了。
还有一种情况,设计稿就是一张图片,就是我们现在的情况。
这就需要我们来发挥了。
废话不多说,开始设计。
首先是 导航栏
有的人可能会有疑问,这个导航好像还有有点问题。
看不出来带有透明度属性。
这是因为,我们还没有插入背景、
下面我们插入背景
此时导航栏的透明度是不是就体现出来了。
透明度,设置的越大、透明度就越低,导航栏的背景颜色就越深。
反之,设置的越小,透明度越高,导航栏的背景颜色就越浅。
自己开始打开游览器的开发者工具,点击左上角的箭头,选中导航,自己去调整参数。
下面,就是网页内容了。
我们可以发现内容的左右两侧,距离浏览器窗口之间是有一定的距离的。
也就是 内容区域是居中对齐的,然后内容里面有分成左右两个部分。
举个实际例子:B站
你仔细观察我们框选的部分,内码的内容都是居中对齐的。
距离浏览器左右两边都有一段留白。
中间内容区域,不就是版心嘛!
不说太多。
先创建网页内容(版心)的结构。
紧急修改一下背景图片,虽然上面那张图很美,但是小了。特别的模糊,我就在替换一下背景图
我非常建议大家在选择背景图片的时候,找那种比较宽的图片。
标准是16比9,高清是1280x720,就很合适。
在修改一下导航栏的背景颜色 和 字体颜色
再把头像改改。
最终效果
接着来讲:
创建网页内容(版心)的结构。
先来看左侧 用户信息 部分。
大家请注意!在实际开发中,这里的每个元素的尺寸/位置,一般都是在设计稿中明确标注清楚的,一定要按照上面的标准来写。
而且非常严格,差 1px 都不行!!!!
不信邪,你就逝逝。
我们刚才写的页面,是没有设计稿的,完全属于自己发挥。
除非公司没有具体的设计稿,否则你们不能自己发挥。
再来看右侧 博客列表 部分。
在正式实现之前,先做好一件事。
下面开始。
先来建立右侧的博客列表的框架。
当前图片 和 文字混在一起导致我们看不清内容。
因此我们添加样式的过程中的,一个优先处理背景颜色问题。
以免影响后面的调整。
我们还可以再 sao 一点。
加一个动态的效果:在鼠标悬置在 查看按钮上面时,背景颜色会改变。
有电脑的朋友,会可以试一下。
不过,我感觉这个动态效果,太过于“转瞬即逝”了。
我给它加一个 过渡 效果。
<!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="./css/common.css">
<link rel="stylesheet" href="./css/bologlist.css">
</head>
<body>
<!-- 导航栏 -->
<!-- 为了能够在后续过程中,添加样式等操作,建议都引入一个类属性 -->
<div class="navigation">
<img src="./image/2.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="./image/1.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-10 17: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-10 17:57: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>
/* 放置一些各个页面都会用到的公共样式 */
/* 导航栏就是属于每个页面都会用到的公共样式 */
/* 首先,我们需要去掉浏览器样式 */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 给整个页面加上背景 */
html,body{
/* html 的父元素就是浏览器窗口 */
/* 此处的100%,意思是 html 元素的高度 和 浏览器一样高*/
/* body 的元素是 html */
/* 其意思不言而喻,就是 “继承父亲的财产” */
height: 100%;
/* 加上背景图 */
/* .. 是指 当前 common 文件的父级目录 */
/* 我存放的图片的地方,就与它的父级目录是同一级 */
background-image: url(../image/preview.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;
}
/* 这个文件中专门写和博客列表页相关的样式 */
.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;
}
====================================================================
其实不难发现:详情页 和 列表页 几乎是一摸一样的!
只是 版心的右侧部分有所改变,其它的都一样!
这个时候,我们就可以 Ctrl + c 和 Ctrl + v,复制绝大部分的代码了。
还是创建一个html文件 blogdetail,用来书写我们博客详情页的代码。
完成了博客列表页,其它页面做起来,就简单了很多!!
其实 博客列表页 的 实现,是最难的一部分,后面就都很简单了。
因为大部分的工作,在博客列表页都做完了,直接 复制拷贝,再略作修改就可以了。
这里面有个细节。
CSS 通过 抽取common.css 文件,这样的方式,就达到了“复用”的效果。
那么 HTML,能不能复用吗?难道 就只能复制粘贴吗?
因为 HTML的代码几乎就没有什么改变,所以我们能不能想 CSS 代码一样进行 “引入复用”呢?
可以!但是以博主这点扫盲的知识储备,还做不到。
因为 HTML 原生,是不支持这样的操作的。
本来 HTML 设计出来,只是一个用来做报纸的东西,天知道几十年后,HTML 变成如此的模样。
所以,要想实现类似的效果,就需要借助 JS 对 相同的 HTML 片段进行自动生成。
此时,公共的,重要的 HTML 代码,就不是写 html 文件中了,而是写到一个 JS的函数里,通过这个 JS 函数来生成这个 HTML 片段,然后加入到页面合适位置中。
但是这种做法,在原生开发,非常麻烦。
像前端中的一些框架 Vue,React,其实其中的一个重要功能,就是做这个的。
可以让程序员更好的复用 HTML / CSS /JS,这样的代码片段。
我们在框架中,把它称为“组件(component)”。
这里就不展开,只是告诉大家,前端的代码都是可以通过一些框架来实现“复用”的。有兴趣的,自行了解。【对前端的朋友是必学的】
这里再小拓展一下,
什么是框架?
像前端有框架:Vue,React
Java 后端也有框架:Spring
其他的语言也有框架:
Python:Django,fastAPI
Go:Beego,gin…
反正各种语言都有着各自的框架。
我们谈到的框架是一个“范围很广”的词。
所谓的框架,就是你写一个程序,这个程序的大部分的内容,都是已经写好了的。
你只需要往里面的一些关键部分,去填充一些你自定义的代码 和 逻辑 就好了。
框架,大概就是这么一个东西。
所以,但凡是符合这样条件的东西,我们都将其称为是 框架。
举个例子:四驱车 / 乐高 / 电脑
其实一个四驱车玩具,具体长什么样子,都是规定好了。
只不过换那个壳子,或者 材料 和 马达,就是一个 “新产品”了!
但是本质,它还是一个四驱车玩具,这一点并没有变。
总的框架已经是固定了,无非就是里面的内容由你来决定。
可能用电脑来举例更贴切一些。
一个电脑大的框架,就这么几个大件:CPU,散热器,内存,硬盘,主板,电源,机箱,显示器。
在这个 大框架下面,我们可以进行调整。
比如:
我们觉得这个 CPU不行,我们要换个i9的。
自比如:这个硬盘不行,我们要换个 固态的。
等等。。。
这些操作,都是在现有的框架里面,做出的一些微调。
但是,大的方向都是已经既定好了的。
无论你怎么换,这些软件的本质是不会发生改变的。
这就是框架。
不同的框架,效果是不一样的,功能上差别也是非常大的。
所以,大家不要随意把两个不同的框架,混为一谈!
尤其是 不要把前端和后端的框架,给混淆了!!!
它们两个完全就不搭边!!
各自做的工作,都是完全不同的。
接着上面的内容,我们现在就只需要实现右侧内容就可以了。
注意!这里其实有个问题。
如果 博客的内容很多,样式就会变形。
让我们这里的 三个自然段 变成 30 个自然段。
专业来说:当内容过多的时候,超出了我们浏览器窗口的显示范围,就会出现“滚动”。
这样的“滚动”,就会造成 当前已有的页面格局出现了问题。
解决这个问题,最好的方式就是“固定背景”。
如何固定背景?很容易!!!
当前我们网页的滚动条’是出现在浏览器窗口上的,这就导致拖动滚动条,使整个页面都在滚动。
那么,我们能不能把滚动条,给放到某个元素上,让它再里面滚动?
就是让里面的内容滚动,但是页面不跟着一起滚动。
又因为 内容是在 版心的右侧部分,也就是我们 right部分。
即, right 部分就是 这些内容的父级元素。
这样的话,我们就希望这些内容,只是在 right 部分的内部进行滚动。
right 保持不动。
就像瀑布的一样,山体(right)不动,水流(内容)在往下流动(滚动)。
我们可以通过 给 right 加上 一个简单的CSS属性(overflow: auto)就能实现.
overflow - 中文意思就是溢出。
另外,overflow 还有一些其它的功能
其它的方法很少用,我也不会,就不说了。
目前的网页就算合格了。
有的人可能会问:这个感动条,有点丑。
能不能让这个滚动条变好看点。
办法也是有的,但并不是 CSS 标准中 提供的内容。
CSS 标准(CSS2, CSS3)属于“放之四海而皆准”这样的规则。
只要是主流的浏览器,都会遵守。
新晋浏览器,也会遵守。
但是 标准内容是有限的,像有些细节内容,可能标准上没有规定到,但浏览器也对这些内容进行了支持 和扩展。
就比如现在遇到的滚动条样式,CSS 标准中没有属性来进行设置、
但是主流的浏览器中都提供了相关的方法。
比较悲伤的是,不同的浏览器,提供的设置方法,其实也会存在差异。
了解即可,多的我也不会。
<!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="./css/common.css">
<link rel="stylesheet" href="./css/blogdetail.css">
</head>
<body>
<!-- 导航栏 -->
<!-- 为了能够在后续过程中,添加样式等操作,建议都引入一个类属性 -->
<div class="navigation">
<img src="./image/2.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="./image/1.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">
<!-- 使用一个 div 来包裹整个博客的内容详情 -->
<div class="blog-content">
<!-- 博客标题 -->
<h3>我的第一篇博客</h3>
<!-- 发布时间 -->
<div class="date">2022-05-10 17:48:00</div>
<!-- 博客内容 -->
<!-- 第一个自然段 -->
<p>
<!-- 输入lorem,就会自动生成一串随机字符 -->
从今天起,争取卷死在读的各位,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,就会自动生成一串随机字符 -->
从今天起,争取卷死在读的各位,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,就会自动生成一串随机字符 -->
从今天起,争取卷死在读的各位,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,就会自动生成一串随机字符 -->
从今天起,争取卷死在读的各位,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,就会自动生成一串随机字符 -->
从今天起,争取卷死在读的各位,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,就会自动生成一串随机字符 -->
从今天起,争取卷死在读的各位,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,就会自动生成一串随机字符 -->
从今天起,争取卷死在读的各位,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,就会自动生成一串随机字符 -->
从今天起,争取卷死在读的各位,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,就会自动生成一串随机字符 -->
从今天起,争取卷死在读的各位,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,就会自动生成一串随机字符 -->
从今天起,争取卷死在读的各位,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>
/* 给博客详情页使用的样式文件 */
/* 首先,我们需要给 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;
}
====================================================================
老规矩:Ctrl + C 和 Ctrl + V,再删除不需要的部分。
创建一个 bloglogin HTML文件,来存储。
还没有完!我们还要删除 注销 按钮。
1、页面模板是这样的
2、你登录都没登进去,填什么注销退出登录?
下面我们再来创建一个专门用来 添加登录页样式 的文件。
下面我们先来实现登录的页面框架
此时,我们就可以往这个对话框,添加更具体元素 和 样式了。
此时,我们就完成了 博客登录页。
<!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="./css/common.css">
<link rel="stylesheet" href="./css/bloglogin.css">
</head>
<body>
<!-- 导航栏 -->
<!-- 为了能够在后续过程中,添加样式等操作,建议都引入一个类属性 -->
<div class="navigation">
<img src="./image/2.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>
/* 登录页面的专用样式文件 */
.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;
}
==================================================================
前端这块的入门,相比于后端来说,我觉得更简单一点点。
通过一些练习,很快就能看到成效。
比如,当你学习了一端时间的 HTML 和 CSS(学个把月)
就已经差不多能写出很多页面了,随便给你网站,你照着抄一抄,就能写出一个类似的。
很多看起来复杂的页面,无非就是一些简单样式的叠加。
而且做出网页的成就感,还是非常爆棚的!
可以支持你进一步深入学习下去。
想我们学Java的,得先学2个月 Java 语法,好像能写 黑框框程序了。
再学 2月 数据结构,好像用处不大。
再学 半个月的数据库,好像会了点啥,好像有不会啥。
再学了很久的多线程,网络…
好像能写个控制台的客户端服务器…然后??
像后端这里就属于“厚积薄发”。
就像游戏中的 adc,前期闷头发育,等发育出 关键装备 / 关键等级,然后才能在团战中有所作用。
但是!一个adc只有装备(知识),还不行!
还必须要熟练,这需要不断练习(敲代码,复习知识点),才能成为大佬的存在。
如果缺少练习,装备再好(学的多,学历好),都是白搭,一碰就碎。
而前端,就像 辅助 / 打野,无论前中后期,都有它的身影。
一会去蹲个中路,再绕个草丛去杀个 adc。。。
就是说,体验感是良好的。
但是 打野也是需要装备和等级,是需要刷野的(练习实现个网页,不要求带功能,至少能做出来那种效果),才能发挥作用。才能成为大佬。
后端也别灰心,马上就能看到曙光了。
等 博主 Servlet 学完之后(博客也会到位),你们和我,就能写出一个完整的网站。
总之,前面所学的,都为了后面的内容,做铺垫。
总结
技术学到手后,就要开始准备面试了,找工作的时候一定要好好准备简历,毕竟简历是找工作的敲门砖,还有就是要多做面试题,复习巩固。
: 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;
}
* * *
[]( )题外话
==================================================================
> 前端这块的入门,相比于后端来说,我觉得更简单一点点。
> 通过一些练习,很快就能看到成效。
> 比如,当你学习了一端时间的 HTML 和 CSS(学个把月)
> 就已经差不多能写出很多页面了,随便给你网站,你照着抄一抄,就能写出一个类似的。
> 很多看起来复杂的页面,无非就是一些简单样式的叠加。
> 而且做出网页的成就感,还是非常爆棚的!
> 可以支持你进一步深入学习下去。
>
> 想我们学Java的,得先学2个月 Java 语法,好像能写 黑框框程序了。
> 再学 2月 数据结构,好像用处不大。
> 再学 半个月的数据库,好像会了点啥,好像有不会啥。
> 再学了很久的多线程,网络…
> 好像能写个控制台的客户端服务器…然后??
> 像后端这里就属于“厚积薄发”。
> 就像游戏中的 adc,前期闷头发育,等发育出 关键装备 / 关键等级,然后才能在团战中有所作用。
> 但是!一个adc只有装备(知识),还不行!
> 还必须要熟练,这需要不断练习(敲代码,复习知识点),才能成为大佬的存在。
> 如果缺少练习,装备再好(学的多,学历好),都是白搭,一碰就碎。
>
> 而前端,就像 辅助 / 打野,无论前中后期,都有它的身影。
> 一会去蹲个中路,再绕个草丛去杀个 adc。。。
> 就是说,体验感是良好的。
> 但是 打野也是需要装备和等级,是需要刷野的(练习实现个网页,不要求带功能,至少能做出来那种效果),才能发挥作用。才能成为大佬。
>
> 后端也别灰心,马上就能看到曙光了。
> 等 博主 Servlet 学完之后(博客也会到位),你们和我,就能写出一个完整的网站。
> 总之,前面所学的,都为了后面的内容,做铺垫。
>
### 总结
>技术学到手后,就要开始准备面试了,找工作的时候一定要好好准备简历,毕竟简历是找工作的敲门砖,还有就是要多做面试题,复习巩固。
![](https://img-blog.csdnimg.cn/img_convert/fbe711df02652b471a527f047e70029b.webp?x-oss-process=image/format,png)