![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
文章平均质量分 55
猪猪爱芮芮
这个作者很懒,什么都没留下…
展开
-
【前端学习笔记】仅用CSS实现图片轮播效果
效果图实现原理swiper-container为窗口swiper-wrapper用于存放所有图片swiper-slide用于存放每张图片通过将图片向左移动实现轮播效果实现代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">原创 2022-02-25 20:23:40 · 936 阅读 · 0 评论 -
【前端学习笔记】100%px和100vw的区别
区别在于是否包含滚动条<!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"> <原创 2022-02-25 09:38:54 · 1109 阅读 · 0 评论 -
【前端学习笔记】构建页面三栏布局的三种方法
三栏布局效果图方法一左右两侧浮动 中间加外边距<!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原创 2022-02-23 19:45:30 · 262 阅读 · 0 评论 -
【前端学习笔记】简单隐藏二级菜单案例
案例效果图<!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"> <tit原创 2022-02-11 18:29:15 · 270 阅读 · 0 评论 -
【前端学习笔记】盒子模型外边距特性
特性问题:1.兄弟关系,两个盒子垂直外边距与水平外边距问题 -垂直方向,外边距取最大值 -水平方向,外边距会进行合并处理2.父子关系,给子加外边距,但作用于父身上,怎么解决。 -1.使用父的padding,注意高度需重新计算 -2.给父盒子设置边框后再设置子盒子的外边距即可生效 -3.给子盒子或父盒子加浮动 -4.给父盒子加overflow:hidden...原创 2022-02-11 16:10:14 · 295 阅读 · 0 评论 -
【前端学习笔记】清除浮动的四种方式
要实现如图布局给黄蓝两个盒子设置浮动后导致高度塌陷,如下图。源代码<body> <div class="container"> <div class="box1"></div> <div class="box2"></div> </div> <div class="box"></div></body>.box1,.bo原创 2022-02-09 17:51:32 · 577 阅读 · 0 评论 -
【前端学习笔记】文字超出后显示省略号
display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;如图原创 2022-02-09 10:30:09 · 364 阅读 · 0 评论