HTML+css学习 学习笔记,由浅入深

​ 猿猿的前端之路就此开始,下面小白白们跟着猿猿一起学习前端基础h5+css叭!
​ 以下是猿猿的学习笔记,内容包含h5+css菜鸟教程几乎所有知识和pink老师知识,外加个人理解简化

HTML5知识点总结

截图工具 Snipaste,是一款强大的贴图软件,猿猿们可以自行下载哦在这里插入图片描述

alt取色,shift切换取色模式

文章目录


image-20210110104322267 image-20210110104339336

一、网页(网站、网页)

image-20210110104547831

网页构成的基本元素:图片、链接、文字、声音、视频,通常是**.htm.html**为后缀命名的文件,因此称为HTML文件

什么是HTML: 是一种用来描述网页的一种语言 image-20210110105110547
image-20210110105234560 image-20210110105336832

二、浏览器

作用就是读取html或htm文件(即HTML文档),并以网页的形式读取他们。

三、Web标准(使代码更规范更简介更通用)

image-20210110110544032

三大构成:结构、表现、行为,结构更重要

image-20210110110711722 image-20210110110753431

HTML语法规范

1.1尖括号、双标签、单标签(特殊,<br /》极少情况

image-20210110111348017 image-20210110111850931

​ 包含和并列关系代码 : 结构标签代码

image-20210110111945136 image-20210110112257244

**结构标签:**html,head、/head,body

image-20210110112522645

结构标签的总结:

根标签、头部、身体三大部分

image-20210110113906800
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我利用vscode创建的第一个页面</title>
</head>
<body>
    写代码是一件快乐的事
</body>
</html>
image-20210110152227199

lang语言:"en"定义语言为英文,"zh-CN"定义语言为中文

image-20210110152359237

声名标签,不属于html里面的标签

image-20210110152529764

字符集,代表了各种字符,防止乱码

image-20210110160901281

路径

1目录文件夹和根目录
image-20210110192337179
2相对路径和绝对路径

相对路径:image-20210110192732535

image-20210110193611620

绝对路径:文件所在电脑的具体位置

image-20210110193729150

特殊字符(空格 &nbsp+; 小于号&lt+; 大于号&gt+;)

image-20210111092032647

常用标签

1.语义标签:标题标签、段落和换行、不换行标签
image-20210110161154837

标题标签:image-20210110161413283

不能像正常一样,按空格就能分段换行,需要用段落标签来操作。

段落标签:image-20210110162414212

强制换行:image-20210110162546172

强制不换行:image-20210122090644732

2.文本格式化标签(粗体倾斜、删除线、下划线)

image-202101101630198703.image-20210110163217847独占一行

div没有语义的标签,span是一个小盒子,是一个大盒子,用来装东西。可装图片或文字

4.图像标签image-20210110184717954
image-20210110184658657
图像标签的属性:
image-20210110185535294

图片需要与网页文件放在同一个文件夹中

alt:图片显示不出来时用 alt文字替换的方法
image-20210110185135465
title:鼠标放在图片上能显示文字
width,heigth 设置图片的宽高,只设置一个时另一个会等比例自己缩放

image-20210110191843102

复制图片地址导入自己的网页:

也可以复制网页中的图片地址,直接导入自己的网页中

image-20210110193946550

image-20210110194005900

图像标签注意事项:

image-20210110192032957
5.超链接标签(重点)
image-20210110194149780
1 语法格式
image-20210110194849387 image-20210110194917114

herf必须要写的属性(写在a后面);两个a中间可加图片或文本

target(元素被链接到的目标元素)以什么方式打开:_self(默认值)当前的窗口打开,_blank新窗口中打开

**:target{display:block;} 😗*target 是“伪类”后边的是样式设置

2 链接分类
1.外部链接 : image-20210110202215408
image-20210110202056889
2.内部链接:image-20210110202239013

image-20210110223003048image-20210110223024272

image-20210110223804002
3.空链接:image-20210110223836096

javascript:void(0) javascript: ;

4.下载链接:image-20210110224045630
image-20210110224407019
5.网页元素超链接:image-20210111085258153
image-20210111090405928
6.锚点链接:image-20210111090622963 两部曲
image-20210111090747692

image-20210111091055715image-20210111091150716image-20210111091213635

6.注释标签:image-20210111091717781
7.表格标签

表格的主要作用:清楚的展示数据

1.表格的基本语法:
image-20210111100508616
2.表头单元格标签:(用th表示,table hand的缩写) ,效果居中加粗显示

三行三列:

image-20210111101818954image-20210111101842589

3.表格的属性:
align对齐方式;border边框,1有边框,默认为” “ 无边框;cellpadding像素距离边框的距离;cellspacing单元格和单元格之间的空隙,默认2像素;width表格的宽度大小。
image-20210111102034849 image-20210111111643140

image-20210111111703572border-radius:(百分号或数字)圆角边框

border:10px solid #a1a1a1; 边框粗细和颜色

padding盒子内边距,会影响盒子实际大小,但不存在撑开盒子的情况

padding:7px 13px 0px;内边距上7,左右13,下0

4.表格结构标签:更加清晰简洁
image-20210111112039375

image-20210111112024167image-20210111112206022

image-20210111112310824
5.合并单元格(rowspan 跨行;colspan跨列):image-20210111112432278

目标单元格:代码写在需要合并的第一个单元格括号内

合并单元格三部曲:
image-20210111112657183

image-20210111113213783image-20210111113022161

8.列表标签(占一行)

image-20210111123531776
1.无序列表:(ul li)(重点)

ul里面有li子,嵌套关系 。ul只能放li,li里面可以放很多东西

image-20210111124540254
2.有序列表:(ol li理解)

ol里面有li子,嵌套关系 。ul只能放li,li里面可以放很多东西image-20210111125005048

3.自定义列表:(dl dt dd重点)

dl里面有dt和dd(dt和dd并列关系,dt大哥在上面)。

image-20210111130035255
4.列表总结:
image-20210111130202988
9.表单标签
1.表单的组成:表单控制、表单域、提示信息
image-20210111132620311
2.表单域:(了解)
image-20210111132820348 image-20210111132923412

表单域就是formimage-20210111133528637

3.表单控件(表单元素input、select、texarea)image-20210111133701730

分为image-20210111133732706

1.imput表单元素:image-20210111133901911
2.select下拉表单元素:

image-20210111161701913

image-20210111161900774image-20210111161926942

image-20210111162636426 image-20210111162701303
3.textarea文本域表格元素:(可以输入很多文本区域)
image-20210111195608534

clls每行最多的字数,rows显示的行数

image-20210111195727478

4.type属性:
image-20210111134139173
1.radio多选一,checkbox复选框多选(他们名字必须都相同)。
2.添加value后,文本框中直接出现添加的value值;
3.给他们设置checked后,打开后默认已经被勾选;
4.maxlength=“6” 规定只能输入六个字符;
5.submit提交 加value修改自定义字体内容,点了之后可以把表单域中的表单元素送给后台服务器。
6.reset重置 加value修改自定义字体内容,点了之后表单域中所有的东西恢复原状
7.button普通按钮 后期搭配js使用
8.file文件域 需要上传文件时添加此功能
9.placeholder:用来提示用户输入的,当用户真的输入了文字之后,会被输入的文字覆盖image-20210111143341479
 <form>
        用户名:<input type="text" name="username" value="请输入你的用户名"  maxlength="6"> <br>
        密码:<input type="password" name="pwd" > <br>
        <!-- radio多选一 -->
        性别:男<input type="radio" name="1" value="男">  女<input type="radio" name="1" value="女"> 
        人妖<input type="radio" name="1"    checked="checked"> <br>
        <!-- checkbox复选框,选后能取消,多选 ,加上checked自动勾选-->
        爱好:吃饭<input type="checkbox" name="2" value="吃饭" checked="checked">   睡觉<input type="checkbox" name="2"> 
        打豆豆<input type="checkbox" name="2" value="打豆豆 ">       
        <input type="submit" value="免费注册">
        <input type="reset" value="重新设置">
         <input type="button" value="发送手机验证码"> <br>
        上传文件:<input type="file" >
    </form>
10.lable标签

作用:点击名称也能填写内容空白块

css知识点总结

css单位详讲

(1条消息) 【CSS 单位 (详细介绍)】_Hey_Coder-CSDN博客_css单位

1.1 相对长度 单位

1.1.1 字体的 相对长度

⑴ em : (相对于 当前元素本身的 )字体大小 font-size 的倍数
⑵ rem : (根元素 html 标签的) 字体大小 font-size 的倍数
⑶ ex : x 的高度 (随 font-family , font-size 改变)
⑷ ch : 数字 0 的宽度 (随 font-family , font-size 改变)
1.1.2 视窗的 相对长度
⑴ vh : 视窗高度 的 1% (百分之一)
⑵ vw :视窗宽度 的 1%(百分之一)
⑶ vmin : vw 和 vh 中的 较小值 (宽/高较小值的 百分之一)
⑶ vmax : vw 和 vh 中的 较大值 (宽/高较大值的 百分之一)

♣ 视窗单位的 计算方法

1.1.3 百分比 单位 (%)

⑴ 定位 中的百分比
⑵ 盒模型 中的百分比
⑶ 文本 中的百分比
⑷ 边框 和 圆角 中的百分比
⑸ 背景 属性中的百分比
⑹ 变换 中的百分比
♣ 百分比值的 继承

1.2 绝对长度单位

⑴ px : 像素
⑵ cm : 厘米 ( 1/2.54 in , 38px)
⑶ mm : 毫米 (1/25.4 in, 3.8px)
⑷ in : 英寸 ( 1in = 96px ,2.54cm)
⑸ pc : 派卡 ( 1/6 in ,12pt, 16px)
⑹ pt : 点 (显示器上 一个个的点,1/72 in,1.3px)
♣ CSS 绝对单位的 换算关系

  • 1in = 96px
  • 1in = 2.54cm
  • 1in = 25.4mm
  • 1in = 72pt
  • 1in = 6pc
    • 1pc = 12pt

♣ 长度单位的 浏览器支持

  • 长度单位的 浏览器支持
  • 在这里插入图片描述
  1. 时间单位 (s , ms)

    1. 时间单位

      CSS 中 两个常见的 时间单位
      ① 秒(s)
      ② 毫秒(ms)
      换算: 1s = 1000ms。
      搭配属性: 常用于 CSS 中 transition-duration、transition-delay、animation-duration 和 animation-delay 属性中。

    2.频率单位 (Hz , kHz)

    1. 频率值的 使用位置: 在 听(或说)级联样式表中 使用.
    2. 频率的 两个单位值
    • ① 赫兹(Hz)
    • ② 千赫(kHz)
    • 频率的作用
    • 可以被用来 改变一个 语音阅读文本的 音调。
      • 低频率是 低音
      • 高频率是 高音
  2. 角度单位 (deg,rad,grads,turn)

    1. ⑴ 角度: deg
      角度最常用的 用法
      ① 设置 旋转角度:
      在CSS 中 给 旋转元素 设置一个旋转角度(度数),依赖于 CSS 的 transform 属性中的rotate(),skew() 函数等
      ② 渐变中的角度: linear-gradient(260deg,red,blue)
      0deg = to top
      角度缺省的默认值: to bottom = 180deg
      ⑵ 百分度(grads):
      一个分度,百分度 相对于 1/400 个整圆
      跟角度单位一样,支持负值
      负值表示逆时针方向,100grad = 90deg
      ⑶ 弧度(rad):

      在 Canvas中 用到弧度
      1rad = 180/π °(大约为 57.3deg)
      1.570796326794897rad = 100grad = 90deg
      rad = (π / 180) * deg
      deg = (rad * 180) / π
      ⑷ 圈数(turn):1turn = 360deg

目录:

image-20210112091727611image-20210112091618267

1.为什么要用css:

HTML(结构)样式简单,只能写出元素,调试样式美化界面比较复杂。这时候就可以用css(样式)来美化网页,让布局更简单,更漂亮。

总结HTML和css:

image-20210112092442450

2.css语法规范:

image-20210112093528148

image-20210112093600448

3.css代码风格:样式格式书写、样式大小写风格、样式空格风格

1.样式格式书写:(提倡用第二种)
image-20210112095050744
2.样式大小写书写:
image-20210112095218848
3.样式空格风格:
image-20210112095412280

4.css基础选择器

1.作用:image-20210112095700089
2.选择器的分类:
image-20210112101511018
1.标签选择器:
image-20210112112814848
2.类选择器:

差异化选择类标签,单独选择一个或几个标签。样式点定义,结构类调用,一个或多个,开发最常用

命名时遵循类的命名规范,可多次使用

语法:
image-20210112113120356 image-20210112113218946

image-20210112134805606image-20210112134903997

多类名:
image-20210112143156320

多类名的使用方法和好处:用空格把两个类名隔开;可以统一修改多个盒子

image-20210112145031448image-20210112145042152image-20210112145254112

多类名的使用场景:

image-20210112144853919
3.id选择器:

样式#定义,结构id调用,只能调用一次,别人切勿使用 .选择所有id内容

image-20210112151522189image-20210112151536280

image-20210112150314040
语法:
image-20210112150156443
id选择器和类选择器的区别:
image-20210112151746292
4.通配符选择器:

用*定义,表示网页中所有的元素。

语法:
image-20210112152419539

开头选择器:pulse1 pulse2 pulse3 pulse4

image-20210121163825521

5.基础选择器的总结:
image-20210112152729914

5.CSS字体属性:

1.字体系列:
image-20210112162221830
2.字体大小:
image-20210112162633976

image-20210112162719791

3.字体粗细:
image-20210113102747741
4.文字样式:
image-20210113102941568
5.字体符合属性:

正常字体粗细400,字体加粗用纯数字,字体大小尺寸加px。

简写方式:(倾斜方式、字体粗细、字体大小/字体行距、字体类型)

不能更换顺序,size和family不能省略

image-20210113104104782

image-20210113104651627image-20210113104703930

6.字体属性总结:
image-20210113105124548

6.css文本属性:

1.文本颜色:
image-20210113105512456image-20210113105435882
image-20210113105548123
2.文本对齐:(test-align:)

水平:text-aline: 垂直:text-height

image-20210113105757913image-20210113105811673

3.装饰文本:(test-decoration )
image-20210113110029688 image-20210113110224057
4.文本缩进:(test-indent,常用于段落的首行缩进)单位px,em

image-20210113110550161image-20210113110600903

px:缩进单位 em:缩进相对单位,2em表示缩进两个字的大小

5.行间距、段落行间距:(line-height:)单位像素:px
image-20210113110904276
6.文本属性总结:
image-20210113111234928

6.css引入方式:

1.css样式表
1.内部样式表:

css放到html内部,单独写到style内部 。 div

image-20210113112122752
2.行内样式表:(结构简单的时候使用,适用比较少)
image-20210113112249133

style属性开头=” ; “,内容写到引号中间,不同内容用分号隔开。

3.外部样式表:(用到比较多)

1.新建一个.css文件;

2.在html中用link引用.css文件:image-20210113113202683

rel href

image-20210113113234756
4.引入方式总结:
image-20210113132003148

切换自动换行:alt+z

5.综合案例:(https://www.bilibili.com/video/BV14J4114768?p=90)

字体大小/字体行距、字体类型;标题不加粗,标题居中;hr画横线。

image-20210113135830932

image-20210113135912481image-20210113140201459image-20210113140214065

image-20210113141027065

6.调试工具:鼠标右键打开检查或F12
image-20210113195244093

7.Emmt语法:

image-20210113204606563
1.快速生成HIML结构语法:
image-20210113205320829

image-20210113205622916点击tab出来image-20210113210322312image-20210113210431389image-20210113210531024

image-20210113210654920从demo1到demo5image-20210113210846754

image-20210113212153181带文本的多行输出;div{$}*5,文本内容从1到5;

2.快速生成css样式语法:

单词的首字母,快捷键

3.快速格式化规范代码:

右键:格式化文档或shift+alt+f 或安装插件 image-20210113213242201

8.复合选择器:(后代选择器、子选择器、并集选择器、伪类选择器)

1.后代选择器:(重要)
语法:image-20210114094804997

注意:

image-20210114104619915
2.子选择器:(亲儿子选择器)

只能选择作为某元素的最近一级子元素,只能选择儿子不能选择孙子

语法:image-20210114105426842如:
image-20210114105515635
3.并集选择器:(重要)

可以选择多组标签,同时为他们定义相同的样式,实现集体声明。

语法:

并集选择器中间用逗号隔开,逗号是”和“的意思 image-20210114114127091

image-20210114114155955
4.伪类选择器:

用于给某些特殊的选择器中添加特殊效果,特点:用冒号”:“表示

1.链接伪类的基本属性

按顺序书写

a:link 未访问过的链接 ,a:link 把没有点击的(访问过的)链接选出来

a:visited 选择点击过的访问链接

a:hover 选择鼠标经过的

a:active 鼠标按下去没有松开时的属性

注意事项:顺序 love hate(你个伪君子,先喜欢在讨厌)

image-20210114143132530
2.focus伪类选择器:

:focus 用于选取获得焦点(鼠标光标)的表单元素

主要针对表单来说,一般是 imput表单才能获取,注意没有空格

语法:image-20210114194352227
5.复合选择器总结:
image-20210114194902580

9.元素显示模式:

1.块元素:

只占一行的,是个容器,宽高都可以设置

常见的块元素:
image-20210114200311582
2.行内元素:

不会分段,无法设置宽高,行内只能容纳纯文本或其他行内元素。

image-20210115202627448

特殊:链接里不能放链接;a里面可以放块级元素但给a转换成块级模式最安全。

3.行内块元素:

img、input、td,同时具有块元素和行内元素的特点

特点:具有行内元素的特点(不会分段),块级元素特点(宽高内外边距行高可控)

image-20210114202815184

4.元素显示模式总结
image-20210114203052096
5.元素显示模式转换
行内元素转换为块级元素:display: block
image-20210114204043637
块级元素转换为行内元素:display: inline
image-20210114204803089
转换为行内块元素:display: inline-block

10.css背景:

background:

image-20210222153434236

image-20210222153411953

1.背景颜色 background-color:颜色值;

默认值:transparnt(透明)

11.flex布局:

一行代码使布局平均分配,任何一种元素都可以改成flex布局

转换为flex布局: display: flex;
注意:
image-20210115094741704
布局原理:
image-20210115095022972 image-20210115095041698
常见的父项属性:
flex-direction:设置主轴方向
image-20210115104258833
justify-content:设置主轴上的子元素排列方式

注意:使用前先确定主轴方向是哪个。

image-20210115104754912
flex-wrap:设置子元素是否换行
image-20210115105138668
align-content:设置侧轴上的子元素排列方式(多行)

**注意:**适用于子项出现换行(flex-wrap:wrap)情况(多行,在单行是没有效果的)

image-20210115105912633
align-items:设置侧轴上的子元素排列方式(单行)
image-20210115105525922
flex-flow:复合属性,相当于同时设置了flex-direction和flex-wrap
六大属性:

①order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。

② flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。

③ flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。

④ flex-basis定义项目占据的主轴空间。(如果主轴为水平,则设置这个属性,相当于设置项目的宽度。 原width将会失效。)

⑤ flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。

⑥ align-self:定义单个项目自身在交叉轴上的排列方式,可以覆盖掉容器上的align-items属性。

属性值:与align-items相同,默认值为auto,表示继承父容器的align-items属性值。

11.grid布局:

开启布局:给外层元素添加:
image-20210125090007509
设置每列的宽度:
固定宽度:
grid-template-colomn:100px 100px 100px
浮动宽度:
grid-template-colomn:1fr 2fr 1fr fr代表着每行的比例,如1fr=1/总数
设置间距:

列间距:

column-gap:列间距
row-gap:行间距
gap:行间距和列间距
排列元素:template(模板)

grid-template-areas

image-20210125091206515 image-20210125091229561
对齐:
垂直方向对齐子元素:(居中、靠下)
align-items:center,end
水平方向对齐子元素:(居中、靠右、两端)
justify-items:center、end、space-between
当行轨道和列轨道尺寸小于grid容器时:
垂直方向上:align-content(居中、靠下)
align-content:center、end
水平方向上:justify-content(居中、靠右、两端)
justify-content:center、end、space-between

12.position的属性:

position有以下属性:static、inherit、fixed、absolute、relative
前三个好理解好区分:
static:是默认状态,没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
nherit:从父元素继承 position 属性的值。
fixed:生成绝对定位的元素,相对于浏览器窗口进行定位。(即滚动浏览器的时候,元素永远固定显示在窗口可视区的某个位置)。

比较常用而且会引起初学者迷惑的是absoluterelative,它俩有什么分别呢?

一、先来看看W3C给的概念(定位是不占位置的)子绝父相

absolute:生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。

relative:生成相对定位的元素,相对于其正常位置进行定位。

两者最核心的区别在于:absolute不受父元素里的其他元素影响,而relative会受到父元素里的其他元素影响。

绝对定位position: absolute

绝对定位是相对于元素最近的已定位的祖先元素,如果元素没有已定位的祖先元素,那么它的位置则是相对于最初的包含块(也就是body)。

绝对定位本身与文档流无关,因此不占空间,普通文档流中的元素的布局就当绝对定位的元素不存在时一样,所以它们可以覆盖页面上其他的元素,且可以通过z-index属性来控制这些层的相应顺序。

相对定位position: relative

相对定位:相对位置的坐标参考系是以自己上一次的位置(x,y)作为原点(0,0)。

注意:在使用相对定位时,无论是否进行移动,元素仍然占据原来的空间。因此,移动元素会导致它覆盖其它框。

不用转换为块状:

加入绝对定位、相对定位浮动的行内元素

固定定位:
语法:

image-20210123145144877

image-20210123145119956

13.动画(-)(transform)

(1)过度(执行这个动作的时间):(transtation)

过度写到本身上,谁做动画给谁加 transform:all 0.3s;

(2)元素的转换点:
语法:(原点) (起源)image-20210121145435669

默认中间:50% 50% 如设置左下角:image-20210121145852591

注意:
image-20210121145454955
1.移动(treanslate)

移动盒子位置三种方法:定位、盒子外边距、2d转换

image-20210121085504334

水平移动100px,垂直移动100px

1.语法:
image-20210121085831429
2.注意:
image-20210121090119677

参数可以用百分号,如50% 移动自身宽度的一半

水平居中垂直居中绝对定位 :

top:50% left50%

transform:translate(-50%,-50%)/margin-top:-盒子的一半像素 ;margin-left:-盒子的一半像素

2.旋转:
1.语法:

image-20210121091440662

2.注意:
image-20210121091511428
3.旋转案例

image-20210121085113947image-20210121085120914

3.缩放:
1.语法:transform:scale(x,y);

不跟单位,数字就是倍的意思,x=2就是宽变为两倍

等比例缩放 语法:transform:scale(z);括号里面只有一个数字

2.div:hover
3.优点:

不会影响其他盒子,可以设置中心点

4.连写:

注意:treanslate位移写在最前面

13.动画(二):

1.步骤:

先定义动画,在使用(调用动画)

image-20210121155842894
1.用@keyframes定义动画(类似于定义类选择器):
语法:

0% 和 100% 可替换为 from 和to

image-20210121153912101image-20210121161113551

image-20210121160448899image-20210121160535850

百分比*时间=每个状态所用的时间

2.使用动画:
语法:
image-20210121154342638

animation:卡通片绘制 duration:持续时间

3.动画属性
image-20210121161701723
ease种类:
image-20210123091634898
简写:image-20210121162434740

image-20210121162612594

不包括:
image-20210121163128613

linear(匀速),前两个要写上

image-20210121163234795

动画的速度曲线:

opacity(透明度)

animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1)(透视轮播图)

cubic-bezier即为贝兹bai曲线中du的绘制方法。

图上有四zhi点,P0-3,其中P0、P3是默认的dao点,对应了zhuan[0,0], [1,1]。而剩下的P1、P2两点则是shu我们通过cubic-bezier()自定义的。cubic-bezier(x1, y1, x2, y2) 为自定义,x1,x2,y1,y2的值范围在[0, 1]。
预留的几个特效:
ease: cubic-bezier(0.25, 0.1, 0.25, 1.0)
linear: cubic-bezier(0.0, 0.0, 1.0, 1.0)
ease-in: cubic-bezier(0.42, 0, 1.0, 1.0)
ease-out: cubic-bezier(0, 0, 0.58, 1.0)
ease-in-out: cubic-bezier(0.42, 0, 0.58, 1.0)

CSS即层叠样式表(Cascading StyleSheet)。 在网页制作时采用层叠样式表技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。

13.动画(三):3D转换

透视写在父级中

知识点:
image-20210121191802808
1.3D移动:transform:translate3d(x,y,z)
2.3D旋转:transform:rotate3d(x,y,z,deg)沿着自定义轴旋转deg角度
image-20210121194321548
旋转方向:(左手法则)

左手法则:大拇指为x、y、z正方向,四指指的方向为正直(y轴正方向朝下)

xyz值要么是0,要么是1

3.透视:perspective

实现近大远小特点:改变perspective或z的大小(两者同时存在)

定义:

就是视距,透视越小,盒子越大,产生3d效果,在二维平面产生近大远小的特点

注意:写在父级元素中
image-20210121192940851
4.3D呈现:transform-style
image-20210121202206199

13.动画(四):轮播图

1.z - index :

拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面

* z - index *(位置:绝对、位置:相对 或位置:固定]

代码:
<title>轮播图-锚点</title>
    <style>
        *{
            padding: 0px;
            margin: 0px;
        }     
        .href {/* 目的为了改变点击按钮的位置 =====子类*/
            position: absolute;
            top: 480px;
            left: 120px;
        }
        .href a {/* 为链接a添加相对定位,其他都是绝对定位======父类 */
            position: relative;
            width: 20px;
            height: 20px;
            background-color: #666666;
            float: left;
            margin-left: 15px;
            border-radius: 50%;
        }
        .images {/* 目的,使点击按钮放在图片之上 ======子类*/
            position: absolute;
            z-index: -1;
        }
        img {/* 设置图片的大小 =====子类*/
            position: absolute;
            width: 590px;
        }
        .im {/* 使用不到的图片隐藏 */
            display: none;
        }
        :target {/* 使伪类链接--隐藏的图片显示出来 */
            display: block;
        }
    </style>
</head>
<body>
    <!-- 两个伪类链接 -->
    <div class="href">
        <a href="#a"></a>
        <a href="#b"></a>
        <a href="#c"></a>
        <a href="#d"></a>
    </div>
    <images>
        <!-- 590*470 -->
        <img src="sort1.png" alt="" >
        <img src="sort2.png" alt="" id="b" class="im">
        <img src="sort3.png" alt="" id="c" class="im">
        <img src="sort4.png" alt="" id="d" class="im">
        
    </images>
</body>
</html>
自动
<title>轮播图-自动</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;           
        }
        .images {
            width: 510px;
            height: 510px;
            position: relative;
            overflow: hidden;
            left: 350px;
        }
        .images ul {
            position: absolute;
            animation: move 8s ease-in-out infinite;
        }
        @keyframes move {
            0% {
                left: 0px;
            }
            25% {
                left: -510px;
            }
            50% {
                left: -1020px;
            }
            75% {
                left: -1530px;
            }
            100% {
                left: 0px;
            }

        }
        .images ul li {
            position: absolute;
        }
        li:nth-of-type(1){
            left: 0px;
        }
        li:nth-of-type(2){
            left: 510px;
        }
        li:nth-of-type(3){
            left: 1020px;
        }
        li:nth-of-type(4){
            left: 1530px;
        }
        
        img {
            width: 510px;
        }


    </style>
