top

第一章

第二章

第三章

第四章

第五章

第六章

第七章

第八章

第九章

第十章

中国版权保护中心 13097501928 bilibili.com 学成在线Index

/* 內减模式：不需要手动减法，加padding和border不会撑大盒子 */
box-sizing: border-box;
border-left: 0;
display: block;
/* 缩放img 图片比例跟父级不同，避免图片挤压变形 */
object-fit: cover;

第一章

HTML定义

超文本标记语言 HypeText Markup Language

  • 超文本是什么？ 链接
  • 标记是什么？ 标记也叫标签，带尖括号的文本
需要加粗的文字
<strong>需要加粗的文字</strong>
  • 标签面对出现，中间包裹内容
  • <>里面放英文字母（标签名）
  • 结束标签比开始标签多一个/
  • 拓展
    • 双标签：成对出现的标签
    单标签：只有开始，没有结束的标签
    <br>： 换行
    <hr>： 水平线

标题标签

显示特点

  • 文字加粗
  • 字号逐渐变小
  • 独占一行(换行)

经验分享

  • h1标签在一个网页中只能用一次，用来放图片或网页的logo
  • h2-h6 没有使用次数的限制

一级标题

二级标题

三级标题

四级标题

五级标题
六级标题
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

段落标签

显示特点

  • 独占一行
  • 段落之间存在间隙

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。

<p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。</p>
<p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。</p>

文本格式化标签

作用：为文本添加特殊格式，以突出重点。常见的文本格式：加粗、倾斜、下划线、删除线等。

strong 加粗 b 加粗
em 倾斜 i 倾斜
ins 下划线 u 下划线
del 删除线 s 删除线
<strong>strong 加粗</strong> <b>b 加粗</b>
<em>em 倾斜</em> <i>i 倾斜</i>
<ins>ins 下划线</ins> <u>u 下划线</u>
<del>del 删除线</del> <s>s 删除线</s>

图像标签

一只小猫
<img src="resources/img/hmImg/cat.jpg" width='80' height='80' alt='一只小猫' title='这是一只小猫'>

超链接

跳转到百度
跳转到01-标签的写法
空链接
<a href="https://www.baidu.com/">跳转到百度</a>
<a href="./01-标签的写法.html" target="_blank">跳转到01-标签的写法</a>
<a href="#">空链接</a>

音频标签

在 HTML5 里面，如果属性名和属性值完全一样，可以简写为一个单词

<audio src="resources/audio/music.mp3" controls loop autoplay></audio>

视频标签

在浏览器中，想要自动播放，必须有 muted 属性

<video src="resources/video/shiciShiPin01.mp4" controls loop muted autoplay width='180' height='280'></video>

第二章

无序列表、有序列表、定义列表

  • 列表条目1
  • 列表条目2
  • 列表条目3
  1. 步骤1
  2. 步骤2
  3. 步骤3
服务中心
申请售后
售后政策
<ul>
<li>列表条目1</li>
<li>列表条目2</li>
<li>列表条目3</li>
</ul>
<ol>
<li>步骤1</li>
<li>步骤2</li>
<li>步骤3</li>
</ol>
<dl>
<dt>服务中心</dt>
<vdd>申请售后</dd>
<dd>售后政策</dd>
</dl>

表格

姓名 语文 数学 总分
张三 99 100 199
李四 98 100 198
总结 全市第一 全市第一 全市第一

姓名 语文 数学 总分
张三 99 100 199
李四 98 100 198
总结 全市第一 全市第一 全市第一

