![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS3
IT学霸
这个作者很懒,什么都没留下…
展开
-
使用Swiper自定义轮播图
一、背景最近研究了得到页面的轮播图的实现。使用的控件是Swiper,分页器使用的是自定义的样式,导航按钮使用自定义的图标来实现。然后把分页器和导航按钮放在自定义的指定位置。它的页面效果如下:二、主要代码<div class="pagination-wrapper-center"> /*添加自定义的class来自定义样式及位置*/ <div class="swiper-pagination swiper-p原创 2020-06-07 20:23:19 · 894 阅读 · 0 评论 -
flex布局对行内子元素的影响
一、正常使用正常情况下,行内元素设置宽高是没有效果的,行内元素会根据其内容大小自动布局。请看以下代码和效果 .app { width: 100%; height: 0; background-color: #3CC51F; padding-bottom: 40%; position: relative; } .icon {原创 2020-06-07 20:03:39 · 4227 阅读 · 2 评论 -
height等于0的div的妙用
一、设置具有特定比例的高宽比的容器对于主页的轮播图容器,当宽度设置为100%后,想让高度为宽度的指定比例的值。这时候height就可以用上了。 .app { width: 100%; height: 0; background-color: #3CC51F; padding-bottom: 40%; position: relative; }以上代码就把宽度原创 2020-06-07 19:53:59 · 2166 阅读 · 0 评论 -
顶部导航栏fixed布局右侧不出现滚动条
一、正常情况顶部导航栏使用fixed布局后,如果页面内容超出了屏幕高度,右侧是会出现滚动条的。效果如下:蓝色区域是顶部的导航栏区域,可以看到右侧出现了滚动条。二、CSS代码设置后如何让滚动条只出现在导航栏下面的内容区域了?原理就是使页面body元素和html根元素的高度固定为屏幕的高度。整个页面内容就不会让浏览器自动显示整个页面的滚动条,而在页面内部,只会让需要滚动的页面元素出现滚动条。这种情况下,顶部导航栏只要宽度设置为100%,计算出来的宽度就是不包含滚动条的宽度值(假如屏幕宽度原创 2020-06-07 18:04:41 · 1699 阅读 · 0 评论 -
CSS3新特性列表(转载)
CSS3的新特性带来了很多的便利,进而提升工作效率。抱着查漏补缺的想法,逐步掌握完这些新特性。感谢这位奉献者的总结https://segmentfault.com/a/1190000010780991原创 2020-06-05 23:37:52 · 139 阅读 · 0 评论 -
-webkit-box实现多行文字溢出显示
最近看得到的web端首页时,发现一个有一段文字描述超过指定行数后显示省略号。效果如下:查看它的源码,关键代码如下(每一段的最后5行):.news-list .single-news .news-intro .news-title { font-size: .293333rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -.原创 2020-06-05 23:33:06 · 531 阅读 · 0 评论