</head>
<body>
    <div class="images">
        <ul>
            <li><img src="sort1.png" alt=""></li>
            <li><img src="sort2.png" alt=""></li>
            <li><img src="sort3.png" alt=""></li>
            <li><img src="sort4.png" alt=""></li>
        </ul>
    </div>
</body>
渐变轮播图
如何实现渐变效果动画: 主要就是改变图片的透明度来实现.代码如下
.container ul li {
position: absolute;
opacity: 0; /* 如果不改变默认透明度,那么后续的执行动画需要从最后一张开始,采用倒序 */
​
/* 动画设置 */
animation-name: fade;
animation-duration: 20s;
animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
animation-iteration-count: infinite;
}

@keyframes fade {
0% {
opacity: 0;
z-index: 0;
}
25% {
opacity: 1;
z-index: 1;
}
50% {
opacity: 0;
z-index: 0;
}
}
​
.container ul li:nth-child(1) {
animation-delay: 0s;
}
.container ul li:nth-child(2) {
animation-delay: 5s;
}
.container ul li:nth-child(3) {
animation-delay: 10s;
}
.container ul li:nth-child(4) {
animation-delay: 15s;
}

14.网页布局:

阴影:box-shadow

box-shadow: -20px 10px 10px 100px #888888;

image-20210121164026466

