HTML5+CSS3学习笔记2

小华仔仔

已于 2022-02-17 13:28:13 修改

阅读量205

点赞数

文章标签： html5 css3

于 2022-02-16 11:10:54 首次发布

本文链接：https://blog.csdn.net/xiaohua307/article/details/122959102

版权

本文介绍了HTML5和CSS3的一些关键特性，包括选择器的用法，如:first-child, :last-child等；变换(transform)如translate、scale、rotate和skew；过渡效果(transitions)和动画(animations)的设置；以及多列布局和媒体查询的使用。这些内容对于创建现代网页设计至关重要。" 122989724,8329309,使用Personal access tokens解决Git密码认证问题,"['git', '版本控制', '安全', '认证']

摘要由CSDN通过智能技术生成

选择器

1.ul li:first-child{}第一个孩子
2.ul li:last-child{}最后一个孩子
3.ul li:nth-child(1){}第几个孩子
odd奇数 even偶数
4.ul li:only-child{}只有一个孩子
5.h1:first-of-type{}第一个兄弟
6.h1:last-of-type{}最后一个兄弟
7.h1:nth-of-type(1){}第几个兄弟
8.h1:only-of-type{}只有一个兄弟
9.div:not(".text"){}刨除某一种元素
10.div:empty{}选中空标签

变换transform //变形工具箱

1.translate(x,y,z)平移默认值是给x轴
   单位：像素或百分比
   translateX()水平移动 translateY()垂直移动 translateZ()前后移动
2.scale(x,y,z)缩放默认值是给所有轴
   单位：数字，可以为小数，不可以为负数
   scaleX()宽度 scaleY()高度 scaleZ()厚度
3.rotate(x,y,z)旋转默认值给z轴
   单位：度数deg
   rotateX()水平旋转 rotateY()垂直旋转 rotateZ()中心轴
4.skew(x,y)扭曲默认值是给x轴
   单位：度数deg
   skewX()水平扭曲 skewY()垂直扭曲
transform-style:preserve-3d开启3D效果
perspective立体视觉单位：像素