HTML与CSS进阶

最新推荐文章于 2024-06-24 11:40:44 发布
最新推荐文章于 2024-06-24 11:40:44 发布
阅读量722 收藏 8
点赞数 23
分类专栏： 资料作者\/ 【vip1024c】 文章标签： html css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_85123671/article/details/139624593
版权 
*   n 可以是数字、关键字、公式

*   n 如果是数字，就是选中第几个

*   常见的关键字有 `even` 偶数、`odd` 奇数

*   常见的公式如下(如果 n 是公式，则从 0 开始计算)

*   但是第 0 个元素或者超出了元素的个数会被忽略

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-khFnhYZa-1614129598269)(Untitled.assets/640)]

  • nth-child与nth-of-type区别

    • nth-child 选择父元素里面的第几个子元素，不管是第几个类型

  • nth-of-type 选择指定类型的元素

「3. 伪元素选择器」

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-w9rqcsAh-1614129598270)(Untitled.assets/640)]

  • 伪元素选择器注意事项

    • before 和 after 必须有 content 属性

  • before 在内容前面，after 在内容后面

  • before 和 after 创建的是一个元素，但是属于行内元素

  • 创建出来的元素在 Dom 中查找不到，所以称为伪元素

  • 伪元素和标签选择器一样，权重为 1

伪元素字体图标

p {

position: relative;

width: 220px;

height: 22px;

border: 1px solid lightseagreen;

margin: 60px;

}

p::after {

content: ‘\ea50’;

font-family: ‘icomoon’;

position: absolute;

top: -1px;

right: 10px;

}

「4. 2D 转换之translate」

  • 2D转换

    • 2D转换是改变标签在二维平面上的位置和形状

  • 移动：translate

  • 旋转：rotate

  • 缩放：scale

  • translate语法

    • x就是X轴上水平移动

  • y就是y轴上水平移动

transform: translate(x, y)

transform: translateX(n)

transfrom: translateY(n)

  • 重点知识点

    • 2D的移动主要是指水平、垂直方向上的移动

  • translate最大的优点就是不影响其他元素的位置

  • translate中的100%单位，是相对于本身的宽度和高度来进行计算的

  • 行内标签没有效果

div {

background-color: lightseagreen;

width: 200px;

height: 100px;

/* 平移 */

/* 水平垂直移动 100px */

/* transform: translate(100px, 100px); */

/* 水平移动 100px */

/* transform: translate(100px, 0) */

/* 垂直移动 100px */

/* transform: translate(0, 100px) */

/* 水平移动 100px */

/* transform: translateX(100px); */

/* 垂直移动 100px */

transform: translateY(100px);

/百分比用法/

transform: translateY(100%);

}

让一个盒子水平垂直居中

div {

position: relative;

width: 500px;

height: 500px;

background-color: pink;

/* 1. 我们tranlate里面的参数是可以用 % */

/* 2. 如果里面的参数是 % 移动的距离是 盒子自身的宽度或者高度来对比的 */

/* 这里的 50% 就是 50px 因为盒子的宽度是 100px */

/* transform: translateX(50%); */

}

p {

position: absolute;

top: 50%;

left: 50%;

width: 200px;

height: 200px;

background-color: purple;

/1.* margin-top: -100px;

margin-left: -100px; */

/2.* translate(-50%, -50%)

盒子往上走自己高度的一半 */

transform: translate(-50%, -50%);

}

span {

/* translate 对于行内元素是无效的 */

transform: translate(300px, 300px);

}

「5. 2D 转换之rotate」

  • rotate 旋转

    • 2D旋转指的是让元素在二维平面内顺时针或者逆时针旋转

/* 单位是：deg */

img:hover {

transform: rotate(360deg)

}

  • rotate语法

    • rotate 里面跟度数，单位是 deg

  • 角度为正时，顺时针，角度为负时，逆时针

  • 默认旋转的中心点是元素的中心点

  • 设置元素旋转的中心的(transform-origin)

