优秀程序员HTML5培训教程如何使用html和css以及样式

布局步骤

第1 步：清除默认样式

第二步：划分模块

第三步：设置模块的大小和位置

第四步：划分下一级模块

html 和CSS

引入网络头像

link rel=’快捷方式图标’ href=’img/.ico’

如何引入css样式表

如何引入css样式表

1.外部链接类型

链接href=” rel=’样式表’

2. 嵌入式

风格/风格

3. 内联样式

div style=’width:200px;height:200pxs;’/div

@import url(”) 文件命名和变量命名

命名约定

1. 严格区分大小写

2. 可以使用字母数字字符和下划线$，开头不能有数字。

3. 命名语义

4. 可以使用驼峰式命名

清除默认样式

清晰的边距

*{

边距： 0;

填充： 0；

列表样式： 无；

}

标签有明显的下划线和颜色

一个{

颜色：黑色；

文本装饰： 无；

}

css中如何表达颜色

css 中颜色的表示方式：

1.预定义颜色【关键词颜色】红粉蓝黄

2.#6位颜色值#00-00-00红、绿、蓝

3.rgb（红、绿、蓝）：rgb([0-255],[0-255],[0-255])

4.rgba（红、绿、蓝、透明度）：rgba([0-255],[0-255],[0-255],[0-1])

0-1: 0完全透明，1不透明

html中的标签和属性

html:

标签：

按语法分类：

1.单标签：只有开始标签

元图像a

2.双标签：有开始标签和结束标签

html/html

3. 属性的语法

语法：

属性名称=’属性值’

属性名称=’属性值1 属性值2′

注：

1. 标签名和属性名之间必须有空格。

2.多个属性之间必须有空格。

3. 多个属性值之间必须有空格。

4. 起始标记名称后面有一个空格。

根据标签在页面上的呈现效果分类：

1. 行内元素

行内元素定义：显示在一行中。只能设置左右间距，不能设置上下间距。