姓名 语文 数学 总分
张三 99 100 199
李四 98 198
总结 全市第一
<table border="1">
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>总分</th>
</tr>
<tr>
<td>张三</td>
<td>99</td>
<td>100</td>
<td>199</td>
</tr>
<tr>
<td>李四</td>
<td>98</td>
<td>100</td>
<td>198</td>
</tr>
<tr>
<td>总结</td>
<td>全市第一</td>
<td>全市第一</td>
<td>全市第一</td>
</tr>
</table>
<table border="1">
<thead>
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>总分</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>99</td>
<td>100</td>
<td>199</td>
</tr>
<tr>
<td>李四</td>
<td>98</td>
<td>100</td>
<td>198</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总结</td>
<td>全市第一</td>
<td>全市第一</td>
<td>全市第一</td>
</tr>
</tfoot>
</table>
<table border="1">
<thead>
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>总分</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>99</td>
<td rowspan="2">100< /td>
<td>199</td>
</tr>
<tr>
<td>李四</td>
<td>98</td>
<td>198</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总结</td>
<td colspan="3">全市第一</td>
</tr>
</tfoot>
</table>

表单1

文本框特点：输入什么就显示什么
密码框特点：输入什么都是以 点 的形式显示
文本框：

密码框：

性别： 男 女

多选框： 数学 物理 化学

上传文件：
文本框：<input type="text" placeholder="请输入用户名">

密码框：<input type="password" placeholder="请输入密码">

性别： <input type="radio" name="gender"> 男
         <input type="radio" name="gender" checked> 女

多选框：<input type="checkbox"> 数学
<input type="checkbox" checked> 物理
<input type="checkbox" checked> 化学

上传文件：<input type="file" multiple>

表单2

城市：



性别：

用户名：

密码：



城市： <select>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
<option selected>武汉</option>
</select>

<textarea>请输入评论</textarea>

<input type="radio" name="gender" id="man"> <label for="man">男</label> <label><input type="radio" name="gender"> 女</label>

<form action="">
用户名：<input type="text">
密码：<input type="password">
<button type="submit">提交</button> <button type="reset">重置</button> <button type="button">普通按钮</button>
</form>

div span 空格 < >

这是 div 标签
这是 div 标签
这是 span 标签 这是 span 标签

乾坤未定，你我皆是黑       马。
<p>
<div>这是 div 标签</div>
<div>这是 div 标签</div>
<span>这是 span 标签</span>
<span>这是 span 标签</span>

乾坤未定，你我皆是黑& nbsp;& nbsp;& nbsp;& nbsp;& nbsp;& nbsp;& nbsp;马。
& lt;p& gt;

第三章

初识CSS

标签选择器
类选择器
id选择器
通配符选择器

体验 CSS

选择器 { CSS 属性} 属性名和属性值成对出现 → 键值对
p {
/* 文字颜色 */
color: red;
/* 字号 */
font-size: 30px;
}
<p>体验 CSS</p>

字体属性

font-size 属性必须有单位，否则属性不生效

font-weight: 700 加粗; 400 不加粗

font-style: italic; 倾斜 normal 不倾斜

line-height: 60px; 用于单行的情况下，可以垂直居中

line-height: 2; 用于 文本

/* 文字倾斜、文字加粗、字体大小是30px、行高2倍、楷体 */ div {
/* font: italic 700 30px/2 楷体; */
/* font 属性必须写字号和字体，否则 属性不生效 */
font: 30px 楷体;
/* font: italic 700 30px/2; */
}

text-decoration: none; 取消下划线/p>

text-decoration: underline;添加下划线

text-decoration: line-through; 修饰线之删除线

text-decoration: line-through; 修饰线之顶划线

测试字体大小

测试字体垂直居中
测试字体行距测试字体行距测试字体行距测试字体行距
这里是a标签，去掉下划线

这里加了下划线
.day302M p {
font-size: 30px;
font-weight: 700;
font-style: italic;      normal 不倾斜
font-family: 楷体;
letter-spacing:15px;
}

.p1 {
width:300px;
height:40px;
border:1px solid silver;
font-size:22px;
line-height: 40px;
text-align:center;
letter-spacing:10px;
}

.p2 {
width:300px;
height:60px;
border:1px solid silver;
line-height: 1.8;
text-indent: 2em;
letter-spacing:5px;
margin-top:20px;
}

.img {
width:300px;
height:120px;
border:1px solid silver;
text-align:center;
margin-top:20px;
}