1.盒子定位

image-20210121104552836

2.显示与隐藏

display(显示隐藏)、visibillity(显示隐藏)、overflow(溢出显示隐藏)

1.display属性:

image-20210121110940732

display:none;

隐藏对象,不在占有位置

display:block;

转换为块状元素或显示元素

2.visibility属性:

image-20210121110054298

visibility:visible; 元素可见

visibility:hidden; 元素隐藏,继续占着位置

3.overflow属性:

image-20210121110441331

overflow:visible(默认)溢出的部分直接显示出来

overflow:hidden; 溢出部分隐藏(定位的盒子慎用)

overflow:scroll; 溢出时显示滚动条,不溢出时也显示滚动条

overflow:auto; 只有溢出时才显示滚动条

溢出部分显示省略号:

image-20210122092815276

实例:

 		<style>
 		.tudou {
            position: relative;
            width: 444px;
            height: 320px;
            background-color: pink;
            margin: 30px auto;
        }
      	 .tudou img {
            width: 100%;
            height: 100%;
        }
        .mask {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;填充整个盒子
            height: 100%;
            background: rgba(0, 0, 0, 0.4) url(2.png) no-repeat center;/* alpha透明度 */
        }
        .tudou:hover .mask {
            display: block;
        }
        </style>
        <body>
    		<div class="tudou">
        		<div class="mask"></div>
        		<img src="1.png" >
    		</div>
    	</body>
