h5c3提高

最新推荐文章于 2024-05-23 16:03:07 发布

Hioow

最新推荐文章于 2024-05-23 16:03:07 发布

阅读量79

点赞数

分类专栏：个人前端笔记文章标签： css3 html5

本文链接：https://blog.csdn.net/weixin_46623496/article/details/119254035

版权

个人前端笔记专栏收录该内容

18 篇文章 0 订阅

订阅专栏

1.HTML5新增语义化标签

< header>：头部标签
< nav>：导航标签
< article>：内容标签
< section>：定义文档某个区域
< aside>：侧边栏标签
< footer>：尾部标签

在这里插入图片描述

2.视频< video>

在这里插入图片描述

	<video src="文件地址" controls="controls"></video>

在这里插入图片描述

3.音频标签< audio>

在这里插入图片描述

4.HTML新增的 input 类型

在这里插入图片描述

重点记住：number tel search

HTML新增表单属性
在这里插入图片描述

5.CSS3新增属性选择器

属性选择器可以根据元素特定属性来选择元素

在这里插入图片描述

	input[value] {
		color : pink;
}
	input[type=text] {
		color : pink;
}	
	div[class^=icon]{
		color : red;
}
 	div[class$=data] {
		color : blue;
}

6.结构伪类选择器

在这里插入图片描述

nth-child(n)选择某个父元素的一个或多个特定的子元素

n可以是数字，关键字和公式
n 可以是关键字： even偶数， add奇数
n 可以是公式：如果n是公式，则从0开始计算，但是第0个元素或者超出了元素的个数会被忽略

在这里插入图片描述

7.伪元素选择器

伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签

选择符	简介
::before	在元素内部的前面插入内容
::after	在元素内部的后面插入内容

befor 和 after创建一个元素，但是是属于行内元素
新创建的这个元素在文档树中是找不到的，所以称为伪元素
语法： element::before{ }
before 和 after 必须有 content 属性
伪元素选择器和标签选择器一样，权重为1

<style>
      div {
        width: 200px;
        height: 200px;
        background-color: pink;
      }
      div::before {
        content: "我";
      }
      div::after {
        content: "Zedking";
      }
    </style>

  <body>
    <div>是</div>
  </body>

8.伪元素清除浮动

.clearfix:after{ 				//生成一个新的盒子放在浮动元素后面
	content:"";					//伪元素必须的属性
	display:block;				//插入的元素必须是块级
	height:0;
	clear:both;					//核心代码清除浮动
	visibility:hidden;			//不要看见这个元素
}

9.CSS3盒子模型

CSS中可以通过box-sizing来指定盒模型，有2个值：即可指定为content-box 、 border-box，这样我们计算盒子大小的方式就发生了改变

box-sizing：content-box 盒子大小为 width + padding + border (以前默认的)
box-sizing：border-box 盒子大小为width

如果盒子模型我们改为了box-sizing：border-box ，那 padding 和 border 就不会撑大盒子了

10.CSS过渡

transition：要过渡的属性 花费时间 运动曲线 何时开始； 
transition: width 0.5s, height 0.5s;

10.CSS过渡

transition：要过渡的属性 花费时间 运动曲线 何时开始； 
transition: width 0.5s, height 0.5s;

Hioow

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
h5c3提高

1.HTML5新增语义化标签< header>：头部标签< nav>：导航标签< article>：内容标签< section>：定义文档某个区域< aside>：侧边栏标签< footer>：尾部标签2.视频< video> <video src="文件地址" controls="controls"></video>3.音频标签< audi
复制链接

扫一扫