文字颜色

color: red;

color: rgb(0,255,0);

color: rgba(0,0,0,0.8); 0.8为透明度

color: #0000ff; 可以简写：color: #00f;

h2 标签

h2 {
background-color: aqua;
/* color: red; */
/* color: rgb(0,255,0); */
/* color: rgba(0,0,0,0.8); */
/* color: #0000ff; */
color: #00f;
}

调试工具

鼠标放在可能出现问题的位置，右键，点击“检查”，下面就显示这个位置的代码；
点击有箭头的图标，然后放到需要检查的位置，下面就显示这个位置的代码。

调试工具的细节
1. 如果是错误的属性，有黄色叹号
2. CSS 属性的前面有多选框，如果勾选：这个属性生效； 如果没有勾选：这个属性不生效

调试工具

.day304M p{
color: red;
< !-- font-size: 66; 如果66后面没有px,就会出现黄叹号 -->
font-size: 66px;
}

第四章

复合选择器

区块01

后代选择器：选中某元素的后代元素。

选择器写法：父选择器 子选择器 { CSS 属性}，父子选择器之间用空格隔开。

span 标签
这是div 的儿子 span

孙子 span

.houDai 里面的 span 文字颜色是红色
后代选择器，选中所有后代，包含儿子、孙子、重孙子...
.houDai span {
color: red;
}
区块01

子代选择器，只选中儿子

选择器写法：父子选择器之间用>连接。

span 标签
这是div 的儿子 span

孙子 span

.ziDai 里面的儿子的 span 文字颜色是红色
子代选择器，只选中儿子
.ziDai > span {
color: red;
}
区块01

并集选择器：选中多组标签设置相同的样式。

选择器写法：选择器1, 选择器2, …, 选择器N { CSS 属性}，选择器之间用 , 隔开。

div bingJi 标签

pb 标签

span1 标签
.middle .pb,.span1,.bingJi {
color: red;
}
区块01

交集选择器：选中同时满足多个条件的元素。

选择器写法：选择器1选择器2 { CSS 属性}，选择器之间连写，没有任何符号

注意：如果交集选择器中有标签选择器，标签选择器必须书写在最前面。

p 标签，使用了类选择器 boxj

pj 标签

div boxj标签，使用了类选择器
既又的关系：既是 p 标签，又是有 boxj 类
p.boxj {
color: red;
}

伪类选择器

区块01

伪类选择器：伪类表示元素状态，选中元素的某个状态设置样式。

鼠标悬停状态：选择器:hover { CSS 属性 }

任何标签都可以设置鼠标悬停的状态

a 标签，超链接
divw 标签
a:hover {
color: red;
}
/* div:hover */
.boxw:hover {
color: green;
}

伪类-超链接（拓展）

a:link {
color: red;
}
a:visited {
color: green;
}
a:hover {
color: blue;
}
a:active {
color: orange;
}
a 标签，测试伪类
/* 工作中，一个 a 标签选择器设置超链接的样式， hover状态特殊设置 */
a {
color: red;
}
a:hover {
color: green;
}

CSS特性

继承性
继承性：子级默认继承父级的文字控制属性。
注意：如果标签有默认文字样式会继承失败。
例如：a 标签的颜色、标题的字体大小。
层叠性
相同的属性会覆盖：后面的 CSS 属性覆盖前面的 CSS 属性
不同的属性会叠加：不同的 CSS 属性都生效
注意：选择器类型相同则遵循层叠性，否则按选择器优先级判断。
优先级
规则：选择器优先级高的样式生效。
规则：选择器优先级高的样式生效。
（选中标签的范围越大，优先级越低

优先级 – 叠加计算规则

叠加计算：如果是复合选择器，则需要权重叠加计算。

公式：

（行内样式, id选择器个数, 类选择器个数, 标签选择器个数）

规则：

  • 从左向右依次比较选个数，同一级个数多的优先级高，如果个数相同，则向后比较
  • !important 权重最高
  • 继承权重最低

