一个热爱网络的年轻人的博客
作为一个对代码负责的人,每次看见别人代码里混乱的命名,总是不禁心里一顿暗骂。问及写代码的人,他们的回答总是:我英文不好,不知道如何取名,都想破了脑袋。而一些QQ群里提问题的朋友截图代码,命名也是非常混乱。网上有很多人发表CSS常用命名的文章,也都挺好的,我只是一个收集者,和把自己的常用命名加上去,分享给有需要的人,希望大家以后写的代码自己看着舒服,别人维护着也舒服。
第一次听说CSS Scroll Snap Points的时候,是在微博里看到的一个gif图,当时看到后,瞬间感觉CSS惊为天人啊!以前这种轮播必须要用js来写的,现在居然CSS都可以实现!立马搜了下相关代码,写了个demo,发现只有最新版火狐支持,为此还把火狐给更新了一下。
CSS布局中外边距margin和内边距padding应该是经常用到的属性,不过值除了正数和负数,百分比也是个很有用的。下面就简单介绍margin、padding百分比的情况和使用场景。
首选提一个简单的问题,外层灰色div宽1000px,高500px,里面的黑色div,margin:10%,请问黑色div的margin值是多少?
移动端里对悬浮效果支持不是很好。例如PC端里很常见的页面滚动到一定距离,导航悬浮效果,页面scroll的时候计算滚动条和顶部距离,加fixed就可以了。但移动端里,基本上所有手机,页面滚动的时候,任何js都不会执行。所以手机里这个效果,得等到页面停止滚动,导航才会悬浮。
网页布局里很多地方需要宽高等比缩放功能,例如手机网页的全屏轮播。轮播的宽度随着手机不同分辨率而变化,高度自适应,这样才不会让轮播里面的图片压缩变形,顶多就是放太大而变模糊。
请允许我一上来就泼盆冷水。不知道是谁说的:搞移动端吧,移动端是webkit的天下,没有IE6,兼容性简单多了。话虽这样说,但未免太乐观了。我Android的UC浏览器到现在,怎么清除缓存,有个页面的某部分始终没有样式加载,我都想卸载了。。。很少人兼容Windows Phone,我一直在做兼容,也是一堆坑。手机端依旧有兼容性,只是一般不会去写hack而已。
由于宽带问题,家里多人使用网络的时候,打开网站加载网页就不那么快了。网速慢的时候按钮这里的图片加载需要一段时间,如图,很不美观。那么是否有办法优化图片加载慢或者未加载成功时候的方案呢?有!
话说那天同事的项目里箭头bug,不小心被leader看到了,然后追溯根源的时候,是copy我做的代码(满头黑线)。我检查了下我的项目,基本上所有箭头都沦陷了。因为实现箭头,我喜欢用空标签border的写法,同事喜欢切图,各有各的好吧。
大型网站的首页加载速度是每个公司都非常重视的,而且还会列举各大同行的网站首页加载速度数据,来进一步提升自己网站的指标。网站加速无非那几点:服务器端的CDN、Gzip,后台的缓存、静态化,前端的CSS、js合并、减少http请求、DOM优化、懒加载等。本文讲的另外一个,背景图片的优化建议。
前几天一朋友在群里问clear:left的意思,我以为是简单的清除浮动问题,就让他百度“清除浮动”,导致中间有点小误会。后来我按照他写的DEMO,发现我自己也没完全理解clear:left和clear:right的意思。特别看了下手册,和写了几个DEMO,经过群里其他人指导,总结如下,希望对其他人能有点帮助。