html&&css
关注
分享
扫一扫
边学习边分享
旺仔萝卜
这个作者很懒，什么都没留下…
展开
-
用scss写一个数组及遍历
// 定义数组，数组元素用逗号隔开$liColor:#f5ad1b,#5f89ce,#94bf45,#da8ec5,#78bfc2,#bec278; // 开始 @each 循环遍历数组// $c 作为循环变量，代表了数组的元素，不是索引~！！！@each $c in $liColor{ $i:index($liColor,$c); // 获取 $c 在数组中的索引，并赋值给 $i 赋值用冒号，不是等号~！ li:nth-child( #{$i} ){原创 2020-07-23 23:45:45 · 1984 阅读 · 0 评论 -
使用css3的column属性，内容被截断的解决方法
使用css3的column属性，内容被截断的解决方法用column样式做瀑布流的效果，遇到了同一列的内容被截断到其他列的问题，如下效果：在CSS3规范里，各列的高度是均衡的。浏览器会自动调整每列会填充多少文本，然后让整个布局的高度保持均衡一致。而我们在做这种瀑布流的类似布局的时候，往往只需要设置每个容器的宽度，然后高度通过内容填充来自适应。所以，浏览器在处理的时候，为了保持高度的均衡分配，会将我们的布局截断，然后造成布局错乱。解决方法是在子项目加上样式：注意是子容器不是父容器哦！ heig原创 2020-07-15 21:54:40 · 1713 阅读 · 5 评论 -
CSS盒子模型和怪异盒子模型
盒子模型与怪异模型展示效果差异：标准盒子(W3c标准)：大小 = width(content) + border + padding + margin怪异盒子(IE标准)：大小 = width(content + padding + border) + margin布局采用哪种盒子模型，通过属性box-sizing可以设置：content-box： 默认值，border和padding不算到width范围内，可以理解为是W3c的标准模型(default)border-box：borde原创 2020-07-14 00:10:10 · 437 阅读 · 0 评论 -
2020使用animate.css和wow.js最新教程
animate.css可以使用动画，wow.js可以让页面滚动加载动画，oppo官网首页https://www.dowebok.com/demo/131/index2.html是一个经典的例子，只需三步就可以做出类似效果。看了官网wow.js的教程发现wow.js引入之后动画没有效果代码是这个样子的<li class="wow bounceInLeft">啊啊啊</li><li class="wow bounceInRight"></li><l原创 2020-07-12 14:08:36 · 3179 阅读 · 0 评论 -
CSS3：animation属性保持动画在最后状态
设置animation-fill-mode:forwardscss3：animation样式有6个属性：animation-name ：规定需要绑定到选择器的 keyframe 名称。。animation-duration ：规定完成动画所花费的时间，以秒或毫秒计。animation-timing-function ：规定动画的速度曲线。animation-delay ：规定在动画开始之前的延迟。animation-iteration-count ：规定动画应该播放的次数。animation-原创 2020-07-11 23:04:54 · 3830 阅读 · 1 评论 -
如何让网页变黑白效果
页面黑白灰效果，在css里添加filter滤镜eg：整个htmlhtml { filter:grayscale(100%); //各浏览器兼容性不同 -webkit-filter:grayscale(100%); -moz-filter:grayscale(100%); -ms-filter:grayscale(100%); -o-filter:grayscale(1...原创 2020-04-05 16:16:55 · 338 阅读 · 0 评论 -
css表示颜色的方法
表示红色有若干种方法:颜色名：red；百分数：rgb(100%, 0%, 0%)；rgba表示法：rgba(100%, 0%, 0%,1)。 css3新增方法，它是rgb表示法的升级版,新添了透明属性，值0-1。数值：rgb(255, 0, 0)；使用色相、饱和度、亮度来定义：hsl(360,100%，50%) ；hsla表示法：hsla(360,100%,50%,1) 。 css...原创 2020-02-01 00:19:24 · 319 阅读 · 0 评论 -
border:none和border:0的区别
border:none和border:0的区别兼容差异border:0： 所有浏览器中的效果都是隐藏边框；border:none： 对IE6和IE7按钮的边框 <input type="button">标签 以及<button>标签 无效，在其他浏览器中效果一样，都是去掉按钮的边框；性能差异border:0：把border定义为0px，虽然0px在页面上看...原创 2020-01-31 01:12:05 · 351 阅读 · 0 评论 -
jq模拟音乐播放器
点击播放器暂停音乐，播放器停止在当前动画，再次点击开始播放，播放器继续旋转。html代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, init...原创 2020-01-31 00:35:51 · 593 阅读 · 0 评论 -
position的五个属性
position的五个属性可以将个html页面看成一个由多个页面堆叠而成的网页position 属性规定元素的定位类型，一般五个属性：position:static 无定位该属性值是所有元素定位的默认情况，在一般情况下，不需要特别声明它，但有时候遇到继承的情况，为了元素所继承的属性不影响本身，可以用position:static取消继承，即还原元素定位的默认值。pos...原创 2020-01-28 00:40:34 · 716 阅读 · 0 评论