背景图属性

效果演示 案例1 案例2
div {
width: 400px;
height: 400px;
background-color: pink;
/* 背景图默认是平铺（复制）的效果 */
background-image: url(./images/1.png);
}

/* 不平铺：盒子的左上角显示一张背景图 */
background-repeat: no-repeat;
/* background-repeat: repeat; */
/* background-repeat: repeat-x; */
/* background-repeat: repeat-y; */
/* 左上角 */
/* background-position: 0 0; */
/* background-position: left top; */
/* background-position: right bottom; */

/* 水平：正数向右，负数向左 */
/* background-position: 50px 0; */
/* background-position: -50px 0; */

/* 垂直：正数向下，负数向上 */
/* background-position: 0 100px; */
/* background-position: 0 -100px; */
/* background-position: 50px center; */

/* 特殊写法 */
/* background-position: bottom left; */

/* 关键字可以只写一个，另一个方向居中 */
/* background-position: bottom; */

/* 只写一个数字表示水平方向，垂直方向居中 */
background-position: 50px;
/* contain：如果图的宽高跟盒子尺寸相等停止缩放，可能导致盒子有露白 */
/* background-size: contain; */
/* cover：图片完全覆盖盒子，可能导致图片显示不全 */
/* background-size: cover; */
/* 100% 图片的宽度跟盒子宽度一样，图片的高度按照图片比例等比缩放 */
background-size: 100%;

background-position: center top;
background-attachment: fixed;

/* background: pink url(./images/1.png) no-repeat center bottom/cover; */
background: pink url(./images/1.png) no-repeat center bottom/contain;

显示模式

块级：独占一行；宽度默认是父级的100%；加宽高生效

行内：一行共存多个；尺寸由内容撑开；加宽高 不 生效

行内块：一行共存多个；默认尺寸由内容撑开；加宽高生效
display: block;

display: inline-block;

display: inline; 不常用
详见案例1

第五章

案例1 案例2

结构伪类选择器

  • li 1
  • li 2
  • li 3
  • li 4
  • li 5
  • li 6
  • li 7
  • li 8
/* 第一个 */
/*.day501Left li:first-child {
background-color: green;
} */
/* 最后一个 */
/*.day501Left li:last-child {
background-color: green;
} */
/* 任意个 */
/*.day501Left li:nth-child(3) {
background-color: green;
} */
.day501Left li:nth-child(1) {
background-color: green;
}
  • li 1
  • li 2
  • li 3
  • li 4
  • li 5
  • li 6
  • li 7
  • li 8
/* 偶数 */
.day501R1 li:nth-child(2n) {
background-color: green;
}
/* 奇数 */
/*.day501R1 li:nth-child(2n+1) {
background-color: green;
} */
/* 倍数 */
/*.day501R1 li:nth-child(5n) {
background-color: green;
} */
/* n 从0开始 */
/* 第5个以后的标签 */
/*.day501R1 li:nth-child(n+5) {
background-color: green;
} */
/* 第5个以前的标签 */
/* .day501R1 li:nth-child(-n+5) {
background-color: green;
} */
爱
.day501R3::before {
content: "老鼠";
width:50px;
height:50px;
background-color: brown;
display:block;
}
.day501R3::after {
content: "大米";
width:50px;
height:50px;
background-color: orange;
display:block;
}

伪元素选择器行内显示模式。

必须设置 content 属性，没有 content，伪元素选择器不生效。

盒子模型

边框线

solid 实线

dashed 虚线

dotted 点划线

单方向边框线

border-top: 1px solid #000;
border-right: 2px dashed red;
border-bottom: 5px dotted green;
border-left: 10px solid orange;

内边距

padding-top: 10px;
padding-right: 20px;
padding-bottom: 40px;
padding-left: 80px;

外边距

/* 外边距 不会 撑大盒子 */
margin: 0 auto;
margin 的多值写法与 padding 相同。

版心居中

/* 版心居中要求：盒子要有宽度 */
width: 1000px;

