摘要: 使用Sass优雅并高效的实现CSS中的垂直水平居中 移动端总结 布局神器:display:flex css3中提出了一种新的布局模式:弹性盒子(flex box)。 它是一种当页面需要适应不同的屏幕大小和设备类型时确保元素拥有恰当的行为的布局方式。 目的是更好的对一个容器中的子元素进行排列,对齐,和 阅读全文
posted @ 2021-08-14 23:05 蹦极的考拉 阅读(144) 评论(0) 推荐(0)
摘要: 使用@keyframes规则,可以创建动画。 在动画的过程中,可以多次更改css样式的设定。 对于指定的变化:发生时用0%,或关键字“from”和“to”,这与0%和100%相同。 0%:开头动画。 100%:动画完成。 语法:@keyframes animationname { keyframes 阅读全文
posted @ 2021-08-14 23:02 蹦极的考拉 阅读(95) 评论(0) 推荐(0)
摘要: 一、nth-child() 1. nth-child(n):父元素下的第n个子元素,n>0,索引从1开始。不区分子元素类型。 2. nth-child(odd):父元素下的奇数子元素,等同于:nth-child(2n-1)。区分子元素类型。 3. ntn-child(even):父元素下的偶数子元素 阅读全文
posted @ 2021-08-14 22:55 蹦极的考拉 阅读(503) 评论(0) 推荐(0)
摘要: 无论如何改动border,margin与padding的值,都不会导致box总尺寸发生变化。 建议学习和设置此属性: *{box-sizing:border-box} 不改变box-sizing的话,边框计算结果如下 width(宽度) + padding(内边距) + border(边框) = 元 阅读全文
posted @ 2021-08-14 22:36 蹦极的考拉 阅读(262) 评论(0) 推荐(0)
摘要: 最近的一个项目中要使文字垂直排列,也就是运用了CSS的writing-mode属性。 writing-mode最初时ie中支持的一个属性,后来在CSS3中增添了这一新的属性,所以在ie中和其他浏览器中的语法会有区别。 1.0 CSS3标准 writing-mode:horizontal-tb;//默 阅读全文
posted @ 2021-08-14 22:25 蹦极的考拉 阅读(87) 评论(0) 推荐(0)
摘要: 在css样式文件中增加如下代码:(建议放在文件最上方) ::selection { background: hsla(5, 92%, 76%, 0.8); color: #fff; } 阅读全文
posted @ 2021-08-14 22:21 蹦极的考拉 阅读(113) 评论(0) 推荐(0)
摘要: 详解使用CSS3的@media来编写响应式的页面 阅读全文
posted @ 2021-08-14 22:15 蹦极的考拉 阅读(30) 评论(0) 推荐(0)
摘要: 一般网站如果制作按钮,多做一些互动,可以让客户获得更好的体验。 例如鼠标滑过按钮,让背景颜色从左往右滑出来(或者从右往左都可以): <a target="_blank" href="#" class="butn white"><span>观众预登记</span></a> 默认状态的css: .but 阅读全文
posted @ 2021-08-14 21:53 蹦极的考拉 阅读(82) 评论(0) 推荐(0)