HTML5大前端学习过程第二周（Day06）

2020年2月17日
今天访问量破万了，非常开心，在这里Hunter我谢谢大家的支持，给了我坚持下去的动力，让我知道了有人看，所以我会一直更新下去的。

一. 本节课学习目标。

掌握盒模型的结构。
掌握盒模型的宽高计算方式。
掌握CSS的引入方式。
掌握通配选择器的用法。
通过盒模型编写百度首页。

二. 盒模型的结构。

盒模型简介。
HTML元素在网页中进行呈现的，都是呈现的一个盒子结构的形式，所以称为盒模型（box model）。
注意：我们的每一个html元素都有盒模型结构，比如：div，p，a，span，em，strong等等。
盒模型组成部分。
2.1 内容区域，width和height。
记住：只要width和height的值不改，那内容区域的大小就不会更改。
2.2 内填充padding。
记住：内填充是在边框内部的，设置的是边界和内容的距离。
2.3 边框border。
记住：边框可以灵活设置四个方向。
2.4 外间距margin.
记住：外间距是在边框以外的，用来调整的是元素的位置。
如何实现一个块元素水平居中？
实现方式：给该元素添加margin：0 auto;属性即可。
Auto属性作用到margin-left以及margin-right上。
计算方式： margin-left = margin-right = (浏览器宽度 – 当前元素的宽度) / 2
前提：元素的宽度必须是已知确定的。

代码块：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>盒模型</title><style type="text/css">.box {background-color: yellow;/* 决定网页上能够显示内容的区域。 */width: 800px;height: 200px;/* 内填充（边框里面的，设置边框和内容的距离） */padding-left: 100px;/* 边框 border */border-left: 1px solid red;/* 外间距 margin *//* 第一个值：上下   第二个值：左右 auto（自动） */margin: 0 auto;}</style></head><body><div class="box">昨天最好的表现就是今天最低的要求。</div></body>
</html>

三. 盒模型的宽高计算方式。

盒模型的宽。
盒模型的宽度 = 左间距 + 左边框宽度 + 左填充 + 内容区域宽度 + 右填充 + 右边框宽度 + 右间距
盒模型的宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right。
盒模型的高。
盒模型的高度 = 上间距 + 上边框宽度 + 上填充 + 内容区域高度 + 下填充 + 下边框宽度 + 下间距
盒模型的高度 = margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom。

四. 盒模型练习-映纷创意顶部。
效果图：

布局时：如果一块区域内存在多个元素（2个以上，包含2个），此时为了更好的布局，可以考虑使用div进行嵌套管理。

嵌套部分代码块：

<body><!-- 整个html结构 --><div class="top"><img src="img/title2.png"><div class="nav"><a href="" id="first">HOME</a><a href="">WORK</a><a href="">CONTACT</a><a href="">JOIN US</a></div></div></body>

注：
调整距离的秘诀：
1.如果想调整相邻兄弟元素的距离。
margin外间距 margin-top,margin-bottom,margin-left,margin-right
2.如果想调整父子元素的距离。
padding内填充 padding-top,padding-bottom,padding-left,padding-right
想调整padding，一定要作用到外层的div上。

五. CSS的引入方式。

css内部引入方式。
1.1 实现方式：
第一步：在html文件的head标签中，添加上一对style标签。
第二步：在style标签中添加css代码。
1.2 优点:
a. css写起来比较方便。
b. css查找也比较方便。
1.3 缺点：
a. 不符合网页开发规范，html和css分离（结构和样式分离）。
b. Css样式不能复用。
1.4 使用场景：
网页比较小/课堂代码/测试。
Css外部引入方式。
2.1 实现方式：
a. 在当前工程中新建一个单独的css文件。
b. 在css文件中写css代码，记住：不需要再添加sytle标签。
c. 在html文件中的head标签中，通过link标签引入外部的css文件，建立关联。
2.2 优点：
a. 符合网页开发的规范，能够实现结构和样式的分离。
b. Css能够复用。
2.3 缺点:
a.不方便查找和修改。
2.4 使用场景。
中大型网页。
其中link标签代码块：

<link rel="stylesheet" type="text/css" href="css/index.css"/>

href属性放要用的css样式格式的css文件地址。

CSS内联式。
3.1 实现方式：
a.在标签的开始标签中，添加style属性，格式：style=”css样式”
3.2 优点：
a. 写起来方便，而且优先级比较高。
内联式 > 内部（外部）
3.3 缺点：
a. 不能复用。
b. 不符合网页开发规范。
3.4 使用场景：
当你通过内部引入的方式或者外部引入的方式，设置的css代码没有效果时（可能就是遇到了优先级不够高的问题），此时可以将css代码写在标签中。
内联式代码块：

<p class="light" style="color: blue;background-color: red;">床前明月光，疑是地上霜。</p>

六. 通配选择器。
作用：

用来匹配到所有的标签元素。 *：div，p，h1~h6,a等等。
将所有的标签元素自带的样式清除掉。 Margin:0; padding:0;
用法： * { css样式 }
通配选择器格式代码块：

 * {/* 清除所有元素自带的间距和填充 */margin: 0;padding: 0;}

七. 百度首页。

