3小时快速入门html5+css(2022)
字体图标-iconfont
1.引入样式表
2.引入内容
<link rel="stylesheet" href="./iconfont/iconfont.css">
<style>
/* .iconfont {
font-size: 60px;
} */
style>
<body>
<i class="iconfont icon-favorites-fill">i>
body>
购物车案例
<body>
<div class="nav">
<ul>
<li>
<a href="#">
<span class="iconfont icon-cart-Empty-fill orange">span>
<span>购物车span>
<span class="iconfont icon-arrow-down">span>
a>
li>
ul>
div>
body>
上传矢量图-svg-上传
1.与设计沟通，得到svg格式矢量图
2.在iconfont网站上传图标，下载使用
平面转换
- 作用：丰富标签的显示方式，改变盒子在平面内的形态（位移，旋转，缩放）2D转换
- 平面转换属性：transform
位移
- 语法：transform:translate(水平移动距离，垂直移动距离)
- 取值（正负均可）：像素，百分比（参照物为盒子自身尺寸）
- 注意：x轴正向为右，Y轴正向为下
- 技巧：如果translate只给出一个值，表示水平方向的移动（单独设置某个方向的移动距离：translateX()，translateY()）
位移，绝对定位居中
- 目标：使用translate快速实现绝对定位的元素居中效果
绝对定位的盒子居中（基础写法）:使用left,top后，再用margin-left，margin-top居中，值为宽高的一半。
.son {
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -50px;
width: 200px;
height: 100px;
background-color: pink;
}
绝对定位的盒子居中（灵活写法）：transform:translate(-50%,-50%)
.son {
position: absolute;
left: 50%;
top: 50%;
/* margin-left: -100px;
margin-top: -50px; */
transform: translate(-50%, -50%);
width: 200px;
height: 100px;
background-color: pink;
}
双开门案例
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 1366px;
height: 600px;
margin: 0 auto;
background: url('./images/bg.jpg');
overflow: hidden;(超出父级的部分隐藏)
}
/* 伪元素是行内，设置宽高不生效 */
.box::before,
.box::after {
float: left;
content: '';
width: 50%;
height: 600px;
background-image: url(./images/fm.jpg);
transition: all 2s;（设置渐变效果）
}
.box::after {
background-position: right 0;
}
/* 鼠标移入的时候的位置改变的效果 */
（注意css选择器的写法，一开始做就因为没有写对导致没有效果）
.box:hover::before {
transform: translateX(-100%);
}
.box:hover::after {
transform: translateX(100%);
}
style>
<body>
<div class="box">
div>
body>
旋转
- 语法：transform:rotate(角度)
- 技巧：取值正负均可（单位是deg）(正：顺时针；负：逆时针)
转换原点（属性名空格隔开）
- 语法：默认是盒子中间；transform-origin：原点水平位置 原点垂直位置
- 取值：方位名词（left,top,right,bottom,center）；像素单位值；百分比（盒子自身计算）
- 注意：中心点改的是转换的中心点！
多重转换
- 技巧：transform: translate(600px) rotate(720deg);
- 注意：rotate不要放前面，旋转可以改变坐标轴向（轮胎案例）
.box:hover img {
/* 边走边转 */
transform: translate(600px) rotate(720deg);
/* 旋转可以改变坐标轴向 */
/* transform: rotate(720deg) translate(600px); */
/* taransform具有层叠性 */
/* transform: translate(600px);
transform: rotate(720px); */
}
缩放
- 语法：transform:scle(x轴缩放倍数，y轴缩放倍数)；
- 技巧：一般情况下，只为scale设置一个值，表示x轴和y轴等比例缩放；transform:scale(缩放倍数)
播放按钮英雄联盟案例
- 布局：::after
- 样式：居中
- 效果：缩放
- 绝对定位居中（基础做法）
.box .pic::after {
/* 播放按钮居中显示 */
position: absolute;
top: 50%;
left: 50%;
/* transform: translate(-50%, -50%); */
margin-left: -29px;
margin-top: -29px;
content: '';
width: 58px;
height: 58px;
background-image: url(./images/play.png);
/* 缩放原来的五倍 */
transform: scale(5);
transition: all 0.5s;
opacity: 0;
}
- 绝对定位居中（transform属性；注意层叠性）
.box .pic::after {
/* 播放按钮居中显示 */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(5);注意这里
/* margin-left: -29px;
margin-top: -29px; */
content: '';
width: 58px;
height: 58px;
background-image: url(./images/play.png);
/* 缩放原来的五倍 */
/* transform: scale(5); */
transition: all 0.5s;
opacity: 0;
}
.box li:hover .pic::after {
transform: translate(-50%, -50%) scale(1);注意这里
opacity: 1;
}
opacity属性
- 控制组件透明度！取值0~1
.box li:hover .pic::after {
transform: scale(1);
opacity: 1;
}
渐变背景
- 渐变式多个颜色逐渐变化的视觉效果
- 一般用于设置盒子的背景
background-image: linear-gradient( transparent, rgba(0, 0, 0, .6));
(transparent用来指定透明色)
空间转换
- 目标：使用transform属性实现元素在空间内的位移，缩放，旋转等效果
- 空间：是从坐标轴定义的。Z轴位置和视线方向相同（+值指向用户，-值指向屏幕里面）
- 空间转换也叫3D转换
- 属性：transform
- 语法：transform:translate3d(x,y,z);
.box:hover {
/* transform: translate3d(50px, 100px, 200px); */
transform: translateX(100px);
transform: translateY(100px);
transform: translateZ(100px);
}
透视
- 使用perspective属性实现透视效果（产生近大远小）
- 属性（添加给父级）
1.perspective：值；（也叫视距：人眼睛到屏幕距离）
2.取值：像素单位数值，数值一般在800-1200;
<head>
<meta charset="UTF-8">
<title>透视效果title>
<style>
body {
perspective: 1000px;(要注意这个属性是添加给效果盒子的父级的！)
}
.box {
width: 200px;
height: 200px;
margin: 100px auto;
background-color: pink;
transition: all 0.5s;
}
.box:hover {
transform: translateZ(200px);
}
style>
head>
<body>
<div class="box">div>
body>
.box {
/* 透视效果：近大远小，近实远虚 */
perspective: 1000px;
}
空间旋转
- 目标：使用rortate实现元素空间旋转效果
- 语法：transform:rotateZ(值)；transform:rotateX(值)；transform:rotateY(值)
.box img:hover {
transform: rotateZ(360deg);
}
.box img:hover {
transform: rotateX(60deg);
transform: rotateX(-120deg);
}
.box img:hover {
transform: rotateY(60deg);
}
- 拓展：rotate3d(x,y,z，角度度数):用来设置自定义旋转轴的位置及旋转的角度（x,y,z,取值为0-1之间的数字）
左手法则
- 判断旋转方向：左手握住旋转轴，拇指指向正值方向，手指弯曲方向为旋转正值方向
立体呈现（立方体盒子）（添加给父级）
- 实现方法：
- 添加transform-style:preserve-3d;
- 使(子元素)处于真正的3d空间
- 默认值flat，表示子元素处于2D平面内呈现
.cube {
position: relative;
width: 200px;
height: 200px;
margin: 100px auto;
/* background-color: pink; */
transition: all 2s;
transform-style: preserve-3d;(呈现3D效果)（要注意这个属性是添加给效果盒子的父级的！)
}
.cube:hover {
transform: rotateY(180deg);
}
案例-3D导航栏
- 搭建立方体
- li标签：添加立体呈现属性transform-style:preserve-3d;添加旋转属性（方便观察）
- a标签
<style>
ul {
margin: 0;
padding: 0;
list-style: none;
}
.navs {
width: 300px;
height: 40px;
margin: 50px auto;
}
.navs li {
position: relative;
float: left;
width: 100px;
height: 40px;
line-height: 40px;
transition: all .5s;
transform-style: preserve-3d;
/* 旋转: 让大家在写代码的过程中看到立体盒子 */
/* transform: rotateX(-20deg) rotateY(30deg); */
/* 测试缩放效果 */
/* transform: scale3d(0.5, 1.1, 2); */
}
.navs li a {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
text-align: center;
text-decoration: none;
color: #fff;
}
.navs li a:first-child {
background-color: green;
transform: translateZ(20px);
}
.navs li a:last-child {
background-color: orange;
/* 躺平x轴旋转 立方体的顶部,位移z(确保看到这个盒子) */
transform: rotateX(90deg) translateZ(20px);
}
/* li:hover 立方体旋转 */
.navs li:hover {
transform: rotateX(-90deg);
}
style>
<body>
<div class="navs">
<ul>
<li>
<a href="#">首页a>
<a href="#">Indexa>
li>
<li>
<a href="#">登录a>
<a href="#">Logina>
li>
<li>
<a href="#">注册a>
<a href="#">Registera>
li>
ul>
div>
body>
空间缩放
- 目标：使用scale实现空间缩放效果
- 语法：
- transform:scaleX(倍数)
- transform:scaleY(倍数)
- transform:scaleZ(倍数)
- transform:scale3d(x,y,z)
transform: scale3d(0.5, 1.1, 2);
动画
- 两个状态的改变可以使用过渡效果
- 多个状态的改变就需要使用animation添加动画效果了，动画过程可控（重复播放，最终画面，是否暂停）
- 构成动画的最小单元：帧或者动画帧
动画的实现步骤
1.定义动画:
（第一种）
@keyframes 动画名称{
form{}
to{}
}
(第二种)
@keyframes 动画名称{
0%{}
10%{}
15%{}
100%{}
}
@keyframes change {
form {
width: 200px;
}
to {
width: 600px;
}
}
@keyframes change {
0% {
width: 200px;
}
50% {
width: 500px;
height: 300px;
}
100% {
width: 800px;
height: 500px;
}
}
/* 百分比指的是动画总时长的占比 */
2.使用动画
anomation: 动画名称 动画花费时长;
.box {
width: 200px;
height: 100px;
background-color: pink;
/* 使用动画 */
animation: change 1s;
}
- animation:动画名称，动画时长，延迟时间，速度曲线，延迟效果，重复次数，动画方向，执行完毕时的状态；
- 注意：动画名称和动画时长必须赋值；取值不分先后顺序，如果有两个时间值，第一个时间表示动画时长，第二个表示延迟时间
/* animation: change 1s linear; */
animation: change 1s steps(3) 1s(延迟时间) 3（重复次数）;
/* 无限循环 */
animation: change 1s infinite;
/* 反复执行状态 */
/* animation: change 1s infinite alternate(反复执行属性); */
/* 默认值, 动画停留在最初的状态 */
/* animation: change 1s backwards（默认值）; */
/* 动画停留在结束状态 */
/* animation: change 1s forwards; */
动画属性
- 目标：使用animation相关属性控制动画的执行过程
- background复合属性：color image repeat attachment position;
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
| 属性 | 作用 | 取值 |
|---|---|---|
| animation-name | 动画名称 | |
| animation-duration | 动画时长 | |
| animation-delay | 延迟时间 | |
| animation-fill-mode | 动画执行完毕时状态 | forwords:最后一帧状态 backwards:第一阵状态 |
| animation-timing-function | 速度曲线 | steps(数字):逐帧动画 |
| animation-iteration-count | 重复次数 | infinite为无限循环 |
| animation-direction | 动画执行方向 | alternate为反向 |
| animation-play-state | 暂停动画 | paused为暂停，通常配合:hover使用 |
逐帧动画（小人跑步案例）
- 制作步骤
- 准备显示区域：设置盒子尺寸是一张小图的尺寸，背景图为精灵图
- 定义动画：改变背景图的位置（移动的距离是精灵图的宽度）
- 使用动画：添加速度曲线steps(N),N与精灵图上小图个数相同；添加无限重复效果
多组动画
animation: move 1s steps(12) infinite, run 1s forwards;(多个动画效果可以用逗号隔开)
- 小人案例代码
<head>
<meta charset="UTF-8">
<title>精灵动画title>
<style>
.box {
/* 1680/12 : 保证显示区域的尺寸和一个精灵小图的尺寸相同 */
width: 140px;
height: 140px;
/* border: 1px solid #000; */
background-image: url(./images/bg.png);
/* 12: 精灵小图的个数 */
animation: move 1s steps(12) infinite, run 1s forwards;
}
@keyframes move {
form {
background-position: 0 0;
}
to {
/* 1680整个精灵图的宽度 */
background-position: -1680px;
}
}
/* 定义一个盒子移动的动画 */
@keyframes run {
/* 如果动画的初始状态和盒子的默认状态相同可以省略开始状态的代码 */
form {
transform: translateX(0);
}
to {
transform: translate(800px);
}
}
style>
head>
<body>
<div class="box">div>
body>
走马灯案例代码
"box">
1
2
3
主轴方向
- 目标：使用flex-direction改变元素方向
- 主轴默认是水平方向，侧轴默认是垂直方向
- 修改主轴方向属性：flex-direction
| 属性值 | 作用 |
|---|---|
| row | 行，水平（默认） |
| column | 列，垂直（重点） |
| row-reverse | 行，从右向左 |
| column-reverse | 列，从上向下 |
.box li {
display: flex;
/* 1. 先确定主轴方向; 2. 再选择对应的属性实现主轴或侧轴的对齐方式 */
/* 修改主轴方向: 列 */
flex-direction: column;
/* 视觉效果: 实现盒子水平居中 */
align-items: center;
/* 视觉效果: 垂直居中 */
justify-content: center;
width: 80px;
height: 80px;
border: 1px solid #ccc;
}
弹性盒子换行（弹性盒子有“弹性”）
- 目标：使用flex-wrap实现弹性盒子多行排列效果
- 属性：flex-wrap:wrap;
.box {
display: flex;
/* 默认值，不换行 */
/* flex-wrap: nowrap; */
/* 弹性盒子换行 */
flex-wrap: wrap;(案例中是加在父级上的)
height: 500px;
border: 1px solid #000;
}
- 调整行对齐方式：align-content(取值与justify-content基本相同(没有evenly属性))
设置省略号（小兔鲜案例）
.orders li .goods {
display: flex;
flex: 1;
padding: 17px 0 14px 12px;
align-items: center;
margin-right: 120px;
}
.orders .goods .txt {
flex: 1;
/* 溢出的时候显示省略号 */
/* 弹性盒子的尺寸可以被内容撑开，不换行的文字撑开 */
width: 0;
}
.orders .goods .txt h5 {
text-overflow: ellipsis;
white-space: nowrap;（不换行）
overflow: hidden;(溢出隐藏)
}
移动适配
- rem：目前多数企业在用的解决方案
- vw/vh:未来的解决方案
rem
- 目标：能够使用rem单位实现网页元素的尺寸
- 效果：屏幕宽度不同，网页元素尺寸不同（等比缩放）
.box {
/* width: 10px; */
width: 5rem;
height: 5rem;
background-color: pink;
}
- rem相对单位
- 相对单位
- rem单位是相对与html标签的字号计算结果
- 1rem=1html字号大小
/* 1rem = 1html标签字号大小 */
html {
font-size: 12px;
}
.box {
width: 5rem;
height: 3rem;
background-color: pink;
font-size: 12rem;
}
rem移动适配-媒体查询
目标：能够使用媒体查询设置差异化的css样式
- 媒体查询能够检测视口的宽度，然后编写差异化的css样式
- 写法：@meda(媒体特性){ 选择器 {css属性} }
- 目前rem布局方案中，将网页等分成10份,html标签的字号为视图窗口宽度的1/10
/* 1. 不同的视口, HTML标签字号不同, 字号是视口宽度的1/10 */
@media (width:320px) {
html {
font-size: 32px;
}
}
@media (width:375px) {
html {
font-size: 37.5px;
}
}
@media (width:414px) {
html {
font-size: 41.4px;
}
- rem适配原理
- 目标：实现在不同宽度的设备中，网页元素尺寸等比例缩放效果
- N X 37.5 = 68/37.5
- rem单位尺寸
- 确定设计稿对应的设备的html字号（查看设计稿宽度，确定参考设备宽度（视图窗口），确定基准根字号（1/10视口宽度））
flexible
- 目标：使用flexible.js配合rem实现在不同宽度的设备中，网页元素等比例缩放效果
- flexible.js是手陶开发出来的一个用来适配移动端的Js框架
- 核心原理是就是根据不同视图窗口宽度给页面中html根标签根节点设置不同的font-size
Less语法
- 目标：使用Less运算写法完成px单位到rem单位的转换
- Less是一个Css预处理器，Less文件后缀是.less
- 扩充了Css语言，使Css具备一定的逻辑性，计算能力
- 注意：浏览器不识别Less代码，目前阶段，网页要引入对应的CSS文件
.father {
color: red;
width: 1.81333333rem;
}
.father .son {
background-color: pink;
}
编译插件
- 目标：使用Less语法快速编译生成CSS代码
Easy Less:
- vscode插件
- 作用：less文件保存生成css文件
注释
- 单行注释：
- 语法：//注释内容
- 快捷键：ctrl+/
- 块注释：/注释内容/
- 快捷键：shift+alt+A
// 单行注释
/*
块注释
第二行
第三行
*/
运算
- 加，减，乘直接书写计算表达式
- 除法需要1添加小括号或.
.box {
width: 100 + 10px;
width: 100 - 20px;
width: 100 * 2px;
// 除法
// 68 > rem
width: (68 / 37.5rem);
// height: 29 ./ 37.5rem;
height: 29 / 37.5rem;
}
嵌套
- 目标：能够使用Less嵌套写法生成后代选择器
- 作用：快速生成后代选择器
- 注意：&不生成后代选择器，表示当前选择器，通常配合伪类或者伪元素使用
.father {
width: 100px;
.son {
color: pink;
// & 表示当前选择器
&:hover {
color: green;
}
}
&:hover {
color: orange;
}
}
// .father:hover {}(方便代码迁移)
.father {
width: 100px;
}
.father .son {
color: pink;
}
.father .son:hover {
color: green;
}
变量
- 方法二：把颜色提前存储到一个容器，设置属性值为这个容器名称
- 变量：存储变量，方便使用和修改
- 语法：
定义变量：@变量名：值；
使用变量：CSS属性：@变量名
// 1. 定义. 2.使用
@colors:blue;
.box{
color: @color;
}
.father{
background-color: @colors;
}
.aa{
color: @colors;
}
.box {
color: blue;
}
.father {
background-color: blue;
}
.aa {
color: blue;
}
Less导入
- 目标：能够使用Less导入写法引入其他Less文件
- 导入：@import"文件路径";
@import './01-体验less.less';（import后面加空格，后面加分号）
@import './02-注释';(如果引入的是less文件，则可以不用写.less后缀)
Less导出css
// out: ./qqq/daqiu.css
// out: ./abc/
.box {
color: red;
}
vm/vh
- 目标：可以使用vw单位设置网页元素的尺寸
- 是相对单位，相对视图的尺寸计算结果
- vw:view width
- 1vm=1/100视口宽度
- vh:view height
- 1vh=1/100视口高度
vw适配原理
- 目标：实现在不同宽度的设备中，网页元素尺寸等比例缩放效果
- vw单位尺寸
- 确定设计稿对应的vw尺寸（1/100视口宽度）
- vw单位的尺寸= 单位数值 / (1/100视口宽度)
// out: ./
//68 * 29 --vw
.box {
width: (68/3.75vw);
height: (29/3.75vw);
background-color: pink;
}
.box2{
//vh
width: (68/6.67vh);
height: (27/6.67vh);
background-color: green;
}
全面屏（iphoneX）影响
// 不允许宽高混用，避免全面屏的影响
.box {
// 68 vw * 29 vh
width: (68 / 3.75vw);
height: (29 / 6.67vh);
background-color: pink;
}
实战演练
- 目标：实现在不同宽度的设备中等比例缩放的网页效果
- 视频布局：
- 父级左右padding
- 每个盒子：宽度为50%，左右padding（拉开内容距离)
媒体查询（根据设备宽度的变化，设置差异化样式）
- 开发常用写法:
- max-width（大到小）
- min-width（小到大）
- 完整写法
@media 关键词 媒体类型 and (媒体属性) { css代码 }
- 关键词
1.not(非)
2.and
3.only - 媒体类型
| 类型名称 | 值 | 描述 |
|---|---|---|
| 屏幕 | screen | 带屏幕的设备 |
| 打印预览 | 打印预览模式 | |
| 阅读器 | speech | 屏幕阅读模式 |
| 不区分类型 | all | 默认值，包括以上3种类型 |
- 媒体属性
| 特性名称 | 属性 | 值 |
|---|---|---|
| 视口的宽高 | width,height | 数值 |
| 视口最大宽或者高 | max-width,max-height | 数值 |
| 视口最小宽或者高 | min-width,min-height | 数值 |
| 屏幕方向 | orientation | portrait:竖屏;landscape横屏 |
媒体查询-书写顺序
- 注意：css样式具备层叠性！
媒体查询-link写法
- 外链式css引入
- 注意：写link标签一定要写小括号！
<link rel="stylesheet" href="./one.css" media="(min-width: 992px)">
<link rel="stylesheet" href="./two.css" media="(min-width: 1200px)">
BootStrap
- 目标：使用BootStrap框架快速开发响应式网页
使用
- 引入：BootStrap提供的CSS代码
<link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
- 调用类：使用BootStrap提供的样式
- container:响应式布局版心类
BootStrap栅格系统
- 目标：使用Bootstrap栅格系统布局响应式网页
- 栅格化：是指将整个网页的宽度分成若干等份
- BootStrap3默认将网页分成12等份
| 超小屏幕 | 小屏幕 | 中等屏幕 | 大屏幕 | |
|---|---|---|---|---|
| 响应断点 | <768px | >=768px | >=992px | >=1200px |
| 别名 | xs | sm | md | lg |
| 容器宽度 | 100% | 750% | 970% | 1170% |
| 类前缀 | col-xs- | col-sm- | col-md- | col-lg- |
| 列数 | 12 | 12 | 12 | 12 |
| 列间隙 | 30px | 30px | 30px | 30px |
- .container是bootstrap中专门提供的类名，所有应用该类名的盒子，默认已被指定宽度且居中。
- .container-fluid也是bootstrap中专门提供的类名，所有应用该类名的盒子，宽度均为100%
- 分别使用.row类名和.col类名定义栅格布局的行和列。
- 注意：
- container类自带间距15px
- row类自带间距**-15px**
<body>
<div class="container">1div>
<div class="container">
<div class="row">2div>
div>
<div class="container-fluid">3div>
body>
全局CSS样式
- 目标：掌握bootstrap手册用法，使用css全局样式美化标签
- 寻找样式可以在官网首页查看,寻找样式。
组件
- 目标：使用BootStrap组件快速布局网页
- 组件：bootStrap提供了常见的功能，包含了heml结构和css样式。
- 使用方法：
- 引入样式
- 使用组件
字体图标
- 注意：和iconfont使用方法一样
插件
- 将html+css+js结合为一体，可以实现交互效果
- 使用步骤：
- 引入bootstrap样式
- 引入js文件：jQuery.js+BootStrap.min.js
<script src="./js/jquery.js">script>
<script src="./bootstrap-3.4.1-dist/js/bootstrap.min.js">script>