transform-origin: x y;

  • 注意

    • 后面的参数 x 和 y 用空格隔开

  • x y 默认旋转的中心点是元素的中心(50% 50%),等价于center center

  • 还可以给x y 设置像素或者方位名词(top、bottom、left、right、center)

「6. 2D 转换之scale」

  • scale的作用：用来控制元素的放大与缩小

transform: scale(x, y)

  • 知识要点：

    • 注意，x与y之间用逗号进行分隔

  • transform: scale(1, 1): 宽高都放大一倍，相当于没有放大

  • transform: scale(2, 2): 宽和高都放大了二倍

  • transform: scale(2): 如果只写了一个参数，第二个参数就和第一个参数一致

  • transform:scale(0.5, 0.5): 缩小

  • scale 最大的优势：可以设置转换中心点缩放，默认以中心点缩放，而且不影响其他盒子

div:hover {

/* 注意，数字是倍数的含义，所以不需要加单位 */

/* transform: scale(2, 2) */

/* 实现等比缩放，同时修改宽与高 */

/* transform: scale(2) */

/* 小于 1 就等于缩放*/

transform: scale(0.5, 0.5)

}

「7. 2D 转换综合写法以及顺序问题」

知识要点

  • 同时使用多个转换，其格式为 transform: translate() rotate() scale()

  • 顺序会影响到转换的效果(先旋转会改变坐标轴方向)

  • 当我们同时有位置或者其他属性的时候，要将位移放到最前面

div:hover {

transform: translate(200px, 0) rotate(360deg) scale(1.2)

}

动画(animation)

**「动画」**是CSS3中最具颠覆性的特征之一，可通过设置多个节点来精确的控制一个或者一组动画，从而实现复杂的动画效果。

「动画的使用」

  1. 先定义动画

  2. 再调用定义好的动画

/1. 定义动画/

@keyframes 动画名称 {

0% {

width: 100px;

}

100% {

width: 200px

}

}

div {

/* 调用动画 */

animation-name: 动画名称;

/* 持续时间 */

animation-duration: 持续时间；

}

「动画序列」

  • 0% 是动画的开始，100 % 是动画的完成，这样的规则就是动画序列

  • 在 @keyframs中规定某项 CSS 样式，就由创建当前样式逐渐改为新样式的动画效果

  • 动画是使元素从一个样式逐渐变化为另一个样式的效果，可以改变任意多的样式任意多的次数

  • 用百分比来规定变化发生的时间，或用 from 和 to，等同于 0% 和 100%

「动画常见属性」

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VAuYMH6M-1614129598271)(Untitled.assets/640)]

div {

width: 100px;

height: 100px;

background-color: aquamarine;

/* 动画名称 */

animation-name: move;

/* 动画花费时长 */

animation-duration: 2s;

/* 动画速度曲线 */

animation-timing-function: ease-in-out;

/* 动画等待多长时间执行 */

animation-delay: 2s;

/* 规定动画播放次数 infinite: 无限循环 */

animation-iteration-count: infinite;

/* 是否逆行播放 */

animation-direction: alternate;

/* 动画结束之后的状态 */

animation-fill-mode: forwards;

}

div:hover {

/* 规定动画是否暂停或者播放 */

animation-play-state: paused;

}

「动画简写方式」

/* animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 起始与结束状态 */

animation: name duration timing-function delay iteration-count direction fill-mode

知识要点

  • 简写属性里面不包含 animation-paly-state

  • 暂停动画 animation-paly-state: paused; 经常和鼠标经过等其他配合使用

  • 要想动画走回来，而不是直接调回来：animation-direction: alternate

  • 盒子动画结束后，停在结束位置：animation-fill-mode: forwards

animation: move 2s linear 1s infinite alternate forwards;

「速度曲线细节」

animation-timing-function: 规定动画的速度曲线，默认是ease

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-U86plZv9-1614129598272)(Untitled.assets/640)]

/打字机效果/

div {

width: 0px;

height: 50px;

line-height: 50px;

white-space: nowrap;

overflow: hidden;

background-color: aquamarine;

animation: move 4s steps(24) forwards;

}

@keyframes move {

0% {

width: 0px;

}

100% {

width: 480px;

}

}

