HTML（超文本标记语言）
-
在编辑器里写代码，在浏览器中看效果
-
超文本：链接
-
标记：标签，带尖括号的文本
标签语法
-
标签成对出现，中间包裹内容
-
<>里面放英文字母（标签名）
-
结束标签比开始标签多/
双标签：成对出现的标签
单标签：只有开始出现的标签，没有结束标签
HTML基本骨架
-
html:整个网络
-
head:网页头部，存放浏览器看的代码，例如CSS
-
body:网页主体，存放给用户看的代码，例如 图片，文字
-
title:网页标题
标签的关系
作用：明确代码的书写位置
-
父子关系（嵌套关系）
-
兄弟关系（并列关系）
注释
注释标签用来在原文档中插入注释，注释不会在浏览器中显示。
VS Code中，添加/删除注释快捷键：Ctrl+/
标题标签
一般用在新闻标题，文章标题，网页区域名称，产品名称等等。
-
标签名：h1~h6(双标签)
-
显示特点：字体加粗，字号逐渐减小，独占一行（换行）
-
-
h1标签在一个网页中只能用一次，用来放新闻标题或网页的logo
-
h2~h6没有使用的次数限制
段落标签
-
标签名：p(双标签)
-
显示特点：独占一行，段落之间存在间隙
-
换行与水平线标签
-
换行：br(单标签)
-
浏览器不能识别代码中的Enter键换行
-
-
水平线：hr(单标签)
文本格式化标签
-
加粗：strong / b
-
倾斜：em / i
-
下划线：ins / u
-
删除线：del / s
图像标签
-
标签名：img src="图签的URL"(单标签)
-
src用于指定图像的位置和名称，是img的必须属性
-
以./开头，VS Code有提示功能
-
-
属性
-
alt 替换文本，图片无法显示时显示文字
-
title 提示文本，鼠标悬停在图片上的时候显示文字
-
width 图片的宽度，值为数字，没有单位
-
height 图片的高度，值为数字，没有单位
-
-
路径（相对路径/绝对路径）
-
/表示进入某个文件夹 文件夹名字/
-
.表示当前文件所在文件夹 ./
-
..表示当前文件的上一级文件夹 ../
-
超链接
-
标签名：a(双标签)
-
属性
-
href属性值是跳转地址，是超链接的必须属性
-
target="_blank" 新窗口跳转到页面
-
-
空链接：href值写#，不会跳转
-
锚点链接：点击页面中的某一个链接（锚点链接），就会跳到这个页面的指定位置（锚点）
-
步骤
-
设置锚点：< a id="锚点的名字"></a>
-
设置锚点链接：<a href="#锚点的名字"></a>
-
-
音频标签
-
标签名：audio src="音频的URL"（双标签）
-
属性
-
src(必须属性)
-
controls 显示音频控制面板
-
loop 循环播放
-
autoplay 自动播放(浏览器一般禁用该功能)
-
注意：在HTML5里面，如果属性名和属性值完全一样，可以简写为一个单词
视频标签
-
标签名：video src="视频的URL"(双标签)
-
属性
-
src(必须属性)
-
controls 显示视频控制面板
-
loop 循环播放
-
muted 静音播放
-
autoplay 自动播放（浏览器支持在静音状态自动播放）
-
列表标签
-
分类
-
无序列表
-
ul嵌套li（只能）
-
ul 无序列表
-
li 列表条目（可以放任何内容）
注意：
-
有序列表
-
定义列表
-
dl嵌套dt和dd（只能）
-
dl是定义列表
-
dt是定义列表的标题（可以放任何内容）
-
dd是定义列表的描述/详情（可以放任何内容）
-
表格标签
-
标签：table嵌套tr,tr嵌套td/th
-
标签名
-
table 表格
-
tr 行
-
th 表头单元格
-
td 内容单元格
-
注意：在网页中，表格默认没有边框线，使用border属性可以为表格添加边框线
表格居中用margin：auto
-
结构标签（人眼看不到效果）
-
thead 表格头部
-
tbody 表格主体
-
tfood 表格底部（汇总信息区域）
-
-
合并单元格
-
明确合并的目标
-
保留最左最上的单元格，添加属性（取值是数字，表示需要横的单元格数量）
-
跨行合并，保留最上单元格，添加属性rowspan
-
跨列合并，保留最左单元格，添加属性colspan
-
-
删除其他单元格
-
表单
-
input标签基本使用input type="..."（type属性值不同，则功能不同）
-
type属性
-
text 文本框，用于输入单行文本
-
password 密码框
-
radio 单选框
-
name 空间名称（控件分组，同组只能选一个（单选功能））
-
checked 默认选中（属性名和属性值相同，简写为一个单词）
-
-
checkbox 多选框
-
默认选中：checked
-
-
file 上传文件
-
默认情况下，文件上传只能上传一个文件，添加multiple属性可以实现文件多选功能
-
-
-
占位文本 input type="..." placeholder="提示信息"
-
下拉菜单
-
select嵌套option，select是下拉菜单整体，option是下拉菜单的每一项
-
默认选中：selected
-
-
-
文本域（右下角有拖拽功能，未来会禁用，用CSS设置尺寸）
-
标签：textarea（双标签）
-
取消拖拽：resize:none
-
-
label标签（绑定文字和表单控件的关系，增大表单控件的点击范围）
-
写法一
-
label标签只包裹内容，不包裹表单控件
-
设置label标签的for属性值和表单控件id属性值相同
-
-
写法二
-
使用label标签包裹文字和表单控件，不需要属性
-
-
注意：支持label标签增大点击范围的表单控件：文本框，密码框，单选框，多选框，下拉菜单，文本域等等
-
按钮-button
-
标签名 button （双标签）
-
type属性值
-
submit 提交按钮，点击后可以提交数据到后台（默认功能）
-
reset 重置按钮，点击后将表单控件恢复默认值（放在form标签中间）
-
button 普通按钮，默认没有功能，一般配合JS使用
-
-
无语义的布局标签
-
div:独占一行（双标签）
-
span:不换行（双标签）
字符实体
注意：在代码中敲键盘的空格，网页只识别一个
CSS(层叠样式表)
书写规则：选择器 {属性名：属性值；}
CSS引入方式
-
内部引入：CSS代码写在style标签中
-
外部样式
-
CSS代码写在单独的CSS文件中（.css）
-
在HTML使用link标签引入
<link rel="stylesheet" href="./my.css">
-
行内样式：配合JS使用
-
CSS写在标签的style属性值里
<div style="color:red;font-size:20px;">(双标签)</div>
-
-
-
选择器
-
基础选择器
-
标签选择器
-
选中同名标签设置相同的标签样式，无法差别化同名标签的样式
-
-
类选择器
-
定义：.类名（类名见名知意）
-
使用：标签添加class="类名"
-
一个类选择器可以给多个标签使用
-
一个标签可以使用多个类名，class属性值写多个类名，类名用空格隔开
-
-
id选择器（一般配合JS使用，很少设置CSS）
-
定义：#id名
-
使用：标签添加id=”id名“
-
同一个id选择器在一个网页中只能使用一次
-
-
通配选择器（开发项目初期清楚标签默认样式）
-
*，不需要调用，浏览器自动查找页面所有标签，设置相同的标签
-
-
-
画盒子
-
属性名
-
width 宽度
-
height 高度
-
background-color 背景色
-
文字控制属性
-
属性名
-
font-size 文字大小（PC端网页最常用的单位是px）
-
必须有单位，否则不生效
-
-
font-weight 文字粗细
-
属性值
-
数字(更常用)
-
正常 400
-
加粗 700
-
-
关键字
-
正常 normal
-
加粗 bold
-
-
-
-
font-style 文字倾斜
-
作用：清楚文字默认的倾斜效果
-
属性值
-
正常（不倾斜）：normal
-
倾斜：italic
-
-
-
line-height 行高(上间距+文本高度+下间距)
-
属性值
-
数字+px
-
数字（当前标签font-size属性值的倍数）
-
-
垂直居中技巧：行高属性等于盒子高度属性值（单行文字）
-
-
font-family 字体族
-
属性值：字体名
-
属性值可以书写多个字体名，各个字体名用逗号隔开，执行顺序是从左到右依次查找
-
属性最后设置一个字体族名，网页开发建议使用无衬线字体（sans-serif）
-
-
font 字体复合属性（设置网页文字公共样式）
-
一个属性对应多个值的写法，各个属性之间用空格隔开
-
font：是否倾斜 是否加粗 字号/行高 字体（必须按顺序书写）
注意：字号和字体值必须书写，否则font属性不生效
-
-
text-indent 文本缩进
-
属性值
-
数字+px
-
数字+em（推荐：1em=当前标签的字号大小）
-
-
-
text-align文本对齐
-
属性值
-
left 左对齐（默认）
-
center 居中对齐（居中的是文字内容，不是标签）
-
right 右对齐
-
-
本质：控制内容的对齐方式，属性要设置给内容的父级
-
-
text-decoration 修饰线
-
属性值
-
none 无
-
underline 下划线
-
line-through 删除线
-
overline 上划线
-
-
-
color 颜色
-
属性值
-
颜色英文单词
-
rgb(r,g,b) 三原色0-255
-
rgba(r,g,b,a) a：透明度0-1
-
#RRGGBB
-
-
-
复合选择器
-
后代选择器
-
写法：父选择器 子选择器 {CSS 属性}，父子选择器之间用空格隔开
-
-
子代选择器
-
写法：父选择器>子选择器 {CSS 属性}，父子选择器之间用>隔开
-
-
并集选择器（选中多组标签设置相同的样式）
-
写法：选择器1,选择器2,...,选择器N {CSS 属性}，选择器之间用，隔开
-
-
交集选择器（选中同时满足多个条件的元素）
-
写法：选择器1选择器2{CSS 属性}，选择器之间连写，没有任何符号
注意：如果交集选择器中有标签选择器，标签选择器必须书写在最前面
-
-
伪类选择器（伪类表示元素状态，选中元素的某个状态设置样式）
-
鼠标悬停状态：选择器:hover {CSS 属性 }
-
超链接状态
-
:link 访问前
-
:visited 访问后
-
:hover 鼠标悬停
-
:active 点击时（激活）
注意：如果要给超链接设置以上四个状态，需要按LVHA的顺序书写
-
-
CSS特性
-
继承性
子级默认继承父级的文字控制属性
注意：如果标签有自己的样式生效自己的样式，不继承
-
层叠行
-
相同的属性会覆盖：后面的CSS属性覆盖前面的CSS属性
-
不同的属性会叠加：不同的CSS属性都会生效
-
-
优先级（权重，当一个标签使用了多种选择器时，基于不同类型的选择器的匹配规则）
-
规则：选择器优先级高的样式生效
-
公式：通配选择器<标签选择器<类选择器<id选择器<行内样式<!important（选中标签的范围越大，优先级越低）
注意：!important提权功能，提高权重/优先级到最高，慎用
-
叠加计算规则（如果是复合选择器，则需要权重叠加计算）
-
公式：（每一级之间不存在进位）
（行内样式，id选择器个数，类选择器个数，标签选择器个数）
-
规则
-
从左向右依次比较选个数，同一级个数多的优先级高，如果个数相同，则向后比较
-
!important权重最高
-
继承权重最低
-
-
-
Emmet写法
代码的简写方法，输入缩写VS Code会自动生成对应的代码
-
HTML
-
CSS：大多数简写方式为属性单词的首字母
背景属性
-
背景色 background-color
-
背景图 background-image
-
属性名：background-image（bgi）
-
属性值：url（背景图）
注意：背景图默认是平铺（复制）的效果
-
-
背景图平铺 background-repeat
-
属性名：background-repeat（bgr）
-
属性值
-
no-repeat 不平铺 左上角
-
repeat 平铺（默认效果）
-
repeat-x 水平方向平铺
-
repeat-y 垂直方向平铺
-
-
-
背景图位置 background-position
-
属性名：background-position（bgp）
-
属性值
-
关键字
-
坐标（数字+px，正（右/下）负（左/上）都行）
注意：1.关键字取值方式写法，可以颠倒取值顺序
2.可以只写一个关键字，另一个方向默认居中；数字只写一个值表示水平方向，垂直方向为居中
-
-
-
背景图缩放 background-size
-
属性名：background-size（bgz）
-
常用属性值
-
关键字
-
cover：等比例缩放背景图已完全覆盖背景区，可能背景图片部分看不见
-
contain：等比例缩放背景图已完全装入背景区，可能背景区部分空白
-
-
百分比：根据盒子尺寸计算图片大小
-
数字+单位（例如：px）
-
-
-
背景图固定 background-attachment（背景图不会随元素的内容滚动）
-
属性名：background-attachment（bga）
-
属性值：fixed
-
-
背景图复合属性 background
-
属性名：background（bg）
-
属性值：背景色 背景图 背景图平铺方式 背景图位置/背景图缩放 背景图固定（空格隔开各个属性值，不区分顺序）
-
显示模式
-
块级元素
-
独占一行
-
宽度默认是父级的100%
-
添加宽度属性生效
-
-
行内元素
-
一行共存多个，尺寸由内容撑开
-
加宽，高属性不生效
-
加背景图属性生效
-
-
行内块元素
-
一行共存多个，默认尺寸由内容撑开
-
加宽，高属性生效
-
-
转换显示模式
-
属性名：display
-
属性值
-
block 块级
-
inline-block 行内块
-
inline 行内
-
-
结构伪类选择器
根据元素的结构关系查找元素
-
:nth-child(公式)
伪元素选择器
创建虚拟元素（伪元素），用来摆放装饰性的内容
注意：
-
必须设置content:" "属性，用来设置伪元素的内容，如果没有内容，则引号留空即可
-
伪元素默认是行内显示模式
-
权重和标签选择器相同
盒子模型
-
内容区域-width&height
-
内边距-padding(总出现在内容与盒子边缘)
-
属性名：padding/padding-方位名词
-
多值写法
记忆方法：从上开始顺时针转一圈，如果当前方向没有数值，取值跟对面一样
-
-
边框线-border（bd）
-
属性值：边框线粗细 线条样式 颜色（不区分顺序)
-
常见线条样式
-
solid实线
-
dashed虚线
-
dotted点线
-
-
设置单方向边框线
-
属性名：border-方位名词（bd+方位名词首字母，例如，bdl）
-
属性值：边框线粗细 线条样式 颜色（不区分顺序）
border-top: 2px solid red; border-right: 3px dashed green; border-bottom: 4px dotted blue; border-left: 5px solid orange;
-
-
-
外边距-margin（出现在盒子外边）
-
属性名：margin（与padding的属性值写法，含义相同）
-
外边距不会撑大盒子尺寸
-
版心居中：margin-left=auto;margin-right=auto;(一定要有width)
合并现象
-
场景：垂直排版的兄弟元素，上下margin会合并
-
现象：取两个margin中的较大值生效
塌陷问题
-
场景：父子级的标签，子级的添加上外边距会产生塌陷问题
-
现象：导致父级一起向下移动
-
解决方法：
-
取消子级margin，父级设置padding
-
父级设置：overflow：hidden
-
父级设置border-top
-
-
div {
width: 200px;
height: 200px;
background-color: pink;
/* 内容与盒子边缘之间 */
padding: 20px;
/* 出现在盒子外面，拉开两个盒子之间的距离 */
border: 1px solid #000;
margin: 50px;
}
-
尺寸计算
-
默认情况
-
盒子尺寸=内容尺寸+border尺寸+内边距尺寸
给盒子加border/padding会撑大盒子
-
解决
-
手动解决：减掉border/padding的尺寸
-
内减模式：box-sizing:border-box
-
-
-
-
元素溢出
-
属性名：overflow
-
属性值
-
hidden 溢出隐藏
-
scroll 溢出滚动（无论是否溢出，都显示滚动条位置）
-
auto 滚动溢出（溢出才显示滚动条位置）
-
-
-
行内元素 - 内外边距问题
-
场景：行内元素添加margin和padding，无法改变元素垂直位置
-
解决方法：给行内元素添加line-height可以改变垂直位置
-
-
圆角
-
属性名：border-radius
-
属性值：数字+px/百分比
img { width: 200px; height:200px; border-radius: 100px; border-radius: 50%; /*最大值为50%，超过50%没有效果*/ } -
常见应用
-
正圆形状：给正方形盒子设置圆角属性这位宽高的一半/50%
-
胶囊形状：给长方形盒子设置圆角属性值为盒子高度的一半
img { width: 200px; height: 80px; background-color: orange; border-radius: 40px; } -
-
-
阴影
-
属性名：box-shadow
-
属性值：X轴偏移量 Y轴偏移量 模糊半径 扩散半径 颜色 内外阴影
注意：1. X轴偏移量和Y轴偏移量必须书写
-
默认是外阴影，内阴影需要添加inset
img { box-shadow: 2px 5px 10px 1px rgba(0,0,0,0,5); } -
清除默认样式
* {
margin: 0;
padding: 0;
box-sizing: border-box;/*内减模式（习惯）*/
}
.li {
list-style: none;/*去掉列表项目前面的符号*/
}
标准流
标准流也叫文档流，指的是标签在页面中默认的排布规则
浮动
-
属性名：float
-
属性值
-
left：左对齐
-
right：右对齐
-
-
特点：顶对齐，具备行内块显示模式特点，浮动的盒子会脱标（如果父级的宽度不够，浮动的盒子会掉下来）
-
清除浮动
-
场景：浮动元素会脱标，如果父级没有高度，子级无法撑开父级高度（可能导致页面布局混乱）
-
解决方法：清除浮动（清除浮动带来的影响）
Flex布局
Flex布局也叫弹性布局，是浏览器提倡的布局模型，非常适合结构化布局，提供了强大的空间分布和对齐能力。Flex模型不会产生浮动布局中脱标现象，布局网页更简单，更灵活。
-
Flex组成
沿主轴方向排列
-
Flex布局
-
主轴对齐方式
-
属性名：justify-content
-
属性值
-
flex-start默认值，弹性盒子从起点开始依次排序
-
flex-end弹性盒子从终点开始依次排列
-
center弹性盒子沿主轴居中排列
-
space-between弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子之间
-
space-around弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧
-
space-evenly弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等
-
-
-
侧轴对齐方式
-
属性名
-
align-items:当前弹性容器内所有弹性盒子的侧轴对齐方式（给弹性容器设置）
-
align-self:单独控制某个弹性盒子的侧轴对齐方式（给弹性盒子设置）
-
-
属性值
-
stretch弹性盒子沿着侧轴线被拉伸至铺满容器（弹性盒子没有设置侧轴方向尺寸则默认拉伸）
-
center弹性盒子沿侧轴居中排列
-
flex-start弹性盒子从起点开始依次排列
-
flex-end弹性盒子从终点依次排列
-
-
-
改变主轴方向（主轴默认在水平方向，侧轴默认在垂直方向）
-
属性名：flex-direction
-
属性值
-
row水平反方向，从左到右（默认）
-
column垂直方向，从上到下
-
row-reverse水平方向，从右到左
-
column-reverse垂直方向，从下到上
-
-
-
弹性伸缩比
-
属性名：flex
-
属性值：整数数字，表示占用父级剩余尺寸的份数
-
-
弹性盒子换行
-
属性名：flex-wrap
-
属性值
-
wrap：换行
-
nowrap：不换行（默认）
-
-
-
行对齐方式（注意：对单行盒子不生效）
-
属性名：align-content
-
属性值
-
flex-start默认值，弹性盒子从起点开始依次排列
-
flex-end弹性盒子从终点开始依次排列
-
center弹性盒子沿主轴居中排列
-
space-between弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子之间
-
space-around弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧
-
space-evenly弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等
-
-
-
-
PxCook(像素大厨)
切图设计工具软件。支持PSD文件的文字，颜色，距离自动智能识别。
-
开发面板（自动智能识别）
-
设计面板（手动测量尺寸和颜色）
准备工作
-
项目根目录
网站根目录是指存放网站的第一层文件夹，内容包含当前网站的所有素材，包含HTML，CSS，图片，JavaScript等等
-
版心居中
.wrapper { margin: 0 auto; width: 1200px; }
网页制作思路
-
布局思路：先整体再局部，从外到内，从上到下，从左到右
-
CSS实现思路
-
画盒子，调整盒子范围—>宽高背景色
-
调整盒子位置—>flex布局，内外边距
-
控制图片文字，文字内容样式
-
网页制作
header区域
布局
-
通栏：宽度与浏览器窗口相同的盒子
-
标签结构：通栏>版心>logo+导航+搜索+用户
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>学成在线</title> <link rel="stylesheet" href="../CSS/学成在线样例.css"> </head> <body> <!-- 头部区域 --> <div class="header"> <div class="wrapper"> <!-- logo --> <div class="logo">logo</div> <!-- 导航 --> <div class="nav">导航</div> <!-- 搜索 --> <div class="search">search</div> <!-- 用户 --> <div class="user">用户</div> </div> </div> </body> </html>
/* 首页样式 */
/* 版心 */
.wrapper {
margin: 0 auto;
width: 1200px;
}
body {
background-color: #f3f5f7;
}
/* 头部区域 */
.header {
height: 100px;
background-color: #fff;
}
.header .wrapper {
padding: 29px;
display: flex;
}
logo制作技巧
logo功能：
-
单击跳转到首页
-
搜索引擎优化：提升网站百度搜索排名
实验方法：
-
标签结构：h1>a>网站名称（搜索关键字）
-
CSS样式：
.logo a {
display: block;
width: 195px;
height: 41px;
background-image: url(../images/logo.png);
/*隐藏文字*/
font-size: 0;
}
导航制作技巧（nav）
导航功能
-
单机跳转页面
实现方法：
-
标签结构：ul>li*3>a
-
优势：避免堆砌a标签，网站搜索排名降级
-
布局思路：
li设置右侧margin
a设置左右padding
<!-- 导航 --> <div class="nav"> <ul> <li><a href="#" class="active">首页</a></li> <li><a href="#">课程</a></li> <li><a href="#">职业规划</a></li> </ul> </div>
/* 导航 */
.nav {
margin: 102px;
}
.nav ul {
display: flex;
}
.nav li {
margin-right: 24px;
}
.nav li a {
display: block;
padding: 6px 8px;
line-height: 27px;
font-size: 19px;
}
/* active 类选择器，表示默认选中的a */
.nav li .active,
.nav li a:hover {
border-bottom: 2px solid #00a4ff;
}
搜索区域
实现方法：
-
标签结构：.search > input + a / button
/* 搜索 */
.search {
margin-left: 64px;
padding-left: 12px;
padding-right: 12px;
width: 412px;
height: 40px;
background-color: #f3f5f7;
border-radius: 20px;
}
.search input {
flex: 1;
border: 0;
background-color: transparent;
}
/* ::placeholder 选中就是placehorder 属性文字样式 */
.search input::placeholder {
font-size: 14px;
color: #999;
}
/* 父级是flex布局，子级变弹性盒子：加宽高生效 */
.search a {
align-self: center;
width: 16px;
height: 16px;
background-image: url();
}
用户区域（user）
实现方法：
-
结构标签：.user > a > img + span
/* 用户 */ .user { margin-left: 32px; margin-top: 4px; } .user img { /* vertical-align 行内块和行内垂直方向对齐方式 */ vertical-align: middle; } .user span { font-size: 16px; color: #666; }
banner区域
布局
/* banner区域 */
.banner {
height: 420px;
background-color: #0092cb;
}
.banner .wrapper {
display: flex;
justify-content: space-between;
height: 420px;
background-image: url();
}
左侧侧导航(left)
实现方法
-
标签结构：.left > ul > li*9 > a
-
布局思路
-
默认状态：背景图为白色右箭头
-
/* 侧导航 */
.banner .left {
padding: 3px 20px;
width: 191px;
height: 420px;
background-color: rgba(0,0,0,0,0.42);
}
.banner .left a {
display: block;
height: 46px;
background: url() no-repeat right center;
line-height: 46;
font-size: 16px;
color: #fff;
}
.banner .left a:hover {
background-image: url();
color: #00a4ff;
}
右侧课程表(right)
实现方法：
-
标签结构：.right > h3 + .content
/* 课程表 */
.banner .right {
margin-top: 60px;
width: 218px;
height: 305px;
background-color: #209dd5;
border-radius: 10px;
}
.banner .right h3 {
margin-left: 14px;
height: 48px;
line-height: 48;
font-size: 15px;
color: #fff;
font-weight: 400;
}
.banner .right .content {
padding: 14px;
height: 257px;
background-color: #fff;
border-radius: 10px;
}
.banner .right dl {
margin-bottom: 12px;
border-bottom: 1px solid #e0e0e0;
}
.banner .right dt {
margin-bottom: 8px;
font-size: 14px;
line-height: 20px;
font-weight: 700;
}
.banner .right dd {
margin-bottom: 8px;
font-size: 12px;
line-height: 16px;
}
.banner .right dd span {
color: #00a4ff;
}
.banner .right dd strong {
color: #7d7d7d;
font-weight: 400;
}
.banner .right a {
display: block;
height: 32px;
background-color: #00a4ff;
text-align: center;
line-height: 32px;
font-size: 14px;
color: #fff;
border-radius: 15px;
}
精品推荐（recommend)
实现方法
-
标签结构：.recommend > h3 + ul + a.modify
-
布局思路：flex布局
/* 精品推荐 */
.recommend {
display: block;
margin-top: 11px;
padding: 0 20px;
height: 60px;
background-color: #fff;
box-shadow: 0px 1px 2px 0px rgba(211, 211, 211, a0.5);
line-height: 60px;
}
.recommend h3 {
font-size: 18px;
color: #00a4ff;
font-weight: 400;
}
.recommend ul {
/* 除去标签和修改内容感兴趣的尺寸，父级剩余尺寸都给ul，实现把修改兴趣挤到最右侧 */
flex: 1;
display: flex;
}
.recommend ul li a {
padding: 0 24px;
border-right: 1px solid #e0e0e0;
font-size: 18px;
}
.recommend ul li:last-child a {
border-right: 0;
}
.recommend .modify {
font-size: 16px;
color: #00a4ff;
}
精品课程（course）
实现方法
-
标签结构：.hd + .bd
-
布局思路
盒子模型
前端开发工程师
版权
定位
作用：灵活地改变盒子在网页中的位置
实现：
-
定位模式：position
-
边偏移：设置盒子的位置
-
left
-
right
-
top
-
bottom
相对位置
position：relative;
特点:
-
改变位置的参照物是自己原来的位置
-
不脱标，占位
-
标签显示模式特点不变
绝对定位
position: absolute;
场景使用：子级绝对定位，父级相对定位（子绝父相）
特点：
-
脱标，不占位
-
参照物：先找最近的已经定位的祖先元素，如果所有祖先元素都没有定位，参照浏览器可视区改位置
-
显示模式特点改变：宽高生效（具备了行内块的特点）
定位居中
实现步骤：
-
绝对定位
-
水平，垂直边偏移为50%
-
子级向左，上移动自身尺寸的一半
-
左，上的外边距为-尺寸的一半
transform: transtate(-50%,-50%);
-
固定定位
position: fixed;
场景：元素的位置在网页滚动时不会改变
特点：
-
脱标，不占位
-
改变位置的参照物是浏览器窗口
-
显示模式特点：具备行内块显示模式特点
堆叠层级 z-index
默认效果：按照标签书写顺序，后来者居上
作用：设置定位元素的层级顺序，改变定位元素的显示顺序
z-index: 1; /*取值是整数，默认是0，取值越大显示顺序越靠上*/
CSS精灵
CSS精灵，也叫CSS Sprites，是一种网页图片应用处理方式，把网页中一些背景图片整合到一张图片文件中，再background-positin精确的定位出背景图片的位置。
优点：减少服务器被请求次数，减轻服务器的压力，提高页面加载速度
实现步骤：
-
创建盒子，盒子尺寸与小圆尺寸相同
-
设置盒子背景图为精灵图
-
添加background-position属性，改变背景图位置
-
使用PxCook测量小图左上角坐标
-
取负数坐标为background-position属性值（向左上移动图片位置）
-
字体图标
字体图标：展示的是图标，本质是字体
作用：在网页中添加简单的，颜色单一的小图标
优点：
-
灵活性：灵活的修改样式
-
轻量级：体积小，渲染快，降低服务器请求次数
-
兼容性：几乎兼容所有主流浏览器
-
使用方便：先下载再使用
下载字体
-
iconfont图标库：iconfont-阿里巴巴矢量图标库
-
下载字体
登录->素材库->官方图标库->进入图标库->选图标，加入购入车->购物车，添加至项目，确定->下载至本地
使用字体
-
引用字体样式（iconfont.css）
-
标签使用字体图标类名
-
iconfont：字体图标基本样式（字体名，字体大小等等）
-
icon-xxx：体表对应的类名
-
<span class="iconfont icon-xxx"></span> <!-- 如果要调整字体大小，注意选择器的优先级要高于.icobfont类 -->
上传矢量图
作用：项目特有的图标上传到iconfont图标库，生成字体
扫一扫
1043
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
