随笔分类 - Html和css
纯css瀑布流布局
摘要：由于公司的项目需要才用到瀑布流布局 因为后台返回的json直接循环出来的,所以不能做左右浮动的那种,所以才用到了瀑布流布局 16年之前的瀑布流布局基本都时基于js或者直接用jq插件的,但是随着技术的进步或更新,想用纯css达到这样的效果也是可以的 话不多说直接上代码 CSS样式是 就结束了,是不是很
阅读全文
LocalStorage存储和cookie存储
摘要：localStorage是H5的新特性，主要用来本地存储，一般浏览器支持的大小是5M,不同浏览器会有所不同，解决了cookie存储空间不足的问题。 2、使用： ⑴、存 if(!window.localStorage){ alert("浏览器不支持localstorage"); return fals
阅读全文
HTML5中的audio在手机端和 微信端的自动播放
摘要：再做H5页面的时候,发现audio在手机端和微信端添加了autoplay以后还是不可以自动播放,这是因为手机端为了节约流浪所设置的 通常解决方法是给一个交互事件,一定要是交互事件 第二步:配置文件 这样在网络稳定的情况下是可以自动播放的!如果有其他的解决方法欢迎随时交流!
阅读全文
-webkit-line-clamp超过两行就出现省略号
摘要：-webkit-line-clamp 是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。 限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他外来的WebKit属性。常见结合属性： display: -webkit-box
阅读全文
CSS兼容IE Firefox问题与解决方法
摘要：一.双边距问题浮动元素的外边距会加倍，但与第一个浮动元素相邻的其他浮动元素外边距不会加倍。解决方法：在此浮动元素增加样式 display:inline;二.图片产生的间隙父元素直接包含<img>，这个图片下方会和父元素边缘产生间隙。解绝方法：1.在源代码中让</div>和<img>在同一行，因为那个
阅读全文
offsetTop、clientTop、scrollTop、offsetTop
摘要：HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中
阅读全文
border的特殊用法
摘要：大家很容易在一些网页上看到二级菜单上有一个小的三角形，这个小三角型 除了可以使用图片或者使用iconfont写出来，还可以使用border写出来 这边简单的为大家举一个例子，希望对大家有用吧！ css样式为： html样式为： 虽然这里我举例的并不是二级菜单上的小三角，但是你只要明白了这个原理，二级
阅读全文
伪类
摘要：目前在一般的网页上经常可以看到的利用伪类来制作边框，清除浮动等 1.利用伪类制作特殊边框的css样式： 利用伪类制作特殊边框的html样式： 还有一种就是在电商里经常看到的 其html样式为： 2.利用伪类来清除浮动，这是大家经常写页面会遇到的问题 利用伪类清除浮动的css样式为： 利用伪类清除浮动
阅读全文
