摘要: 张鑫旭的一篇文章,讲到20像素图标对齐和表单元素40像素对齐有所收获,谢谢@张鑫旭 ,很多观点跟平时的处理方式不谋而合,一般来说,我处理图标如果临近的话都会使用同样宽高,然后使用inline-block比较多,表单输入框和按钮以line-height:21-22为准。然后超出的用padding来补充 阅读全文
posted @ 2016-07-21 17:22 尔夫 阅读(1483) 评论(0) 推荐(0) 编辑
摘要: 获取浏览器显示区域的高度 : $(window).height(); 获取浏览器显示区域的宽度 : $(window).width(); 获取页面的文档高度 : $(document).height(); 获取页面的文档宽度 :$(document).width(); 获取滚动条到顶部的垂直高度 : 阅读全文
posted @ 2016-07-13 17:57 尔夫 阅读(892) 评论(0) 推荐(0) 编辑
摘要: 这是一段不应该透明的文字.box{width: 300px;height: 25px;background: red;opacity: 0.5}这样我的文字几乎看不清,这当然不是我想要的,随即去查询资料,找到了一个解决办法,使用css3的属性: .box{width: 300px;height: 2... 阅读全文
posted @ 2015-12-16 14:15 尔夫 阅读(176) 评论(0) 推荐(0) 编辑
摘要: 当我们让一个模块水平居中首先想到的肯定是margin:0 auto;有木有?那么今天给大家介绍一个fit-content属性,不知道有没有同学用过,如果用过那么你可以略过这篇文章,没用过的同学就继续了, 我也是第一次看到这个属性,之前不知道这个属性更不用说使用了,原来这个CSS属性是用来水平居中的,... 阅读全文
posted @ 2015-11-19 14:49 尔夫 阅读(186) 评论(0) 推荐(0) 编辑
摘要: 关于linear-gradient的语法就不多做介绍了网上到处都是,下面看个小例我们先做一个渐变,使其让他旋转, .example{height:150px;width:500px;margin: 100px auto;background-color:#4299BC;background:-web... 阅读全文
posted @ 2015-11-19 14:36 尔夫 阅读(174) 评论(0) 推荐(0) 编辑
摘要: 这次我们使用transform的translateY值来做一个鼠标经过图片上拉,出现文字解释效果:查看效果Wonder GirlsWonder Girls一向以青春活力的形象展现在观众面前,先后在韩国和...查看全文Wonder GirlsWonder Girls一向以青春活力的形象展现在观众面前,... 阅读全文
posted @ 2015-11-19 10:40 尔夫 阅读(211) 评论(0) 推荐(0) 编辑
摘要: 今天浏览这个http://www.sitepoint.com站时,因为好奇看了下人家写的代码,结果发现了这行代码,于是就研究了一下,calc()从字面我们可以把他理解为一个函数function。其实calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能,用来指定元素的长度。比... 阅读全文
posted @ 2015-11-19 10:27 尔夫 阅读(3850) 评论(0) 推荐(0) 编辑
摘要: 如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览。实现方法:overflow:hidden;text-overflow:ellipsis;white-space:nowrap;效果如图:但是这个属性只支持... 阅读全文
posted @ 2015-11-19 10:20 尔夫 阅读(155) 评论(0) 推荐(0) 编辑