随笔分类 -  HTML

关于网页制作
js 判断滚动条是否停止滚动
摘要:这个需求是我在写一个固钉的时候遇到的问题,当滚动条滚动时固钉隐藏,当停止滚动时固钉出现 阅读全文

posted @ 2017-09-12 18:30 sjpqy 阅读(2348) 评论(0) 推荐(1)

jQuery 实现的瀑布流
摘要:最少代码的瀑布流实现 A ARDELL/艾黛尔 ANNASUI/安娜苏 ETUDEHOUSE/爱丽小屋 abeeco AFU/阿芙 E... 阅读全文

posted @ 2017-09-10 17:26 sjpqy 阅读(143) 评论(0) 推荐(0)

原生js实现的瀑布流布局
摘要:基本思路: 运用position: absolute来进行定位布局,从第二排开始每次寻找高度最小的位置插入元素 阅读全文

posted @ 2017-09-06 17:35 sjpqy 阅读(140) 评论(0) 推荐(0)

css 如何实现图片等比例缩放
摘要:在进行布局的时候,很多PM都要求图片等比例缩放,而且要求图片不失真,不变形,但是UI设计好了这个div的宽度又不能随意更改,而后台传过来的图片也不是等比例的图片,这就比较难受了,写成 width: 100%;和height: 100%; 如果图片刚好和你设定的div等比例,那自然是没有问题的,但往往 阅读全文

posted @ 2017-06-26 10:07 sjpqy 阅读(17795) 评论(2) 推荐(0)

css 新单位 fr
摘要:fr是css刚出的一个新的单位,目前经过测试在chrome和firefox是可以支持的 举个案列,拿一个网格布局来说吧 看一下效果 这时会发现下面出现了滚动条,如果不是4个网格而是11个网格呢,那计算起来就非常麻烦了,那个网格布局还提供了另一种写法,就是把算数交给计算机来处理,那就改成这样 这样还是 阅读全文

posted @ 2017-06-22 14:44 sjpqy 阅读(2147) 评论(0) 推荐(0)

BFC原理
摘要:一、BFC是什么? 在解释 BFC 是什么之前,需要先介绍 Box、Formatting Context的概念。 Box: CSS布局的基本单位 Box 是 CSS 布局的对象和基本单位, 直观点来说,就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性,决定了这个 Box 的 阅读全文

posted @ 2017-03-09 00:42 sjpqy 阅读(362) 评论(0) 推荐(0)

HTML移动端开发常见的兼容性总结
摘要:1、安卓浏览器看背景图片,有些设备会模糊。用同等比例的图片在PC机上很清楚,但是手机上很模糊,原因是什么呢?经过研究,是devicePixelRatio作怪,因为手机分辨率太小,如果按照分辨率来显示网页,这样字会非常小,所以苹果当初就把iPhone 4的960640分辨率,在网页里只显示了48032 阅读全文

posted @ 2017-03-08 00:09 sjpqy 阅读(15723) 评论(0) 推荐(0)

移动H5开发入门知识,CSS的单位汇总与用法
摘要:说到css的单位,大家应该首先想到的是px,也就是像素,我们在网页布局中一般都是用px,但是近年来自适应网页布局越来越多,em和百分比也经常用到了。然后随着手机的流行,web app和hybrid app的开发,都用到了css3技术,在css3中,新增了许多单位,rem、vw和vh、vmin和vma 阅读全文

posted @ 2017-03-07 00:04 sjpqy 阅读(1253) 评论(4) 推荐(6)

CSS Sprites (css精灵)
摘要:CSS Sprites CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言,不高于200KB的单张图片的所需载 阅读全文

posted @ 2017-03-02 08:25 sjpqy 阅读(191) 评论(0) 推荐(0)

html5新增标签
摘要:html5新增标签<section></section> 表示内容区块,一般入章节、页眉、页脚或者页面中的其他部分。可以与h1-h6等元素结合起来使用,标示文档的结构 <section></section><article></article>表示页面中的一块与上下文不相关的独立内容,譬如博客中的一 阅读全文

posted @ 2017-02-25 00:16 sjpqy 阅读(220) 评论(0) 推荐(0)

css清除浮动的方法
摘要:1,父级div定义 height 原理:父级div手动定义height,就解决了父级div无法自动获取到高度的问题。 优点:简单、代码少、容易掌握 缺点:只适合高度固定的布局,要给出精确的高度,如果高度和父级div不一样时,会产生问题 建议:不推荐使用,只建议高度固定的布局时使用 2,结尾处加空di 阅读全文

posted @ 2017-02-24 23:05 sjpqy 阅读(323) 评论(0) 推荐(0)

导航