web前端入门学习 css（8）（新增语义化标签、video/audio、新增input类型、新增表单属性、属性选择器、结构伪类选择器、伪元素选择器、css3盒子模型、模糊、calc函数、过渡
2024-04-03 05:46:56
https://www.bilibili.com/video/BV1pE411q7FU?p=276
文章目录
- html5新特性
- html5新增语义化标签 header头部 nav导航 article内容 section区域 aside侧边栏 footer尾部 标签
- 视频video标签（支持格式、语法、常见属性）
- 音频audio标签
- 多媒体标签总结
- html新增input类型
- html新增表单属性（输入是否为空验证required、输入提示文本placeholder、自动聚焦输入框autofocus、输入框自动记录历史输入autocomplete、多文件上传mutiple）
- css3新特性
- 属性选择器 []
- 结构伪类选择器 first-child last-child nth-child
- nth-child和nth-of-type的区别
- 结构伪类选择器小结
- 伪元素选择器（css替代子盒子直接在父盒子中插入标签）
- 伪元素选择器使用场景1：字体图标
- 伪元素选择器：仿土豆播放效果
- 双伪元素清除浮动原理
- css3盒子模型（以设计盒子长宽显示盒子，border边框和padding不会撑大盒子：box-sizing:border-box;）（box-sizing:content-box会撑大盒子）（新style头）
- 让图片变模糊
- calc函数（比如使子盒子宽度永远比父盒子小30px）
- 过渡transition
- 进度条案例
html5新特性
html5新增语义化标签 header头部 nav导航 article内容 section区域 aside侧边栏 footer尾部 标签
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>HTML5新增语义化标签</title><style>header, nav {height: 120px;background-color: pink;border-radius: 15px;width: 800px;margin: 15px auto;}section {width: 500px;height: 300px;background-color: skyblue;}</style>
</head>
<body><header>头部标签</header><nav>导航栏标签</nav><section>某个区域</section>
</body>
</html>
视频video标签（支持格式、语法、常见属性）
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>video {width: 100%;}</style>
</head><body><video src="index_video_bg.mp4" poster='i.jpg' autoplay='autoplay' muted='muted' controls='controls'loop='loop'></video>
</body></html>
音频audio标签
多媒体标签总结
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style></style>
</head><body><audio src="mzj.mp3" autoplay='autoplay' controls='controls'></audio>
</body></html>
html新增input类型
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><!-- 我们验证的时候必须添加form表单域 --><form action=""><ul><li>邮箱: <input type="email" /></li><li>网址: <input type="url" /></li><li>日期: <input type="date" /></li><li>时间: <input type="time" /></li><li>数量: <input type="number" /></li><li>手机号码: <input type="tel" /></li><li>搜索: <input type="search" /></li><li>颜色: <input type="color" /></li><!-- 当我们点击提交按钮就可以验证表单了 --><li> <input type="submit" value="提交"></li></ul></form>
</body></html>
html新增表单属性（输入是否为空验证required、输入提示文本placeholder、自动聚焦输入框autofocus、输入框自动记录历史输入autocomplete、多文件上传mutiple）
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>HTML5新增表单属性</title><style>input::placeholder {color: pink;}</style>
</head><body><form action=""><input type="search" name="sear" id="" required="required" placeholder="pink老师" autofocus="autofocus"autocomplete="off"><input type="file" name="" id="" multiple="multiple"><input type="submit" value="提交"></form></body></html>
css3新特性
属性选择器 []
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>CSS3新增属性选择器</title><style>/* 必须是input 但是同时具有 value这个属性 选择这个元素 [] *//* input[value] {color:pink;} *//* 只选择 type =text 文本框的input 选取出来 */input[type=text] {color: pink;}/* 选择首先是div 然后 具有class属性 并且属性值 必须是 icon开头的这些元素 */div[class^=icon] {color: red;}section[class$=data] {color: blue;}div.icon1 {color: skyblue;}/* 类选择器和属性选择器 伪类选择器 权重都是 10 */</style>
</head><body><!-- 1. 利用属性选择器就可以不用借助于类或者id选择器 --><!-- <input type="text" value="请输入用户名"><input type="text"> --><!-- 2. 属性选择器还可以选择属性=值的某些元素 重点务必掌握的 --><input type="text" name="" id=""><input type="password" name="" id=""><!-- 3. 属性选择器可以选择属性值开头的某些元素 --><div class="icon1">小图标1</div><div class="icon2">小图标2</div><div class="icon3">小图标3</div><div class="icon4">小图标4</div><div>我是打酱油的</div><!-- 4. 属性选择器可以选择属性值结尾的某些元素 --><section class="icon1-data">我是安其拉</section><section class="icon2-data">我是哥斯拉</section><section class="icon3-ico">哪我是谁</section></body></html>
结构伪类选择器 first-child last-child nth-child
nth表示第几个的意思
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>CSS3新增结构伪类选择器</title><style>/* 1. 选择ul里面的第一个孩子 小li */ul li:first-child {background-color: pink;}/* 2. 选择ul里面的最后一个孩子 小li */ul li:last-child {background-color: pink;}/* 3. 选择ul里面的第2个孩子 小li */ul li:nth-child(2) {background-color: skyblue;}ul li:nth-child(6) {background-color: skyblue;}</style>
</head><body><ul><li>我是第1个孩子</li><li>我是第2个孩子</li><li>我是第3个孩子</li><li>我是第4个孩子</li><li>我是第5个孩子</li><li>我是第6个孩子</li><li>我是第7个孩子</li><li>我是第8个孩子</li></ul>
</body></html>
隔行变色效果，nth-child(even) even表示偶数
可以把5的倍数的盒子选出来设置margin-right:0;
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>CSS3新增结构伪类选择器-nth-child</title><style>/* 1.把所有的偶数 even的孩子选出来 */ul li:nth-child(even) {background-color: #ccc;}/* 2.把所有的奇数 odd的孩子选出来 */ul li:nth-child(odd) {background-color: gray;}/* 3.nth-child(n) 从0开始 每次加1 往后面计算 这里面必须是n 不能是其他的字母 选择了所有的孩子*//* ol li:nth-child(n) {background-color: pink;} *//* 4.nth-child(2n)母选择了所有的偶数孩子 等价于 even*//* ol li:nth-child(2n) {background-color: pink;}ol li:nth-child(2n+1) {background-color: skyblue;} *//* ol li:nth-child(n+3) {background-color: pink;} */ol li:nth-child(-n+3) {background-color: pink;}</style>
</head><body><ul><li>我是第1个孩子</li><li>我是第2个孩子</li><li>我是第3个孩子</li><li>我是第4个孩子</li><li>我是第5个孩子</li><li>我是第6个孩子</li><li>我是第7个孩子</li><li>我是第8个孩子</li></ul><ol><li>我是第1个孩子</li><li>我是第2个孩子</li><li>我是第3个孩子</li><li>我是第4个孩子</li><li>我是第5个孩子</li><li>我是第6个孩子</li><li>我是第7个孩子</li><li>我是第8个孩子</li></ol>
</body></html>
nth-child和nth-of-type的区别
type是给指定类型的子元素排序号；child是给所有子元素排序号
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>CSS3新增选择器nth-type-of</title><style>ul li:first-of-type {background-color: pink;}ul li:last-of-type {background-color: pink;}ul li:nth-of-type(even) {background-color: skyblue;}/* nth-child 会把所有的盒子都排列序号 *//* 执行的时候首先看 :nth-child(1) 之后回去看 前面 div */section div:nth-child(1) {background-color: red;}/* nth-of-type 会把指定元素的盒子排列序号 *//* 执行的时候首先看 div指定的元素 之后回去看 :nth-of-type(1) 第几个孩子 */section div:nth-of-type(1) {background-color: blue;}</style>
</head><body><ul><li>我是第1个孩子</li><li>我是第2个孩子</li><li>我是第3个孩子</li><li>我是第4个孩子</li><li>我是第5个孩子</li><li>我是第6个孩子</li><li>我是第7个孩子</li><li>我是第8个孩子</li></ul><!-- 区别 --><section><p>光头强</p><div>熊大</div><div>熊二</div></section>
</body></html>
结构伪类选择器小结
伪元素选择器（css替代子盒子直接在父盒子中插入标签）
如盒子里的三角标签
为什么叫“伪元素”？因为元素只在css文件中，在html文件中完全找不到
before和after都是父元素的孩子，但是一个放在盒子前面，一个放在后面，什么意思？（就是字面意思）
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>伪元素选择器before和after</title><style>div {width: 200px;height: 200px;background-color: pink;}/* div::before 权重是2 */div::before {/* 这个content是必须要写的 *//* display: inline-block; */content: '我';/* width: 30px;height: 40px;background-color: purple; */}div::after {content: '小猪佩奇';}</style>
</head>
<body><div>是</div>
</body>
</html>
伪元素选择器使用场景1：字体图标
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>伪元素选择器使用场景-字体图标</title><style>@font-face {font-family: 'icomoon';src: url('fonts/icomoon.eot?1lv3na');src: url('fonts/icomoon.eot?1lv3na#iefix') format('embedded-opentype'),url('fonts/icomoon.ttf?1lv3na') format('truetype'),url('fonts/icomoon.woff?1lv3na') format('woff'),url('fonts/icomoon.svg?1lv3na#icomoon') format('svg');font-weight: normal;font-style: normal;font-display: block;}div {position: relative;width: 200px;height: 35px;border: 1px solid red;}div::after {position: absolute;top: 10px;right: 10px;font-family: 'icomoon';/* content: ''; */content: '\e91e';color: red;font-size: 18px;}</style>
</head><body><div></div>
</body></html>
因为没有下载字体，所以显示不出来
伪元素选择器：仿土豆播放效果
为什么要用伪元素，比如播放按钮，写在html里，如果有十个播放窗口，就要写十个盒子，但是如果是写在css里，只用写一次就好了
中间千万别加空格
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>伪元素选择器使用场景2-仿土豆网显示隐藏遮罩案例</title><style>.tudou {position: relative;width: 444px;height: 320px;background-color: pink;margin: 30px auto;}.tudou img {width: 100%;height: 100%;}.tudou::before {content: '';/* 隐藏遮罩层 */display: none;position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, .4) url(images/arr.png) no-repeat center;}/* 当我们鼠标经过了 土豆这个盒子，就让里面before遮罩层显示出来 */.tudou:hover::before {/* 而是显示元素 */display: block;}</style>
</head><body><div class="tudou"><img src="images/tudou.jpg" alt=""></div><div class="tudou"><img src="images/tudou.jpg" alt=""></div><div class="tudou"><img src="images/tudou.jpg" alt=""></div><div class="tudou"><img src="images/tudou.jpg" alt=""></div>
</body></html>
双伪元素清除浮动原理
css3盒子模型（以设计盒子长宽显示盒子，border边框和padding不会撑大盒子：box-sizing:border-box;）（box-sizing:content-box会撑大盒子）（新style头）
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>CSS3盒子模型</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}div {width: 200px;height: 200px;background-color: pink;border: 20px solid red;padding: 15px;box-sizing: content-box;}p {width: 200px;height: 200px;background-color: pink;border: 20px solid red;padding: 15px;/* css3 盒子模型 盒子最终的大小就是 width 200 的大小 */box-sizing: border-box;}</style>
</head>
<body><div>小猪乔治</div><p>小猪佩奇</p>
</body>
</html>
以后就使用新style头：
<style>* {margin: 0;padding: 0;box-sizing: border-box;}
</style>
让图片变模糊
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>图片模糊处理filter</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}img {/* blur是一个函数 小括号里面数值越大，图片越模糊 注意数值要加px单位 */filter: blur(15px);}img:hover {filter: blur(0);}</style>
</head><body><img src="../蜥蜴女仆.gif" alt="">
</body></html>
calc函数（比如使子盒子宽度永远比父盒子小30px）
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>CSS3属性calc函数</title><style>.father {width: 300px;height: 200px;background-color: pink;}.son {/* width: 150px; *//* width: calc(150px + 30px); */width: calc(100% - 30px);height: 30px;background-color: skyblue;}</style>
</head>
<body><!-- 需求我们的子盒子宽度永远比父盒子小30像素 --><div class="father"><div class="son"></div></div>
</body>
</html>
过渡transition
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>CSS3 过渡效果</title><style>div {width: 200px;height: 100px;background-color: pink;/* transition: 变化的属性 花费时间 运动曲线 何时开始; *//* transition: width .5s ease 0s, height .5s ease 1s; *//* 如果想要写多个属性，利用逗号进行分割 *//* transition: width .5s, height .5s; *//* 如果想要多个属性都变化，属性写all就可以了 *//* transition: height .5s ease 1s; *//* 谁做过渡，给谁加 */transition: all 0.5s;}div:hover {width: 400px;height: 200px;background-color: skyblue;}</style>
</head>
<body><div></div>
</body>
</html>
进度条案例
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>CSS3过渡练习-进度条</title><style>.bar {width: 150px;height: 15px;border: 1px solid red;border-radius: 7px;padding: 1px;}.bar_in {width: 50%;height: 100%;background-color: red;/* 谁做过渡给谁加 */transition: all .7s;}.bar:hover .bar_in {width: 100%;}</style>
</head><body><div class="bar"><div class="bar_in"></div></div>
</body></html>
web前端入门学习 css（8）（新增语义化标签、video/audio、新增input类型、新增表单属性、属性选择器、结构伪类选择器、伪元素选择器、css3盒子模型、模糊、calc函数、过渡相关推荐
- web前端入门学习 css（1）
黑马程序员Web前端入门教程,零基础前端视频教程pink老师_html5+css3 文章目录 html局限性 css简介(层叠样式表.级联样式表.css样式表) css语法规范 css代码样式风格(推 ...
- 【css教程】web前端入门学习 css（1）
黑马程序员Web前端入门教程,零基础前端视频教程pink老师_html5+css3 文章目录 html局限性 css简介(层叠样式表.级联样式表.css样式表) css语法规范 css代码样式风格(推 ...
- web前端入门学习 css（10）移动端布局（学到DPG格式图片与webp格式图片停了）
https://www.bilibili.com/video/BV14J4114768?p=390 代码:https://gitee.com/xiaoqiang001/html_css_materia ...
- web前端入门学习 css（7）css高级技巧 （精灵图、字体图标、css三角、鼠标样式、表单轮廓线、文本框拖拽、垂直对齐、图底空白缝隙、margin负值、溢出文字省略号、文字环绕、css初始化）
文章目录 精灵图 为什么需要精灵图? 精灵图的使用 精灵图课堂案例 用精灵图拼出自己的名字 字体图标 字体图标的下载 字体图标的引入 字体图标的追加 css三角(用边框border制作) 案例:京东三 ...
- web前端入门学习 css（2）
https://www.bilibili.com/video/BV1pE411q7FU?p=85&spm_id_from=pageDriver 文章目录 css引入方式总结 综合案例:新闻页面 ...
- web前端入门学习 css（4）（盒子模型）
文章目录 盒子模型(box model) 盒子模型的组成 边框 border 边框的简写,边框的分开写法(分别写上下左右边框) 利用边框的层叠性简化书写代码(小技巧) 给表格table和单元格td和表 ...
- web前端入门学习 css（3）（背景相关）
文章目录 css背景颜色(backgroud-color.transparent) css背景图片 background-image 背景平铺 background-repeat 背景图片位置 bac ...
- web前端入门学习 css（5）（浮动）（ps切图）（css属性书写顺序）（学成在线网站案例）
文章目录 传统网页布局的三种方式 标准流(普通流.文档流) 浮动(为什么需要浮动?) 浮动特性 浮动元素会脱离标准流,可以与普通流的元素相重叠 如果多个盒子都设置了浮动,则它们会按照属性值一行内显示并 ...
- web前端入门学习 css（9）广义的html5 品优购项目（html+css基础完结，js开始，移动端布局开始）
文章目录 广义的html5 品优购项目导读 网站制作流程 原型图 项目规划 项目整体介绍 项目规划 项目搭建 网站favicon图标 网站TDK三大标签SEO优化 品优购首页制作 常用模块类名命名 快 ...
最新文章
- Python之几种常用模块
- 实现对数组找最大最小数
- joomla 3.6 mysql 版本_Joomla是否支持MariaDB数据库？
- 撸了一个疫苗接种行程管理系统，爽！
- android 使用android.support.v7 添加ActionBar
- 如何选择企业数据加密软件？
- 小米无线网卡linux驱动下载,Linux 下小米WIFI 的无线网卡驱动
- Android自定义View：带你了解神秘的MeasureSpec类
- 写在前面（ShenYu）
- Hulu热招|广告智能团队
- Photon与Unity核心技术之角色更换武器
- IDEA 在debug 模式下启动tomcat报错：Application Server was not ..reason:Unable to ping server at localhos:1199
- G. Columns Swaps(并查集)
- 基于AM5728 DSP JTAG连接调试方法
- 创作者基金 11 月亮点
- dw自动滚动图片_DW图片无缝滚动代码
- 2021年焊工（初级）免费试题及焊工（初级）实操考试视频
- 单相交流调压电路matlab仿真,单相斩控式交流调压电路
- Google应用商店如何发布app
- hiredis从安装到实操，带 API 详解