内边距 padding多值写法

/* 四值：上 右 下 左 */
/* padding: 10px 20px 40px 80px; */
/* 三值：上 左右 下 */
/* padding: 10px 40px 80px; */
/* 两值：上下 左右 */
padding: 10px 80px;
/* 记忆方法：从上开始顺时针转一圈，
如果当前方向没有数值，取值跟对面一样 */

尺寸计算

width: 200px;
height: 200px;
/* 手动减法 */
/* width: 160px;
height: 160px; */
background-color: pink;
padding: 20px;
/* 內减模式：不需要手动减法，加padding和border不会撑大盒子 */
box-sizing: border-box;
AAA
/* 记忆：从左上角顺时针赋值，没有取值的角与对角取值相同 */
/* 四值：左上 右上 右下 左下 */
/* border-radius: 10px 20px 40px 80px; */
/* 三值：左上 右上+左下 右下 */
/* border-radius: 10px 40px 80px; */
/* 两值：左上+右下 右上+左下 */
border-radius: 10px 80px;

正圆形 -- 头像 最大值是50%。超过50%没有效果
border-radius: 50%;
胶囊状
border-radius: 40px; height 的一半

盒子阴影
box-shadow: 2px 5px 10px 1px rgba(0,0,0,0.5);
内阴影 inset

清除默认样式

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 去掉列表的项目符号 */
li {
list-style: none;
}

外边距-合并现象

.one margin-bottom: 80px; 取其较大者 80px;
.two margin-top: 50px; 取其较大者 80px;

外边距-塌陷问题

box-sizing: border-box; */
/* 溢出隐藏 */
/* overflow: hidden; */
border-top: 1px solid #000;

行内元素的垂直内外边距 如span

margin: 50px; 只在水平方向有效
padding: 20px;只在水平方向有效
line-height: 100px;垂直方向有效

第六章

标准流 浮动 清除浮动

浮动-产品布局
浮动-产品布局

标准流

标准流也叫文档流，指的是标签在页面中默认的排布规则，例如：块元素独占一行，行内元素可以一行显示多个。


浮动

作用：让块元素水平排列。float:left; float:right.


特点

  • 浮动后的盒子顶对齐
  • 浮动后的盒子具备行内块特点
  • 浮动后的盒子脱标，不占用标准流的位置

清除浮动1-额外标签法

.clearfix {
clear: both;
}
<div class="clearfix"></div>

清除浮动2-单伪元素法

.clearfix::after {
content: "";
display: block;
clear: both;
}
<div class="father clearfix">


清除浮动3-双伪元素法

.clearfix::before,
.clearfix::after {
content: "";
display: table;
}
/* after 清除浮动 */
.clearfix::after {
clear: both;
}

清除浮动4-overflow

父元素添加 CSS 属性 overflow: hidden

Flex 布局

弹性容器、弹性盒子

display: flex;
justify-content: space-between;
弹性盒子：沿着主轴方向排列

主轴对齐方式

justify-content: flex-start; 默认 基本不用
justify-content: flex-end; 不常用
justify-content: center; 居中
justify-content: space-between; 弹性盒子之间的间距相等
justify-content: space-around;
justify-content: space-evenly; 各个间距都相等

弹性换行

侧轴对齐方式

.box {
display: flex;
弹性盒子在侧轴方向没有尺寸才能拉伸
align-items: stretch;
align-items: center;
align-items: flex-start;
align-items: flex-end;
}

第二个div，侧轴居中对齐
.box div:nth-child(2) {
align-self: center;
}

行对齐方式

修改主轴方向 垂直方向；侧轴自动变换到水平方向

display: flex;
flex-direction: column;
justify-content: center;主轴在垂直，视觉效果：垂直居中
align-items: center;侧轴在水平，视觉效果：水平居中

弹性伸缩比