4.nth-child( ) 与 nth-of-type( )的定义与用法

1.nth-child(n) : 匹配父元素中的第 n 个子元素,元素类型没有限制。
nth-of-type(n) : 匹配同类型中的第n个同级兄弟元素。
n可以是一个数字,一个关键字,或者一个公式,比如:nth-child(odd) 奇数 ,nth-child(even) 偶数。

2.nth-child和nth-of-type的不同之处就是查找元素的方式不同。前者是查找兄弟元素中某个绝对位置的元素,后者是查找同类型元素中某个绝对位置的元素。

5.实现文本居中

利用Flex布局实现、利用属性 line-height和text-align、利用position 定位来实现、利用 vertical-align 来实现

6.box-sizing
  • content-box 是默认值。如果你设置一个元素的宽为100px,那么这个元素的内容区会有100px 宽,并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
  • border-box 告诉浏览器:你想要设置的边框和内边距的值是包含在width内的。也就是说,如果你将一个元素的width设为100px,那么这100px会包含它的border和padding,内容区的实际宽度是width减去(border + padding)的值。大多数情况下,这使得我们更容易地设定一个元素的宽高。

译者注: border-box不包含margin

7.margin和paddding

adding(margin):10px 20px 30px; 10px是上内(外)边距;20px是左右内(外)边距;30px是下内(外)边距;
padding(margin):10px 20px 30px 40px; 10px是上内(外)边距;20px是右内(外)边距;30px是下内(外)边距;40px是左内边距;