Ps的用法。
1.1 使用ps打开一个图片或者psd设计图。
1.2 快捷方式；
a. 如何将图片放大缩小。 Alt+鼠标滚轮。
b. 可以按住空格键，加鼠标左键，移动图片位置。
1.3 如何通过ps量取尺寸。
a. 找到ps菜单栏中的窗口，勾选菜单中的信息。
b. 修改尺寸单位，修改为像素px。方法：找到信息面板的右上角，点击，点击之后选择面板选项，将第三个标尺单位，改为像素单位。
c. 找到ps工具栏中选框工具。

d. 通过拉取选框，识别对应的尺寸即可。
e. 手残党请注意：如果无法直接量取准确尺寸，可以先拉个框，然后右击变换选区，通过编辑状态调整准确尺寸。记住：识别到准确尺寸后，要退出编辑状态，按回车即可。
1.4 如何识别颜色。
a.找到ps工具栏的前景色工具。

b.点击之后，出来拾色器吸管，吸管点击任何一个位置，即可吸取对应的颜色。
c.将对应的颜色值，复制即可。

d.复制完颜色值之后，记得一定要在前面添加#。

百度首页的代码网址链接：
https://blog.csdn.net/SB_Hunter/article/details/104328487

百度首页总结。
知识点1：完整的网页的布局顺序。

先对网页整体的区域进行划分，划分为多个div区域。
对每一块区域进行上色（宽，高，背景颜色），依次调整间距，做出实际的布局效果。
单独去布局每一块区域的内容（按照1,2,3步骤）。
Css属性
a) 盒模型相关的属性：margin，padding，border，width，height。
b) 文本相关的属性：color,font-size,line-height,font-family,text-dercoration,letter-sacing等
c) 处理新问题：display: inline-block; vertical-align：top;

知识点2：间隙问题的处理？

Html元素自带的间隙问题。
解决方案：添加通配选择器,清除元素自带的盒模型结构。
*{ margin:0； pading：0；}
行属性标签以及行内块属性自带间隙问题。
解决方式1：将分行写的代码放置在同一行写。
解决方式2：
a. 将所有的行元素放置在一个div中。
b. 给div设置字体大小为0的属性。
c. 将行元素字体设置为想要的字体大小。
解决方式3：浮动。
图片对齐方式的问题。
解决方案：给图片添加vertical-align属性，默认值是baseline基线对齐，只需要给上其他值即可。 Vertical-align: top | middle | bottom；

HTML5大前端学习过程第二周（Day06）相关推荐

html5网页制作代码_好程序员HTML5大前端常用开发工具大集合
好程序员HTML5大前端分享常用开发工具大集合HTML5作为当前最为流行的编程语言,广为适用.语言的使用人数急剧增长,更多地开发人员使用这种语言来创建各种内容并放到互联网上.随着每一个新版本的发布,H ...
html5与python哪个好_3个原因告诉你，为什么选择HTML5大前端？
随着当下IT技术的蓬勃发展,越来越多的年轻人想入行或转行至"程序员"梯队. 那么对于零基础的小伙伴来说,综合各方面原因考量,小千首推大家选择HTML5大前端.下面为大家分析原因,希 ...
IT入门？推荐首选学习HTML5大前端
随着当下IT技术的蓬勃发展,越来越多的人想入行或转行至"程序员"梯队.对于零基础的小伙伴来说,综合各方面原因考量,. HTML5到底是什么?HTML5是指第5代HTML(超文本标记 ...
3个原因告诉你，为什么选择HTML5大前端？
随着当下IT技术的蓬勃发展,越来越多的年轻人想入行或转行至"程序员"梯队. 那么对于零基础的小伙伴来说,综合各方面原因考量,小千首推大家选择HTML5大前端.下面为大家分析原因,希 ...
为什么要选择html5,5分钟告诉你，为什么要学HTML5大前端
互联网的掘起,让这世界再次被认知能力,5G.人工智能技术.数据分析.云计算技术等.凭着优秀的深度学习.数据处理方法技术性,人们已经以全新升级的层面在平行世界里思索,这一切最后都将在终端设备中完成. H ...
前端H5怎么切换语言_「自学系列一」HTML5大前端学习路线+视频教程完整版
全新Java.HTML5前端.大数据.Python爬虫.全链UI设计.软件测试.Unity 3D.Go语言等多个技术方向的全套视频. 面对这么多的知识点,有的盆友就麻爪了-- 我是谁? 我该从哪里开始 ...
html5 判断分享,好程序员HTML5大前端分享之函数篇
好程序员HTML5大前端分享之函数篇,将代码编写在函数中,就可以避免在非必要情况下调用该代码,也就是说我们可以让一段代码在特定情况下再去执行. function 关键字:该关键字表示要声明一个函数. ...
【自学系列一】HTML5大前端学习路线+视频教程（完整版）
今年,本公司全新发布了囊括Java.HTML5前端.大数据.Python爬虫.全链UI设计.软件测试.Unity 3D.Go语言等多个技术方向的全套视频. 面对这么多的知识点,有的盆友就麻爪了-- 我 ...
HTML结业做什么项目好,高薪就业-好程序员HTML5大前端12期毕业典礼！
时光飞逝,好程序员web前端培训12期的小伙伴们在好程序员紧张的学习生涯即也将结束,迎来了属于他们的毕业典礼.讲师寄语.美食.表演.送锦旗.颁发毕业证书,一个都不能少. 北科校区王校长为大家送上了毕业 ...

HTML5大前端学习过程第二周（Day06）

HTML5大前端学习过程第二周（Day06）相关推荐

最新文章

热门文章