CSS 过渡transition

通过过渡transition，可以让web前端开发人员不需要javascript就可以实现简单的动画交互效果。

深入理解CSS过渡transition

https://www.cnblogs.com/xiaohuochai/p/5347930.html

「定义」过渡transition是一个复合属性，包括transition-property、transition-duration、transition-timing-function、transition-delay这四个子属性。通过这四个子属性的配合来完成一个完整的过渡效果。

transition-property: 过渡属性(默认值为all)

transition-duration: 过渡持续时间(默认值为0s)

transiton-timing-function: 过渡函数(默认值为ease函数)

transition-delay: 过渡延迟时间(默认值为0s)

.test{

height: 100px;

width: 100px;

background-color: pink;

transition-duration: 3s;

/* 以下三值为默认值，稍后会详细介绍 */

transition-property: all;

transition-timing-function: ease;

transition-delay: 0s;

}

.test:hover{

width: 500px;

}


<div class="test"></div>







![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qMf9QKF2-1614129598273)(Untitled.assets/640)]](https://img-blog.csdnimg.cn/img_convert/b2de8a86768d5775a8c0b09db721ae1d.gif#pic_center)



**「复合属性」** 过渡transition的这四个子属性只有是必需且不能为0。其中，和都是时间。当两个时间同时出现时，第一个是，第二个是；当只有一个时间时，它是，而为默认值0s



*   **注意:**



*   *   transition的这四个子属性之间不能用逗号隔开，只能用空格隔开。因为逗号隔开的代表不同的属性(transition属性支持多值，多值部分稍后介绍)；而空格隔开的代表不同属性的四个关于过渡的子属性。





.test{

height: 100px;

width: 100px;

background-color: pink;

/*代表持续时间为2s，延迟时间为默认值0s*/

transition；2s;

}    

.test:hover{

width: 500px;

}

<div class="test"></div>







`延迟时间delay 案例`





.test{

height: 100px;

width: 100px;

background-color: pink;

/*代表持续时间为1s，延迟时间为2s*/

transition: 1s 2s;

}    

.test:hover{

width: 500px;

}

<div class="test"></div>







![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-C5PFyFPk-1614129598275)(Untitled.assets/640)]](https://img-blog.csdnimg.cn/img_convert/2e32a51751eb569807377048ae744b83.gif#pic_center)



**「过渡属性」**



*   值: none | all | \[,\]

*   初始值: all

*   应用于: 所有元素

*   继承性: 无





none: 没有指定任何样式

all: 默认值，表示指定元素所有支持transition-property属性的样式

<transition-property>: 可过渡的样式，可用逗号分开写多个样式







![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tkXIlJgQ-1614129598276)(Untitled.assets/640)]](https://img-blog.csdnimg.cn/img_convert/3653de48f5f44794aa2b67ad292003d1.gif#pic_center)



**「过渡持续时间」**



*   值: \[,\]\*

*   初始值: 0s

*   应用于: 所有元素

*   继承性: 无

*   \[注意\]该属性不能为负值

*   \[注意\]若该属性为0s则为默认值，若为0则为无效值。所以必须**带单位**

*   \[注意\]该值为单值时，即所有过渡属性都对应同样时间；该值为多值时，过渡属性按照顺序对应持续时间





/*DEMO中的过渡属性值*/

transition-property: width,background;







![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VkNW9hpm-1614129598276)(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==)]](https://img-blog.csdnimg.cn/img_convert/faeb22e2cb1d67db83a9b440899c02c9.gif#pic_center)  

**「过渡时间函数」**



**过渡时间函数**用于定义元素过渡属性随时间变化的过渡速度变化效果



*   值: \[,\]\*

*   初始值: **ease**

*   应用于: 所有元素

*   继承性: 无



**「取值」** 过渡时间函数共三种取值，分别是**关键字**、**steps函数**和**bezier函数**



**「关键字」** 其实是bezier函数或steps函数的特殊值





ease: 开始和结束慢，中间快。

linear: 匀速。

ease-in: 开始慢。

ease-out: 结束慢。

ease-in-out: 和ease类似，但比ease幅度大。







* * *



[]( )3D转换

-----------------------------------------------------------------------



### []( )认识3D转换



**「3D的特点」** 近大远小，物体和面遮挡不可见



**「三维坐标系」**



*   x 轴：水平向右 – `注意：x 轴右边是正值，左边是负值`

*   y 轴：垂直向下 – `注意：y 轴下面是正值，上面是负值`
**读者福利**

========

> **由于篇幅过长，就不展示所有面试题了，想要完整面试题目的朋友（另有小编自己整理的2024大厂高频面试题及答案附赠）**
> ![](https://img-blog.csdnimg.cn/20201126205036657.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM3OTAzNDY4,size_16,color_FFFFFF,t_70)
> ![](https://img-blog.csdnimg.cn/20201126205047777.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM3OTAzNDY4,size_16,color_FFFFFF,t_70)
> ![](https://img-blog.csdnimg.cn/20201126205051391.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM3OTAzNDY4,size_16,color_FFFFFF,t_70)
2401_85123671
关注
  • 23
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html+css进阶.md
05-02
html+css进阶.md11
CSS进阶
02-13
CSS进阶
html与css进阶,前端开发注意事项(HTML与CSS进阶)
weixin_42509548的博客
06-19 81
HTML 与 CSS 进阶Img 标签alt 属性 一定要添加 用于图片描述 给机器看的，如果图片加载失败，会显示 alt为 img 添加 图片注释 建议做法为 figure(图形) 和 figcaption [caption(字幕)] 图片说明表格语义化 数据形式的最佳选择还是表格(h5新增 th, caption, thead, tbody 和 tfoot 根据需求选择使用者三个...
html与css进阶
GC
06-29 6219
一、相对地址和绝对地址： 相对地址：“./” 表示当前文件所在目录 “…/” 表示当前文件所在目录的上一级目录 绝对地址：做为了解，一般不用 二、列表标签相关： 新闻标题列表、文章标题列表、菜单要使用列表标签 列表创建的快捷键：ul>(li>a{列表文字})*8 多行操作：点击一行，然后按住alt键不放，再点击其他行，就可以选中多行 列表标签样式：list-style:none 去...
HTML与CSS进阶(1)
2401_84150168的博客
05-12 588
动画再。
HTML和CSS进阶
ZbyFt
07-07 518
HTML和CSS进阶1.内外边距padding(内边距):  用于控制内容与边框之间的距离例如，padding:10px，20px;  顺时针，可以这样理解，鼠标到包装盒的距离border(边框):   围绕在内边距和内容外的边框例如，border-top:10px solid red;  包装盒的厚度margin(外边距)：用于控制元素与元素之间的距离, margin的最基本用途就是控制元素周围...
html和css进阶
weixin_42156283的博客
10-13 202
html和css进阶
《Web前端开发精品课 HTML与CSS进阶教程》——第一部分　HTML进阶第01章　HTML基础知识1.1　HTML和CSS进阶简介...
weixin_34388207的博客
05-02 513
本节书摘来自异步社区《Web前端开发精品课 HTML与CSS进阶教程》一书中的第1章，第1.1节，作者： 莫振杰 更多章节内容可以访问云栖社区“异步社区”公众号查看。 第一部分　HTML进阶 第01章　HTML基础知识 1.1　HTML和CSS进阶简介 1.1.1　你真的精通HTML和CSS吗我们都知道，前端技术最核心的三大技术是HTML、CSS和Jav...
【CSS进阶】
zilin_taku的博客
07-06 286
作用：根据HTML标签的嵌套关系，选择父元素后代中满足条件的元素 选择器语法： 结果：在选择器1所找到标签的后代（儿子、孙子、重孙子…）中，找到满足选择器2的标签，设置样式 代码： 作用：根据HTML标签的嵌套关系，选择父元素子代中满足条件的元素 选择器语法： 结果：在选择器1所找到标签的子代（儿子）中，找到满足选择器2的标签，设置样式作用：同时选择多组标签，设置同样的样式 选择器语法： 结果：找到选择器1和选择器2选中的标签，设置样式作用：选中页面同时满足多个选择器的标签 选择器语法： 结果：找到页面中既
《Web前端开发精品课 HTML与CSS进阶教程》---笔记
IOSSHAN的博客
06-21 135
学习HTML的重点不在于掌握了多少标签，而是在于掌握标签的语义，在你需要的地方能否用到正确的语义标签。在实际开发中，上图下文字的样式，一般使用figure和figcaption两个元素来增强图片的语义化。 figure元素 用于包含 图片和图注文字 figcaption元素 用于表示图注文字label标签，用于显示在输入控件旁边的说明性文字。也就是将某个表单元素和某段说明文字关联起来标签，仅用于段落中的换行，也就是只适用于p标签内部换行在实际开发中，大多数情况下都是使用无序列表，极少情况下会使用有序列表一张
css进阶
weixin_52504437的博客
12-27 132
控制文字的属性可以继承，继承出意外的是a标签不能继承，h系列标签的font-size会继承失效。块级标签作为大容器，可以嵌套文本、块级元素、行内元素、行内块级元素等等。a标签的color会继承失效，h系列标签的font-size会继承失效。background-image:url(‘图片的路径’)a标签内部可以嵌套如何元素，但是不能嵌套自己a标签。取值的时候是正数，负数的话向左和向上运动。：一行显示多个，宽高默认，不可以设置宽高。：一行显示多个，可以设置宽高。后边的层叠前边的，优先级相同。
3d旋转相册—css3高级进阶
04-13
1.适合人群：有一定的编程经验。 2.需要有HTML基础知识以及CSS初中级知识，想要进阶CSS3高级的小伙伴，那么这个案例将对你有所帮助，涉及的动画知识点有扭曲、平移、旋转等。
html+css文档.zip
12-21
6张图片带你了解HTML全面，里面包括css.chm帮助文档。
前端代码学习（HTML+CSS+JS进阶学习全资料）
12-25
这份前端学习资料包含了深入学习HTML、CSS和JavaScript的所有必要资源。其中，HTML模块涵盖了HTML基础语法、HTML5的新增功能以及表单设计和验证。CSS模块涵盖了CSS选择器和属性、各种布局技术，包括Flexbox和Grid，...
HTML(17)——圆角和盒子阴影
m0_74386799的博客
06-21 514
作用：设置元素的外边框为圆角属性名：border-radius属性值：数字+px/百分比也可以每个角设置不同的效果，从左上角顺时针开始赋值，没有取值的角与对角取值相同。
HTML静态网页成品作业(HTML+CSS)——中华传统美德介绍网页(2个页面)
weixin_42283461的博客
06-17 568
HTML静态网页成品作业(HTML+CSS)——中华传统美德介绍网页(2个页面)
HTML(9)——字体修饰
m0_74386799的博客
06-19 747
如果一组当中两个数是一样的，可以简写为一位数：例如#00ffcc简写为#0fc。font-family属性值可以书写多个字体名用逗号隔开，依次从左到右查找。单行文字想要垂直居中时，可以设置行高属性值与盒子高度属性值一致。想让图片居中，可以给图片加一个父级标签例如<div>设置居中。属性的简写方式，一个属性对应多个值的写法，各个属性值之间用。测量方法：从一行文字的最顶端到下一行文字的最顶端。属性名：text-decoration。属性名：text-indent。属性名：text-align。
HTML(23)——垂直对齐方式
最新发布
m0_74386799的博客
06-24 222
可以看到图片的下方还有空白。接下来在img内添加vertical-align: middle;发现图片下方空白消失，并且文字也移动到了中间。默认情况下浏览器对行内块，行内标签都按。导致图片看起来会偏上，文字偏下。
Css进阶练习(实现抽屉网样式布局)
05-26
抽屉网是一种常见的网页布局，可以用 CSS 实现。下面是一个简单的实现方法： HTML 结构： ```html <!-- 网页主体内容 --> <!-- 抽屉内容 --> ``` CSS 样式： ```css .container { display: flex; ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值