带你写出和小师妹一样漂亮的网页
本帖最后由 鱼C-小师妹 于 2020-10-27 17:10 编辑有言在先
本系列小师妹带大家来玩一玩 Web 开发！
最底层的基础知识小师妹不会细说啦，大家可以去看小甲鱼老师还在连载的《零基础入门学习Web开发》（HTML5&CSS3）（传送门）。
可以很负责任的说，这套教程是小师妹目前见过最接近 W3C 官方标准的教程，很多知识点都非常权威且精细！
顺便透露个小秘密：
**** Hidden Message *****
小师妹后续都会在本帖中列出用到的知识点和参考学习的讲数以及配套图片资源。
废话不多说，咱们奉行小甲鱼老师说的：“不要重复造轮子”！
直接用 HTML5+CSS3+JavaScript 拿来搞事情！
如果喜欢，别忘了给小师妹评分哦
准备
配套视频：传送门
俗话说得好，工欲善其事，必先利其器啦。
编译器直接用小甲鱼老师在 P31 - 鸟枪换大炮 案例的 VSCode！
插件用 LiveServer，其他插件大家按需选用，后续课程用到，会安利给大家。
安装和下载见视频。
当你准备好上面的东西，新建一个文档，输入 ！然后输入 Tab 会快速新建一个 html5 网页模板。
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
关于上面的标签，小师妹先不解释啦，记住这是一个模板，最标准的网页结构。
具体讲解可以参看：P2 - 第一个程序（06:40）
现在我们还可以安装一个 Prettier - Code formatter 插件，用来美化代码格式，安装过程见视频。
安装完记得按照视频里的过程，设置为保存时自动刷格式。
（ctrl+，弹出设置框，输入 save 找到自动保存）
好啦，现在保存，我们的代码格式自动被美化啦？！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
符合标准的格式也有了，接下来就愉快的进入第二讲吧！
番外篇：VSCode 插件推荐
https://www.bilibili.com/video/BV1r5411Y7S3
涉及插件：
[*]Chinese Language
[*]Bracket Pair Colorizer
[*]Auto Rename Tag
[*]Power Mode
[*]koroFileHeader
常用指令：
[*]ctrl+shift+p = 命令面板
[*]ctrl+，= 设置
本讲灵感来自：【工欲善其事，必先利其器（常规完结）】--让开发效率飞起的VS code插件！
课外阅读，鱼C字幕组翻译的教程（传送门）：
魔法传送门(上)
在线视频：前端开发の魔法传送门(上)
标题层次结构
首先我们先来添加标题：在 HTML 中，共有 6 个标题标签，默认 <h1> 最大，<h6> 最小。
既然没有具体要求，我们先用最大的吧！
在 <body> 中添加：
<h1>我爱鱼C</h1>
保存看一下效果，好啦，这样标题就有啦~
说明文字
接着我们来给这个标题添加一些说明文字。
说明文字呢就是一个文本段落，可以直接输入文字，但是有点太“野蛮”！
更优雅的方式就是将它放在 <p> 标签里。
这样会让你的代码结构化，而不会像刚才那样将内容直接就扔进代码里，看起来一点都不整洁：
<p>ilovefishc.com - 让编程改变世界</p>
url超链接
然后我们这个说明呢很明显是一个网址对吧，但是现在单纯就是一段文本。
那如果我们想跳转到这个链接页面中去怎么办？
这就需要使用文本链接来让文本‘变活’。
文本链接其实就是超链接，通过 <a> 标签来实现。
跳转的链接也就是 url 可以通过 [ Hypertex Reference ] 简称 href 属性来指定。
小师妹这里说一下，属性就是这个标签具备的一个功能，通过设置属性可以设置跳转，类型，状态等等，不同的标签有不同的属性。
那我们创建一个“传送门”，页面就可以跳到上一讲的教程：
<a href="https://www.bilibili.com/video/BV1vK4y147S8">传送门</a>
区块
接着是区块，区块是干嘛用的呢？
很简单，就是将你的代码封装到某个内容区域内，实现一块代码结构。
因为当你把所有标签设置，全都一股脑扔到 <body> 中不是不可以，但很"业余"！
听过小甲鱼老师课程的童鞋，应该都反复听过。
小甲鱼大佬反复强调“代码规范，代码规范，代码规范”重要的事情说 3 遍哈！
就像虽然某位童鞋穿了衣服，裤子和裤衩，但为啥路人纷纷投来异样的目光呢？
很简单呀，因为他把衣服裤衩都套脑袋上了呗，哈哈哈哈。
这样说是不是就明白为什么要将代码按照模块放置了吧。
通过区块化代码来提升整个代码的可读性和可修改性。
在 HTML5 中，有很多“区块”标签，比如 <header>,<section>,<aside>,<footer> 等，后续都会用到。
具体细节大家可以参看 P26《这终究是一个语义为王的时代》：
那今天我们就先用最初级和万能的 <div> 标签吧：
<div>
<h1>我爱鱼C</h1>
<p>ilovefishc.com-让编程改变世界</p>
<ahref="https://www.bilibili.com/video/BV1vK4y147S8">传送门</a>
</div>
将 <body> 里面所有的内容元素，扔到 <div> 区块里，结构性一下就很强了有木有。
为了方便管理，我们给这个区块起个名字吧，添加 id 属性，命名为 container：
<div id="container">
虽然页面没有任何变化，但是却很有内涵了嘿嘿~
添加高清背景图
现在大家看这个网页还是觉得有点单调，白白的一个页面啥也没有。
那为了让它看起来更好看一些呢，我们可以给它添加一个背景。
由于这个背景图呢，我们是要它高清的铺满整个屏幕的，所以推荐使用 1600*1200 以上像素级别的 jpg。
先将我们要的背景下载好放在和html文件相同的目录下
这里需要说明一下，Web 上看到的图片并不是像 word 一样嵌入进去的哦！
都是通过外部链接加以显示滴！
所以任何图像的显示都需要在HTML文档目录下，放入相应的图片才可以。
（ CSS 或者 SVFG 形式绘制的除外哈）
现在需要创建 CSS 样式代码来指定页面元素的呈现形式，也就是将图片显示为页面背景。
在定义 CSS 之前，需要创建相应的容器，来容纳这些样式。
通常是 <head> 创建一个 style 元素来作为样式的容器：
<head>
<meta charset="utf-8">
<title>欢迎来到小师妹的主页</title>
<style type="text/css"></style>
</head>
创建好 style 元素后，就可以在其中添加 CSS 样式了，前面我们知道了。
<body> 标签包含了所有呈现给浏览者看的内容信息。
所以在背景图也是在这里设置，将我们保存好的图片设置为页面背景 background，然后通过 url，调用同目录下的 xsm.jpg：
<style type="text/css">
body{
background: url(xsm.jpg);
}
</style>
保存看一下效果，哎呀！
背景是有了，但是好像哪里不对劲哦~
调整背景图优化显示
这里呢我上传的背景图片分辨率是 3508*1897，而我手头电脑屏幕的分辨率是 1920*1080 的。
这图片跟屏幕的分辨率明显不相符嘛，那当然页面就会出现这样奇怪的显示了哈哈。
那怎么办？
难道要我们自己亲自算吗？
开玩笑！
很简单，只需要设置背景图根据浏览器大小进行相应的缩放就可以啦！
在下面这个 body 里面添加：
body{
background:url(xsm.jpg) no-repeat;
background-size:cover;
}
保存就是这样的效果。
所以，这也是为什么需要高清大图的原因。
因为大了的话小了也能用，小了的话，大了就没发玩儿咯~
这个background的详细属性呢，可以参看：P43+P44
搞定，这就非常和谐啦!
修改字体颜色
现在我们添加了背景之后呢，原来的黑色字体一下就很不搭了，起码看起来不是很清楚对吧？
为了看得清晰，我们给它换一个对比度比较高的字体颜色吧~
如果想直观的选取更多颜色，我们可以参考小甲鱼老师给我们开发的颜色选择器：传送门
大家可以随便搞颜色嘻嘻~
我们直接在 body 里面添加：
color:#FFBB66;
保存，看看效果，嘻嘻颜色很是骚气哈哈~
咦~这个传送门的字怎么没变化？
怎么肥事？
时间有限，童鞋们就先自己研究下，我们下一讲再来解决这个问题吧，seeyoubye~
魔法传送门(下)
在线视频：前端开发の魔法传送门(下)
源码：
哈喽~我们又见面啦！
上个视频我们基于 CSS，给网页添加了高清图片背景，父级修改背景高度属性和字体颜色。
但是唯独“传送门”没变化，它默认的颜色跟我这个背景颜色混为一体了，看不清楚对吧，那要修改怎么弄？
这是上一讲留给小伙伴们研究的一个小问题，不知道大家研究得如何啦？
研究出来的小伙伴弹幕里举个爪呗。
好吧，不绕弯子啦，我们先来优化一下“传送门”
修改超链接字体颜色
我们在这个 style 里面添加一个 color 属性来设置它的字体颜色：
保存看看效果，这样是不是看起来好一点啦~
其实这个涉及到a元素的特性，不能通过body选择器的全局样式来指定，需要单独给它定制样式。所以上一节我们设了body也对它不起作用。
美化超链接
接下来我们给它加上一个带有情怀的框框，美化一下。
突然想起一句名言：所谓的自由，必须要有限制！
哈哈，谁说的不重要，反正不是鲁迅，不扯远啦。
近些年圆角矩形是网页开发的必备佳品~
而圆角矩形的精髓就是：在周边加上1px的细细白色边框，然后设置小小的3px圆角值
a{
border：1px solid #ff6060；【border属性设置边框1px，实现这个6060的颜色】
border-radius：3px 【border-radius属性设置圆角边距】
}
保存看一下效果吧~
详细玩法小甲鱼老师有讲过：
● P45 我们是优雅生活的践行者（上）
● P46 我们是优雅生活的践行者（下）
框框是有了，但是呢，大家看到了吗？这里超链接自带的一条下划线摆在这里显得有点多余了，也不好看，所以我们还得继续调整，还是接着在下面添加：
a{
font-size: 15px;
background: #ff6060;
color: #000000;
border:3px solid #ff6060；
padding:3px 15px; 【padding内边距属性，上下两侧3px，左右两侧，15px】
text-decoration: none; 【text-decoration属性，none就是去掉链接下划线】
}
好啦~看一下效果吧！
文字水平居中
在HTML中，如果想把文字放到页面正中间，必须通过设置水平、竖直两个方向都是“居中”
上一讲中我们设置了一个区块div“container”来封装文字
所以我们继续在CSS样式下，设置container，宽度为100%，横向撑满屏幕，然后文字居中即可：
#container{
width: 100%;
text-align: center;
}
保存，噔噔像我这种有强迫症的人这样滴对称看着就灰常舒服啦！是不是被我说中啦？
文字垂直居中
垂直居中的话我们换一种方式来设置，通过改变container的top属性来进行垂直居中。
在此之前呢，需要对container的父级body，增加一些初始化定义：
margin: 0; 【margin、padding均设置为0，算是一个潜规则】
padding:0; 【通过预设外边距、内边距为0，提高自主控制】
当你想要设置container的top属性，那么前提条件是：
container的定位方式必须是：absolute绝对定位，让其脱离文档流，自由地按我们的方式进行布局
position是CSS中重要的定位属性，指定了绝对和相对等定位元素，后续我们再详细介绍。
着急了解的同学也可以先去看看甲鱼老师的Web开发第54节课你的定位决定你的地位吧 ~
我们来修改下container代码：
position: absolute;
top:50%;
保存看看效果，内容区域就已经下移了，但是还不算垂直居中
还需要container向上移动，当移动距离为container内容高度一半时，才算垂直居中。
通俗比喻就是，假设container整体高度50px，则只需要上移25像素就可以。
但是！！我们并不知道container的高度到底是多少！
别急！HTML5中，只需要设置transform就可以啦，然后给它一个值translateY，使得container在Y轴方向上向上移动50%，就是一半。这样就无需管它container具体有多高啦。
在container里面添加：
transform: translateY(-50%); 【HTML中的Y轴跟数学的Y轴方向是相反的哟~】
ok啦！它移上去了对吧，这样就真正居中啦！
这算是垂直居中的一个技巧，更多玩法可以参看这篇帖子：私家藏货之@垂直居中 【嘘...】
调整显示字体
位置调整完了，现在默认的字体就显得太普通了，我们必须要DIY一下字体。
小王子说过的一句话：
正因为你为你的玫瑰花费了时间，这才使你的玫瑰变得如此重要~
在不同的系统中有着不同的默认最佳显示字体，Mac是系统自带的黑体，微软的是微软雅黑。
咱们可以通过设置font-family属性给它改个自己喜欢的字体，这里我们就给它改为新宋体吧，新宋体的值是 NSimSun：
html,body{
font-family:NSimSun;
}
好啦，它就变为新宋体啦~我们放大看一下，嗯整体效果还可以，就是这个字的尺寸有点小了，显得有点小气吼？需要给它放大一些，让整体比例看起来协调一点。
调整字体大小
这里先将我们这个“我爱鱼C”放大一些，彰显独一无二的气质！
h1{
font-size: 66px; 【font-size就是设置字体大小的】
}
现在来修改p的大小，适当放大：
p{
font-size: 30px;
}
然后同样方式修改“传送门”的尺寸：
a{
font-size: 40px;
}
保存，放大看一下效果，放大之后我们这个圆角比例就太小了，我们给它改大一点，现在感觉还蛮nice的呢~嘻嘻~
好啦，今天就先分享到这里啦~如果觉得小师妹讲的还可以的话，记得给小师妹三连鼓励呦~
下一讲小师妹就要给大家介绍另一个新朋友JavaScript咯~咱们下一讲见吧~byebye！
未完待续！！
学习 哇哦～ 本帖最后由 Hello. 于 2020-6-24 19:46 编辑
顺便附上vscode插件推荐～传送门{:10_256:} 我想看
瞧一瞧看一看勒 订一份 呃...我是来看小秘密的... 学习 不要重复造轮子 {:10_256:} 支持支持！ 。。。 好 ???{:10_277:} Hello. 发表于 2020-6-22 19:15
顺便附上vscode插件推荐～传送门
不错不错！ Hello. 发表于 2020-6-22 19:15
顺便附上vscode插件推荐～传送门
太棒咯！
介意我参考下，出一期视频吗？？ 0.0 本帖最后由 Hello. 于 2020-6-25 12:10 编辑
鱼C-小师妹 发表于 2020-6-25 08:52
太棒咯！
介意我参考下，出一期视频吗？？
哇哦～太棒了！（ 发了记得通知我们去围观{:10_297:}） 不二如是 发表于 2020-6-25 08:50
不错不错！
感谢两位大牛鼓励吖{:10_281:}