例：span del i em b Strong a(title=’鼠标移入时显示的文字’; target=”(新窗口打开的位置_self:在本窗口打开；_blank:在新窗口打开).

2. 块元素

块元素定义：可以设置宽度和高度，占一行。

示例：div 标题标签列表标签段落标签.

3. 内联块元素

行内块元素定义：可以设置宽度和高度，并在一行中显示。

示例：img [title=’鼠标移入时显示的文字’]表单控件

元素变换

块元素：display:block；

内联块元素：display:inline-block；

行内元素：display:inline；

元素级

块元素内联块元素内联元素

元素嵌套规范

1.同级之间可以嵌套。

2. 高层元素可以嵌套低层元素。

3.段落标签只能嵌套内联元素

4、a标签不能嵌套标签； p 不能嵌套p

盒子模型及其问题

由四部分组成：

1、marginouter间距：盒子之间的距离

2.边界边界

3. padding（内间距）是边框与内容之间的距离。

4.内容内容

边距-上边距-右边距-下边距-左

边距： 50px；右上左下

边距： 50px 100px；上、下、左、右

margin:0 自动；自动自动

边距： 50px 100px 150px；左上和右下

边距： 50px 100px 150px 200px；右上左下

border: 1px 纯红色；

上边框\右边框\下边框\左边框

border-top-width：上边框的宽度

padding:的设置方法与margin相同

内容：

宽度： 值百分比自动

height: 值百分比自动

盒子模型的问题：

1.大多数元素的margin和padding默认为0，但有些margin和padding不为0，比如body标题标签(h1-h6)(列表标签如ul ol il)段落标签

2、想要获取的两个块元素的边距会重叠，且值为最大值。

3. margin 可以设置为[负数]，padding 不能设置为[负数]。

4.内联元素只有左右边距，没有上下边距

5、如果（1）有嵌套元素，（2）父元素没有顶部边框，（3）顶部填充，（4）父元素和子元素之间没有其他内容，则子元素margin-top 将应用于父元素

解决margin-top问题：

1、将子元素的margin-top替换为父元素的padding-top；

2、父元素添加overflow:hidden；

宽度和高度设置和计算

高度：自动/百分比/像素；

宽度：自动/百分比/像素；

高度：自动；对父元素的引用

宽度：自动；参考资料及内容

框大小：边框框；将边框数入盒子内；

元素的实际宽度和高度

实际宽度=border-left + padding-left + width +paddint-right + border-right；

实际高度=border-top + padding-top + height + padding-bottom + border-bottom；

漂浮

功能：水平排列块元素

样式：浮动：左；从左到右排列

浮动：右；从右到左排列

原理：让元素逃离文档流，从文档层浮动到浮动层。

造成的问题：父元素没有设置高度，子元素都是浮动的，浮动的子元素无法支撑父元素。 （浮动元素脱离文档流）

*解决方案一：父元素添加overflow:hidden； （多余的部分隐藏）

*解决方案二：在父元素内容末尾添加一个具有明确浮动属性的元素。

清除：右/左/两者；清除其他浮动对其的影响

例子：

.box:之后{

内容：”;

显示：块；

宽度： 0;

高度： 0;

清除：两者；

}

*解决方案3：如果父元素可以设置高度，则尽量设置高度

浮动后块元素的引用内容：属性值auto

位置

定位元素离开文档层，到达定位层

定位元素将有另外5 种样式：

右上左下z-index：999

右上左下级别（级别越高，离用户越近）【只能用在有定位属性的元素上】

等级：

z 索引：整数；

几种定位方式：

1、相对定位：

相对于自身的位置，保留文档层中的原始位置

用法：

职位：亲属；

2、绝对定位：

相对于最近定位的祖先元素定位，完全脱离文档流（其他元素取代它的位置）

用法：

位置：绝对；

+方向值

3、固定定位：

相对于浏览器的四个侧面，与文档流完全分离

用法：

位置：固定；

同时定义了top和bottom，元素的判断关系会应用哪种样式：

顶部的重量大于底部的重量

左边的重量大于右边的重量

当元素起作用时：

1.如果是

职位：亲属；

左边：

利润：

先应用边距，然后应用相对；

2.如果是

位置：绝对；

左边：

利润：

先应用绝对值，然后应用边距；

如何将定位元素居中：

方法一：

1.水平居中：

位置：绝对；

左：50%；

margin-left: – 自身长度的一半；

2. 垂直居中：

位置：绝对；

顶部：50%；

margin-top: – 自身长度的一半；

3.绝对居中：

位置：绝对；

左：50%；

顶部：50%；

margin-left: – 自身长度的一半；

margin-top: – 自身长度的一半；

方法二：

1.水平居中：

位置：绝对；

左：0；

右：0

2D 和3D

2D 和3D 属性：

1. 平移方式

变换：翻译（x，y）；向上为负，向下为正

变换：translateX(100px);

变换：旋转（180）； (1转) 转身

平移transform:translate() 示例：translate(x,y) translateX()

旋转transform:rotate()示例rotate(180deg)顺时针-180deg逆时针

变换：旋转（）空间平移（）；

变换-origin:px 像素；变换的中心点；

左中心；

缩放transform:scale() 示例：scale(2) 放大到原来的2倍scale(0.n) 缩小到原来的0.n scale(m, n) x轴m，y轴n

倾斜transform:skew() 示例：skew(45peg) 左拉伸45 skew(45peg, m)

过渡transitiontransition：均为0.5s；所有时间

3. 过渡属性样式：transition-property:

可以是：该属性的所有样式

4. 总过渡时间：transition-duration：

5. 转换时间函数：transition-timing-function:

线性（匀速）缓动（开头和结尾慢，中间快）

cubic-bezier (1, 0.07, 0.54, 0.21) 贝塞尔曲线

6. 延迟转换-delay:

3D效果：与2D相同的过渡和变换；

预期：将预期（消失点的值）添加到父元素中

预期原点：x y；消失点的位置调整观察角度（大多数情况下不设置）

变换：ratate3d（0-1的值、0-1的值、0-1的值、45deg）

变换：rateY(45deg)

变换：translate3d (0-1, 0-1, px)

父元素：transform-style：preserve-3d；

动画片

动画规则：

@keyframes 动画名称（给它任何你想要的）{

（动画规则）

从{}

到{}

}

@keyframes 动画名称（给它任何你想要的）{

（动画规则）

0%{}

50%{}

100%{}

}

@关键帧动画1{

从{

背景颜色：红色；

}

到{

背景颜色：蓝色；

}

}

安装动画： 为元素添加动画。元素{

动画：动画1个时间步长时间函数延迟时间倍；

}

安装多个动画：元素{

动画：动画1时间、动画2时间、动画1时间；

和其他动画一样可以通过animation属性附加；

}

动画风格

动画名称：动画名称

时间：动画持续时间

步骤：动画步骤：8；

时间函数：animation-timing-function

延迟：动画延迟

动画数量：animation-iteration-count：infinite（无限次）/2；

指定接下来的动画是否反转：animation-direction:alternate（反转）/normal（正常）；

最终状态：animation-fill-mode：向后（默认（保持初始状态））/向前（保持当前状态）；

state指定动画是否在移动：animation-play-state: running/paused；

元素分类

根据页面的渲染效果：

1.行内元素：显示在一行，宽度和高度不能设置：（存储文本）

跨度强德尔

2.内联块元素：一行显示，宽度和高度可设置：（有间隙的话不常用）

img 表单控件

3.块元素：可设置宽高，占一行

div 标题标签(h1-h6) 列表标签(ul-li ol-li dldt+dd 段落标签(p pre))

元素嵌套规范：

1.同级可以互相嵌套

2. 高级元素可以嵌套在低级元素中。

3、p标签只能嵌套内联元素

4.a链接不能相互嵌套

元素转换：

1、块元素：显示：块；

2、内联块元素：display:inline-block；

3. 行内元素：display: inline;

背景图像和浏览器核心

背景图片

先设置尺寸，再引入背景；

background: url(‘path’) 不重复左下/包含；

//图片位置禁止重复Position(上下左右)

路径：背景图像：url(“”)，url(“”)；加载多个背景图像。背景图片大小：background-size: 100px auto, 100px auto;背景图片会重复： 4.background-repeat：不重复、重复； （不再重复）

5.background-repeat:repeat-x（x方向重复）

background-repeat:repeat-y（沿y 方向重复）

背景图片的位置：background-position: x y; (数值方向值(上/左下/右中心(可省略)))

背景开始渲染的位置：background-origin: 8. 填充盒； （默认）从填充位置开始渲染

9. 边框；从边框位置开始渲染

内容框；从内容的位置开始渲染

图片结束渲染的位置：background-clip: 11. 填充盒； （默认）从填充位置结束渲染

12. 边框；从边界位置结束渲染

内容框；从内容的位置结束渲染

导致背景图片加载到浏览器中background-attachment: 已修复；8可以缩写为：

背景：用空格分隔；

背景图渐变background: Linear-gradiend(top, color 1, color 2, color n) //渐变开始的方向（默认top）类似25deg（25度）

10. 浏览器内核//背景色渐变

1. /* 标准语法*/

示例：background: 线性渐变(top,#3bbcff,#47eaff);

2. /* 谷歌内核-webkit- */

示例：background: -webkit-linear-gradient(top,#3bbcff,#47eaff);

3. /* 火狐内核-moz- */

示例：background: -moz-linear-gradient(top,#3bbcff,#47eaff);

4. /* 欧鹏内核-o- */

示例：background: -o-线性渐变(top,#3bbcff,#47eaff);

5. /* IE内核-ms- */

示例：background: -ms-linear-gradient(top,#3bbcff,#47eaff);

文件读取方法路径

绝对路径：从盘符开始的完整路径

相对路径：两个文件之间的位置关系

边框的相关属性【圆角、边框形状】

border-radius：边框的半径，设置圆角为n%或num个像素

边框样式：点实线双虚线；

上边框是点状的

右边框是实线

下边框是双线

左边框是虚线

透明度

透明度选择：（整个容器发生变化）

不透明度： 0-1 之间的值；

字体

font-family=”Font” //字体样式可以继承

鼠标移动方式

跨度标签

光标：指针；鼠标款式： 手形

阴影

box-shadow：x轴偏移、y轴偏移、阴影模糊级别、阴影大小（0为与自身大小相同）、阴影颜色；

介绍角色图标

人物图标介绍：

行内元素可选

span class=”iconfont 图标类名”

可调样式： 同文

文件流

文件流程：

标准情况下，页面元素是从左到右、从上到下排列的。

Flex布局（标准化设计稿）——灵活布局

容器（父元素）的属性：[display:flex;]

*flex-direction: 确定主轴方向。

row 主轴在水平方向，从左到右（默认）。

row-reverse 主轴为水平方向，从右到左

column 主轴为垂直方向，从上到下

column-reverse 主轴为垂直方向，从下到上

*flex-wrap: 确定物品包装

wrapp: 物品包装

nowrap: 项目不换行（默认）

包裹反转：物品被包裹并反转

*justify-content: 确定项目在主轴上的对齐方式

弹性启动；主轴起点

弯曲端；主轴终点

中心；主轴中心

之间的空间；对齐两端

周围空间；物品两侧的距离相等

*align-items：项目在交叉轴上的对齐方式（适用于单轴和多轴）

flex-start: 交叉轴的起点

flex-end：交叉轴的终点

中心：交叉轴的中心

基线：基线对齐（文本底部）

*align-content: 定义项目在交叉轴上的对齐方式（仅适用于多个轴）

弹性启动；交叉轴的起点

弯曲端；交叉轴的末端

中心；交叉轴中心

之间的空间；对齐两端

周围空间；两边距离相等

子元素（项）的属性：

*order：定义项目的排序顺序。值越小则越高。默认值为0（可以取负值）。

*flex-grow: 定义项目的放大比例。默认值为0，即使有剩余空间也不会放大。

*flex-shrik：定义项目的缩减比例。默认值为1，如果空间不足，项目将会缩小；当值为0时，如果空间不足，项目不会收缩。

*flex-basis: 定义项目占用的主轴空间。默认是自动或者自己添加像素；

*align-self: 定义单个项目在横轴上的对齐方式。

flex-start: 交叉轴的起点

flex-end：交叉轴的终点

中心：交叉轴的中心

滚动条

溢出-x：自动； x轴上多余部分的表达式。

自动：自动； （如果超过，会自动以滚动条的形式显示）

删除滚动条：将它们添加到具有溢出属性的元素中

:-webkit-滚动条{

高度：0；

}

溢出-x: 可见|隐藏|滚动|自动|无显示|无内容；

数值描述测试

可见不会裁剪内容，并且可能出现在内容框之外。测试

隐藏的作物内容- 不提供滚动机制。测试

滚动剪辑内容- 提供滚动机制。测试

auto 如果盒子溢出，应提供滚动机制。测试

no-display 如果内容不适合内容框，则删除整个框。测试

no-content 如果内容不适合内容框，则隐藏整个内容。测试

旋转木马

swiper(.js).com

床单

[行] [列]

表上的属性

表上的属性：

border：表格边框cellspacing：单元格之间的间距

cellpadding：单元格内容与其边框之间的填充

bgcolor：表格的背景颜色background：表格的背景图片

width：桌子宽度height：桌子高度

border-collaspe: collaspe: 边框合并，不重叠cellspacing: 0: 边框合并，但合并后边框的宽度等于前两个边框宽度之和

标题：表格标题

background: 表格背景图片

cellspacing: 单元格之间的间隙宽度

align: 表格的水平对齐方式，通常为左、中、右

表标题

captionalign=’水平对齐’ valign=’标题与表格的相对位置’/caption

单元格[tr] [td]

宽度：单元格宽度高度：单元格高度

align：单元格内文本的对齐方式，通常为左、中、右左、中、右

valign：单元格内文本的对齐方式，通常是上、中、下

nowrap：设置单元格宽度时，当文本长度比单元格宽度宽且即将换行时，此标签将阻止其换行。

tralign=’中心’valign=’底部’

tdalign=’center’nowrap免费空气充值/td

td宽度=’100px’IP卡/td

td width=’100px’ bgcolor=’#006400′ valign=’top’在线游戏/td

/tr

表格跨行跨列[td]

rowspan：跨行标签，表示跨越了多少行

colspan：跨列标签，表示跨越了多少列

表标签扩展及其属性

thead：定义表的标题。

tbody：定义表格的主体（文本）。

tfoot：定义表格的页脚（脚注或表格注释）。

colgroup：标签用于对表中的列进行分组以进行格式化。

注意：无论thead、tbody、tfoot的代码顺序如何，在显示HTML时，总是先显示thead，然后是tbody，最后是tfoot。

1. Thead里面一定要有tr标签！

2. tfoot元素必须包含一个或多个

<tr> 标签。

3、<tbody> 元素内部必须包含一个或者多个 <tr> 标签。

4、必须在 table 元素内部使用这些标签。

5、当不同行间的单元格合并时各单元格所在的行不要加tbody标签。

标题栏

《tr》<th></th>《/tr》 用法和td相似 知识自动将单元格内容以粗体显示

表单控件表单标签

<form action=” ” method=” “>

action:表单信息提交的位置；

method：提交的方式

get：地址栏，信息量少，安全性低

post：信息量多，比较安全

1.输入文本【输入框】：

用户名：<input type=”text” placeholder=”请输入用户名” maxlength=”10″ value=” ” name=”username” class=””>

placeholder：默认提示文本;

maxlength:规定输入的最大字符数

placeholder下的缩进

text-indent：2em；缩进

2.输入密码【密码框】：

密码：<input type=”password” placeholder=”请输入密码” maxlength=”10″ value=” ” name=”psw” class=””>

3.单选按钮[name的值必须相同]：

请选择你的性别：

<label for=”man”> [label实现点什么就选中 ，for中的值和id中的值相同]

男：<input type=”radio” name=”sex” id=”man” checked> //checked默认选项

</label>

<label for=”woman”>

女：<input type=”radio” name=”sex” id=”woman”>

</label>

4.多选按钮[name的值必须相同]：

请选择你喜欢的音乐：

摇滚：<input type=”checkbox” checked>

摇滚：<input type=”checkbox” checked>

摇滚：<input type=”checkbox” checked>

5.下拉列表【下拉框】：

选择你的学历：

<select name=”” id=””>

<option value=””>学士</option>

<option value=””>博士</option>

<option value=””>硕士</option>

</select>

6.上传文件：

选择你的照片：

<input type=”file”>

7.留言文本空间：

<textarea name=”” id=”” rows=”” col=””>

</textarea>

8.用户是否允许重新设置textarea大小css属性：

resize: none/both/vertical/horizontal;不允许/上下允许拖动/只能在垂直方向拖动/只能在水平方向 拖动

9.重置按钮：

<input type=”reset”>

10.提交按钮：

<input type=”submit”>

11.自定义按钮：

<input type=”button” value=”按钮”>

<button>搜索</button>

12.颜色：

<input type=”color”>

13.时间日期：

年月：<input type=”month”>

年周：<input type=”week”>

时分：<input type=”time”>

年月日：<input type=”date”>

年月时分：<input type=”datetime-local”>

14.验证

<input type=”email”> 邮箱验证

<input type=”tel” autofocus> 电话

15. autofocus 自动获取焦点

</form>

文本模型

文本换行

使非中日韩文本换行

word-break: break-all ;

文本禁止换行

white-space:nowrap;

单行文本溢出部分以省略号显示

overflow: hidden;(放文本的容器)

text-overflow: ellipsis;

多行文本溢出

指定为弹性盒子display: -webkit-box;在弹性盒模型中指定元素的排列顺序-webkit-box-orient: vertical;指定文本显示（溢出）的行数;-webkit-line-clamp: 3;height要是line-height的倍数line-height: 70px;overflow：hidden；音频视频标签

音频标签

<audio src=”” controls loop autoplay></audio>

controls 空间向用户显示：

loop 循环播放

autoplay当前页面加载完自动播放

视频标签

<video src=”” controls loop autoplay></video>

H5语义化标签

<header>头部</header>

<nav>导航</nav>

<aside>侧导航<aside>

<section>页面中的某一部分</section>

<main>主体</main>

<footer>底部</footer>

meta标记【签】

name=”关键字” cantent=”内容”

<mate http-equiv=”Refresh” content=”10″;url=”跳转路径”> //每10s刷新一次并且跳转到跳转路径知识的文件

bgsound标签

<bgsound src=”路径” loop=”播放次数”>

body属性

bgcolor:背景颜色background：背景图片text：文档中文字的颜色link：超链接的颜色alink：正在访问的超链接的颜色vlink：已访问过的超链接的颜色leftmargin/rightmargin/topmargin/bottommargin： 左/右/上/下边距的像素值对文字操作的标签

<p></p>开始一个新段落，可单可双换行标签，单独标记<pre></pre>预格式化【敲什么样式，显示什么样式】<font></font> 用来设置文字的字体 大小 颜色 粗细等文字样式标记[均成对出现]b 粗体 i 斜体 u 下划线 tt 等宽sup 上标体 sub 下表体 strike 删除线 big 大号字样small 小号字样 blink 闪烁字样 em强调字样 strong着重字样 cite引用字样列表标签

符号列表<ul type=”circlr(空心圆点)/disc（实心圆点）【默认】/square（实心方块）”>2. <li>

<li>

</ul>

排序列表<ol type=”1(数字) /a（a，b，c..）/ A(A,B,C…)/ i(i,ii,iii,…)/ I(I,II,III,…)”>4. <li>

<li>

</ol>

a标签

<a href=”路径 ” title=”鼠标移入时显示的文字” target=” “(新窗口打开的位置 _self:在本窗口打开;_blank:在新窗口打开；_parent:在当前窗口的父窗口打开链接；_top:在整个浏览器窗口打开) …

[字符实体]常用的转义字符

显示结果 描述 实体名称

空格

< 小于号

大于号

& 和号

” 引号

‘ 撇号 (IE不支持)

￠ 分（cent）

£ 镑（pound）

¥ 元（yen）

€ 欧元（euro）

§ 小节

© 版权（copyright）

® 注册商标

™ 商标

× 乘号

÷ 除号

选择器

分类

css选择器

1.通用选择器：

*｛｝//选择所有的标签

2.群组选择器：

E1,E2,E3..｛｝//选择E1 E2 E3

3.标签选择器

标签名｛｝

4.类名选择器：

.类名｛｝

5.后代选择器

.E1 .E2｛｝ //选择E1 的后代E2

6.交叉选择器

标签名.类名｛｝

7.id选择器

例如 创建id

<div id=“box”></div>

#id名｛｝ //选择页面中id为**的标签

8.伪类选择器：

鼠标移入状态

E：hover{ } E元素选择鼠标移入状态

E：hover .子类{ } 选择e元素下鼠标移入时子类的变化

获取焦点，用于表单的输入

E: focus{

outline: none;

}

9.伪结构选择器：

E：first-child｛｝ 作为子元素的第一个孩子的E标签

E：last-child｛｝ 作为子元素的最后第一个孩子的E标签

E: nth-child(n){} //作为子元素的第n个孩子的E标签

E: nth-last-child(n) 作为子元素的倒数第n个孩子的E标签

E：first-of-type｛｝ 作为子元素的同类型的第一元素

E：last-of-type｛｝ 作为子元素的同类型中的最后一个元素

E: nth-of-type（n） 作为子元素的同类型中的第n个元素

E: nth-last-of-type(n) 作为子元素的同类型中的倒数第n个元素

（n）n可以以为num/even（偶数）/odd(奇数)/3n（3的倍数）

例子：5.15/伪结构选择器

10.伪元素选择器：

::after{} 在元素之后加入一个

::before{

content：“内容之前”；

color：；

} 在元素之前

属于行内元素

::after{} ::before{}伪元素 content：””； 样式必须写

​

11.子类选择器

相邻兄弟选择器

E1+E2｛｝ 选择E1的下一个兄弟元素E2（不能选中上一个兄弟元素）

div.box>a+img a和img统计

子类选择器

E1>E2{} 选择E1的子类元素E2

例子：div.box>div.item{$}*20

div.box>a>img

12.属性选择器

[属性名]{} 选择所有拥有属性为 属性名 的元素

[属性名=“value”]｛｝ 选择拥有属性名的属性 且属性值为value

E[属性名=“value”]{} 选择拥有属性名的属性 且属性值为value的E元素

E[属性名~=“value”]{} 选择拥有属性名的属性 并且属性值一个或者多个，其中一个属性值为value的E元素

E[value^=“1”]{} 选择拥有 value的属性 并且属性值一个或者多个，其中一个属性值以 1 开头的E元素

E[value$=“1”]{} 选择拥有 value的属性 并且属性值一个或者多个，其中一个属性值以 1 结尾的E元素

E[value*=“1”]{} 选择拥有 value的属性 并且属性值一个或者多个，其中一个属性值包含 1 的E元素

例子：属性选择器

选择器的优先级

宗旨：越具体的优先级越高

id (100 ) > class( 10 )> 标签名( 1)

.box .son{ } 10+10=20

abcde优先级（e为个位）：

a:行内样式

b:id选择器

c:类名选择器 伪类选择器（：hover） 属性选择器

d:标签选择器 伪元素选择器 （：：after）

e:通用选择器有一个

选择有中有一个abcde在其位置+1

移动端布局步骤

修改视口<meta name=”viewport” content=”width=device-width”>​

视口：视觉视口，布局视口，理想视口

em:当前字体的倍率 100px=10em

rem：html字体的倍率

移动端窗口 375*667

html{

font-size：0.5rem；

}

.box{

width： 750rem； //375px=750rem*0.5px ； 100px=1rem

height： 1334rem；

用户评论

敬情

这个HTML5培训教程真的太棒了，尤其是对样式和CSS的讲解，让我这个新手也很快就上手了。

    有17位网友表示赞同！

不忘初心

我刚刚开始学编程，看到这个教程就毫不犹豫地买了，现在学得挺开心的，谢谢分享！

    有12位网友表示赞同！

男神大妈

我试过很多教程，这个HTML5培训教程是我见过最全面的，对html和css的讲解特别详细。

    有12位网友表示赞同！

爱到伤肺i

教程里的例子都很实用，我照着做了一下，页面效果真的很赞，CSS样式设计得也很漂亮。

    有9位网友表示赞同！

。婞褔ｖīｐ

刚刚买了这个教程，看了前面几章，感觉挺适合我这种初学者的，希望后面的内容也能这么好。

    有5位网友表示赞同！

厌归人

用了这个教程学HTML5，CSS和样式部分学得挺快，但是感觉对JavaScript的讲解还可以再深入一些。

    有10位网友表示赞同！

沐晴つ

这个教程的排版很清晰，图片和文字结合得很好，学起来不累，推荐给身边的朋友了。

    有17位网友表示赞同！

等量代换

教程里的代码都很规范，我跟着敲了一遍，发现对代码结构有了更深的理解。

    有12位网友表示赞同！

烟雨萌萌

HTML5培训教程里提到的工具和插件都很实用，学到了很多实用技巧。

    有12位网友表示赞同！

青楼买醉

教程里的案例都很生动，让我对HTML5有了更直观的认识，CSS样式设计得也很棒。

    有16位网友表示赞同！

青衫负雪

这个教程的价格有点贵，但是考虑到内容丰富，还是值得投资的。

    有7位网友表示赞同！

陌上花

学了一段时间，感觉这个教程对提升我的编程水平有很大帮助，CSS样式设计得很有创意。

    有20位网友表示赞同！

我的黑色迷你裙

HTML5培训教程里的每个知识点都有详细的解释，让我这个编程小白也能轻松理解。

    有6位网友表示赞同！

酒笙倾凉

教程里的实践项目很有挑战性，让我在学知识的同时也提升了动手能力。

    有10位网友表示赞同！

陌然淺笑

CSS样式部分讲解得非常好，我之前对样式设计一窍不通，现在学得挺有成就感的。

    有17位网友表示赞同！

一尾流莺

这个教程的更新速度很快，每次打开都能学到新的东西，很实用。

    有7位网友表示赞同！

窒息

教程里的代码注释很详细，学起来不会感到迷茫，对初学者很友好。

    有11位网友表示赞同！

残留の笑颜

HTML5培训教程里的视频讲解很清晰，即使是视觉学习者也能轻松跟上。

    有18位网友表示赞同！