
前端-css
yanglang1987500
高级软件工程师,前端架构师
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
纯CSS如何让图片以及DIV垂直居中显示?
图片,也就是img标签,行内元素;div,块级元素。 有时候我们会纠结于如何让这两种元素在父容器DIV中垂直居中显示(当然 ,这里我们抛开表格布局不谈,因为表格可以让内容自动垂直居中) 1. 对于图片,如下所示: .container{ height:350px; border:1px solid #DDDDDD; text-align: center;原创 2015-01-05 12:08:45 · 1568 阅读 · 0 评论 -
利用图标字体实现在线地图上的地点标注与颜色渲染
前阵子做在线地图应用的时候,有个需求,就是地点标注出来要按区间分段渲染颜色。当然,可以用标签模拟正方形,三角形,再填充颜色,用css3还可以模拟一些圆形出来,但是一来要兼容万恶的IE7,二来又要好看。 近几年移动端浏览器上流行的图标字体(icon font)就派上用场了,最重要是IE6都支持它。下图是使用图标字体后的地图渲染效果,是不是很不错呢? 使用icon font来生成图标相对于原创 2015-01-06 11:52:40 · 2643 阅读 · 0 评论 -
为什么一个img在一个div里下方有多余的空间-怎么让div自适应图片的高度
如下图所示: 解决方案: img{vertical-align:top;} /*解决方案1*/ img{display: block} /*解决方案2*/ div{line-height: 0} /*解决方案3*/ 但是由于图片一般需要居中展示,为了利用text-align:center这个内联属性,推荐 方案1与方案3,方案2不推荐使用。原创 2015-01-09 14:30:25 · 2819 阅读 · 3 评论 -
减少HTTP请求密技-内联图片的秘密
通过各种减少HTTP请求的来提高网站速度和优化网站已经不是秘密。其中图片合并减少HTTP请求由为被大家所看重,通过合并多个JS文件合并CSS样式文件外还有个减少HTTP请求的密技就是内联图片的使用。 什么是内联图片。 内联图片是一种新型的图像格式(在我看来是这样不知道理解对否),官方称为:data URI scheme。通常我们存储的图片在网页中需要写:而内联图片写法会是 <im转载 2015-01-05 10:05:11 · 707 阅读 · 0 评论 -
定制html原生上传组件样式,实现兼容包括IE在内的所有浏览器。
说起文件上传,撇开借助于flash插件或silverlight插件或各类浏览器自家插件的上传组件不说,我们来看看浏览器原生的: 早些年大多数人直接使用的浏览器的原生上传组件样式,但这样会导致不同浏览器下使用体验不一致,比如下图: 过了些时候,产品经理觉得太丑陋,各种浏览器体验不和谐,要求开发人员必须使得体验一致,于是有人就想方设法将的样式修改成绝对定位+ 透明+覆盖在按钮上 来原创 2015-01-05 10:08:19 · 1913 阅读 · 1 评论 -
一个很炫的灯箱插件,兼容IE7+
由于工作上需要一个灯箱插件,需要缩放图片与拖拽图片的功能,网上找遍了也没找着合适的,于是,自己动手,丰衣足食! 代码已托管到github,童鞋们自己去下载,里面有demo使用样例,很容易使用,代码也没做混淆,兼容IE7+以及所有现代浏览器。 https://github.com/yanglang1987500/lightbox 如果大家觉得有惊喜,有被震撼到的话,还希望大家能在下方评论区原创 2015-07-26 10:55:05 · 1065 阅读 · 0 评论 -
如何消除子容器的margin-top给父容器造成的合并margin影响。
我们都知道,在CSS的盒模型中,当子容器设置了margin-top之后,父容器也会受到相应的影响,如下图所示 要解决这种情况,通常情况下我们会采用父容器的padding属性来替代子容器的margin属性。那么,有没有别的办法可以解决这个问题呢? 答案是有的! 我们发现此时的父容器并没有使用border属性或padding属性,可是当我们加上这两个属性中的某一个之后,上原创 2015-01-05 10:03:26 · 5932 阅读 · 1 评论