https://blz.nosdn.127.net/1/tm/overwatch/events/2021KanezakaChallenge/KanezakaChallenge-HomeBanner-Desktop.jpeg

15.常用标签

定义文档类型

定义超文本链接
定义一个点击按钮

定义文档中的节 定义了HTML文档的表单

to

定义 HTML 标题 定义斜体字 定义图像 定义输入控件
  • 定义列表的项目 定义文档与外部资源的关系 定义关于 HTML 文档的元信息。
    1. 定义有序列表。

      定义段落。 标签为媒介元素(比如 和 )定义媒介资源。 定义文档中的节。

考核重点:

一、点位:四种

普通定位top bottom left right 相对定位relative 绝对定位absolute

静态定位static

固定定位 fixed

粘性定位sticky

二、css单位的种类和区别 em字节 px像素

三、颜色的表示方法

1.RGB(RGBA)

2.直接用英文

3.十六进制

4.hsl(色相,饱和度,亮度)

5.直接设置透明度 transparent

四、浮动float(none、left、right)

清除浮动的方法:

1.在父元素结尾处添加空的div标签,clear:both
优点:简单,代码少,浏览器支持好,不容易出问题;

缺点:不少初学者不知道其原理,如果页面浮动布局多,就要增加很多空div,让人感觉很不爽;这种方法不推荐使用,这是以前的一种使用方式。

