随笔分类 -  HTML/CSS

摘要:伪元素是一个好东西,但是很多人都没怎么用,因为他们觉得伪元素太诡异了。其实使用伪元素有很多好处,最大的好处是它可以简化页面的html标签,同时用起来也很方便,善于使用伪元素可以让你的页面更加地简洁优雅。 更好的阅读体验移步:http://yincheng.site/using-before-afte 阅读全文
posted @ 2016-10-30 16:01 会编程的银猪 阅读(1374) 评论(0) 推荐(2) 编辑
摘要:三角形的场景很常见,打开一个页面可以看到各种各样的三角形: 由于div一般是四边形,要画个三角形并不是那么直观。你可以贴一张png,但是这种办法有点low,或者是用svg的形式,但是太麻烦。三角形其实可以用CSS画出来。如上图提到,可以分为两种三角形,一种是纯色的三角形,第二种是有边框色的三角形,先 阅读全文
posted @ 2016-10-22 19:15 会编程的银猪 阅读(2259) 评论(0) 推荐(2) 编辑
摘要:借用Effective之名,开始写Effective系列,总结一些前端的心得。 有些人写页面会走向一个极端,几乎页面所有的标签都用div,究其原因,用div有很多好处,一个是div没有默认样式,不会有margin、background等初始化设置,另外可能会觉得不用div还能用啥。所以看他的页面,一 阅读全文
posted @ 2016-09-25 23:10 会编程的银猪 阅读(1068) 评论(5) 推荐(3) 编辑
摘要:借用Effective之名,开始写Effective系列,总结一些前端的心得。 为什么说能使用html/css解决的问题就不要使用JS呢?两个字,因为简单。简单就意味着更快的开发速度,更小的维护成本,同时往往具有更好的体验,下面介绍几个实例。 1. 导航高亮 导航高亮是一种很常见的问题,包括当前页面 阅读全文
posted @ 2016-09-17 15:10 会编程的银猪 阅读(944) 评论(0) 推荐(3) 编辑
摘要:本文介绍使用图标字体和SVG取代雪碧图的方法。雪碧图是很多网站经常用到的一种技术,但是它有缺点:高清屏会模糊、无法动态变化如hover时候反色。而使用图标字体可以完美解决上述问题,同时具备兼容性好,生成的文件小等优点。 阅读全文
posted @ 2016-05-01 17:08 会编程的银猪 阅读(5922) 评论(11) 推荐(15) 编辑
摘要:居中在切图的时候是一个经常遇到的问题,有些时候不太好处理。这篇博客通过一个案例的变化,讨论了几种常见的左右和垂直居中的方式。一方面是做个总结,另一方面是寻求更好更合适的居中方式。 阅读全文
posted @ 2015-12-25 20:48 会编程的银猪 阅读(3231) 评论(4) 推荐(17) 编辑
摘要:三栏自适应宽度布局貌似是一个老生常谈的问题,本文通过对几种办法的一步步分析,希望能够谈出一些新东西。这些办法包括最了原始的table布局,然后就是float布局、table-cell、margin负值法以及flex布局来实现自适应宽度的实现和原理,重点讨论了float的一些特性,最后再分析另外一个自需要根据其它元素宽度进行自适应的例子。 阅读全文
posted @ 2015-11-28 21:10 会编程的银猪 阅读(2433) 评论(3) 推荐(4) 编辑
摘要:一个交互比较多的UI图里面可能会有很多小图标,一般可用sprites图将多个小图标弄成一张大图,或者其它的办法,各种方法的比较可参见另外一篇博客:使用css3新属性clip-path制作小图标,本文深入讨论使用icon-font的制作方法:在PS里面导出svg,制作字体图标。这种方法既有sprites图不需要浏览器发多次请求的优点,也有使用clip-path/svg矢量无损的优点,并且支持IE6及以上。 阅读全文
posted @ 2015-11-25 23:14 会编程的银猪 阅读(7425) 评论(1) 推荐(3) 编辑

点击右上角即可分享
微信分享提示