默认情况下，主轴方向尺寸是靠内容撑开；侧轴默认拉伸
display: flex;
flex-direction: column;
.box div:nth-child(1) {
width: 200px;
}
.box div:nth-child(2) {
flex: 1;
}
.box div:nth-child(3) {
flex: 2;
}

第七章 实例：学成在线

学成在线Index 版心居中  .wrapper { margin: 0 auto; width: 1200px; } 设置body 的背景色  body { background-color: #f3f5f7; }

头部区域 header

学成在线top1 头部区域   .header { height: 100px; background-color: #fff; } 头部区域居中且按行排列：   .header .wrapper { padding-top: 29px; display: flex; }

logo:

h1 必须用<h1>,为了百度搜索能靠前
<h1>内嵌套<a>标签，在a 背景加
logo 图标，又能加关键字“学成在线”


导航 nav

第一步：先确定margin-left:???
第二步：nav ul 加代码 display: flex;
第三步：nav li 加代码 margin-right:???

搜索 search

老规矩，从外到内，先进行整体分析，再来写具体的代码。
• 标签结构：.search > input + a / button
第一步：先创建盒子，宽、高、背景色，还有圆角！！！
第二步：确定盒子的位置，即外边距，及内边距

第三步：在searcn display: flex;让input a 水平排列 第四步：内容排布，让input 最大，searcn input flex:1
第五步：背景透明，取边框。
第六步：::placeholder 选中 placeholder 加文字样式

第七步： 创建a 标签，宽高自动生效。
第八步： flex 布局，垂直居中 align-self: center;

用户 user

第一步：创建 user  div 第二步： 在a 标签中， 套 img span /* 用户 */

.user {
margin-left: 12px;
margin-top: 4px;
border:1px solid #000;
}

.user img {
margin-right: 7px;
/* vertical-align 行内块和行内垂直方向对齐方式 */
vertical-align: middle;
}

.user span {
font-size: 16px;
color: #666;
}

<div class="logo">
<h1><a href="#">学成在线</a></h1>
</div>




<div class="nav">
<ul>
<li><a href="#" class="active">首页</a></li>
<li><a href="#">课程</a></li>
<li><a href="#">职业规划</a></li>
</ul>
</div>




<div class="search">
<input type="text" placeholder="请输入关键词">
<a href="#"></a>
</div>

.search {
display: flex;
margin-left: 4px;
padding-left: 19px;
padding-right: 12px;
width: 282px;
height: 40px;
background-color: #f3f5f7;
border-radius: 20px;
}


播仔学前端

<div class="user">
<a href="#">
<img src="/resources/uploads/img
/xueChengZX/user.png" alt="">
<span>播仔学前端</span>
</a>
</div>
.logo a {
display: block;
width: 195px;
height: 41px;
background-image: url(/resources/img/xueChengZX/logo.png);
font-size: 0;
}


.nav { margin-left: 102px; }
.nav ul { display: flex; }
.nav li { margin-right: 24px; }
.nav li a {
display: block;
padding: 6px 8px;
line-height: 27px;
font-size: 19px;
}
/* actvie 类选择器，表示默认选中的a */
.nav li .active,
.nav li a:hover {
border-bottom: 2px solid #00a4ff;
}


.search input {
flex: 1;
border: 0;
background-color: transparent;
/* 去掉表单控件的焦点框 */
outline: none;
}

/* ::placeholder 选中就是 placeholder 属性文字样式*/
.search input::placeholder {
font-size: 14px;
color: #999;
}

.search a {
align-self: center;
width: 16px;
height: 16px;
background-image: url(/resources/img/xueChengZX/search.png);
}


logo 小技巧

font-size:0; 即加了关键字，又不显示。


input 特殊代码

placeholder="请输入关键词"

背景色： 透明的

transparent; 透明

小技巧：去掉表单控件的焦点框

outline: none;

知识点：弹性盒子宽高自动生效

父级是flex布局，子级变弹性盒子：加宽高生效



特殊代码：行内块和行内垂直方向对齐方式

vertical-align: middle;

横幅 banner

横幅 banner

第八章

显示模式

8