2.给父元素添加beforeafter为元素。
优点:浏览器支持好,在ie8以上的ie浏览器以及其他非ie浏览器都支持
缺点:代码多

3.给父元素添加overflow:hidden属性。

必须定义width或者zoom:1,同时不能定义height,使用overflow:hidden时,浏览器会自动检查浮动区域的高度。
优点:代码少,简单,浏览器支持。
缺点:不能配合position使用,因为超出部分被隐藏

4.父元素一起浮动,所有代码浮动变成一个整体,但是会产生新的问题,只做了解不推荐使用。

5.父级div定义display:table ,只做了解不推荐使用。

  1. 在浮动层下,设置空DIV,代码如下:
复制代码

说明:
clear: both;可以让元素不受到浮动层影响,排到浮动层的底下,
而父级可以包住最底下这个空DIV,这样看起来,它似乎也就包住那个浮动层了,
其实是障眼法哈~

缺点:IE6下会多出1像素来,并且设置了无语义的空DIV;


  1. 在父级设置:overflow: hidden;
复制代码

说明:overflow: hidden; 用它是为了提高父级的层级,层级提高了,自然能包住子级浮动元素了。

缺点:要是父级里面有什么元素居然飘到父级以外的地方,那就悲剧了,例如很多JS的提示层效果,

就不能用 overflow: hidden;


  1. 在父级设置:float
复制代码

说明:父级包不住浮动层,因为层级不够,那父级也设置float好喽

缺点:父级如果也有父级,也要设置浮动,那用这种方法,一路浮动到body那儿才算完事儿~~呃。。此方法本身就很滑稽


  1. 在父级设置:display: inline-block;
复制代码

说明:inline-block; 是一个不兼容的属性,但用在这里只是为了提高父级层级,
如此一来,可以完全忽略它的不兼容性哈~

缺点:设置不了元素居中:margin-left: auto; margin-right: auto;
你可以在不需要居中的元素上使用这方法哈~


  1. 父级如果是绝对定位:position: absolute;
复制代码

说明:要说层级,那绝对定位必定是老大,在绝对定位眼中,小小的浮动也居然敢称层级??

缺点:position: absolute;会影响布局,它是相对父级的块元素为参照物进行定位,
完全不按文档流的方式走,呵呵,所以如果你要是在绝对定位的元素里设置浮动,那就尽情设置吧,

不必理会任何浮动神马的,因为在绝对定位下,浮动啥的,真的是浮云了~


  1. 给浮动层下设置:

复制代码

说明:短小精炼的一行代码,很有效哈,对此代码不了解?
看看这里吧:
http://www.blueidea.com/tech/web/2007/4576.asp


  1. 给父级加上这行吧:
    .clear:after { content: ‘\20’; clear: both; display: block; }
复制代码

说明::after 是一个很好用的属性,有了它,可以往任何元素里插入字符串、空格啦,’.'之类的,
但可惜,IE6,IE7不认识:after,不过,又有什么关系呢?
反正IE6\IE7的父级能包住浮动层,所以不必管它们喽~
忘了解释了,先给浮动层底下插入一个空格(content: ‘\20’;),再把这个空格转成块元素,并且清除浮动层的影响,让父级包住这个空格,也是障眼法哈~

五、锚点链接targe在何处打开链接

文档流、定位连用

image-20210218092726535

相对定位:相对位置的坐标参考系是以自己上一次的位置(x,y)作为原点(0,0)。

绝对定位, 即完全脱离文档流, 相对于position属性非static值的最近父级元素进行偏移。

固定定位, 即完全脱离文档流, 相对于视区进行偏移。

CSS3的filter(滤镜)属性详解

参考链接:

https://blog.csdn.net/fantasy_geek/article/details/104936483?ops_request_misc=&request_id=&biz_id=102&utm_term=css%E7%9A%84brightness&utm_medium=distribute.pc_search_result.none-task-blog-2allsobaiduweb~default-1-104936483.pc_search_result_no_baidu_js

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

热爱代码的猿猿

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值