标签:CSS技巧

高效CSS开发核心要点 »

本文参考了业界规范及主流趋势,详尽整理了CSS开发中需要注意的要点以及关乎性能的一些问题,希望对您有所帮助,也可收藏作为参考。本文来源:http://www.ituring.com.cn/article/17451.基本原则1.1把CSS放在HTML页面头部由于浏览器需要在所有的样式表加载完成后才能开始渲染页面,样式表加载完成之前页面...

继续阅读 →

DIV 高度100% »

DIV高度100%,也是我们比较常用的一个做法,那么如何高度100%自适应和兼容所有的浏览器是我们今天要讨论的小技巧。一个简单的应用场景是:内容根据上面的场景,我们要实现,ID为content的DIV高度100%,我们首先想到的做法是html,body{height:100%;}#content{height:100%;}内容满一屏或...

继续阅读 →

文字垂直排版 »

方法一:<br>Tags此方法尽管不推荐,如果没有别的方法可用时,直接在每个字母或者是汉字的后面添加<br/>标签,就可以实现文字竖排效果了。RAINBOW方法二:元素包裹此方法,需要<span>元素包裹每个字母或者是汉字,然后将其display设置为block,从而使他们独立成行。#method_...

继续阅读 →

CSS三角形的一些应用 »

CSS三角形和圆角的盒子是我们前端开发中很不错的小技巧。以前我们都是用PNG的背景图片实现的,但是IE6的背景图片会有非透明的情况,这个处理起来会比较麻烦,会引用额外的代码,有的时候,CSS三角形及圆角的盒子是一个比较好的替代方法。CSS三角形实现原理与分析:参考文章《CSSBorder使用小分享》,是淘宝的乔花美女整理的,我这儿就没...

继续阅读 →

图片(水平垂直)居中 »

问题我们要居中容器内的图片,是一件不容易的事,容器可以确定大小,但是图片的大小是不明确的。我们不确定图片大小的主要原因是为了保证图片的完整性和不失真性,我们最好不要强制的缩放图片大小和裁剪图片。如果把图片作为背景图片,水平垂直居中是非常容易的事。但是我们今天要说的是盒子中的<img>元素水平垂直居中。方案有许多,完美的方案...

继续阅读 →

无JavaScript实现内容切换效果 »

选项卡式的内容切换效果,应用的场景比较多,用JavaScript是如何实现的不是我们今天说的重点。如果我们的"选项卡式的内容切换效果"在禁用JavaScript的情况下是否可以正常运行?是否可以满足用户的基本需求?是我们讨论的重点。不过此情况放在中国的用户群体是不会有禁用JavaScript的情况。但是我们不能放弃我们追求完美的精神。...

继续阅读 →

图像替换技术的最佳实战 »

HTML文本的优点就是非常有利于SEO和页面设计人员的处理与控制。同时,可访问性(Accessibility)的思想也应该重点考虑一下。然而,在某些情况不得不使用文本的图像,就像淘宝商城中每个模块的标题,出于品牌策略的要求,需要使用特殊的字体,就应用了图像替换方法。虽然我们提倡尽可能的使用HTML文本而不使用文本的图像,但是由于字体选...

继续阅读 →

IE CSS Bug Table »

我在以前的《IECSSBugs列表和解决方法»》文章中,整理和翻译过HasLayout.net的IECSSBug,就是为了方便日常的开发查阅。不过,官方也存在一点不足和错误,来自Alipay前端同仁已经为我们纠正了一些来自官方的错误,并重新整理成表,非常方便查阅。我这儿就直接收藏了。AlipayUED《打败IE的葵花宝典:CSSBug...

继续阅读 →

IE CSS Bugs 列表和解决方法 »

我们在开发中我们常会在IE中遇到很多莫名的bug,尤其是老态龙钟的IE6浏览器。为了提高我们的开发效率,需要经常总结,整理工作中遇到的问题。我们在网络上找到的IEBugs资料是零散的。不过,在老外的http://haslayout.net/css/网站上,他就系统的总结了IE的一些Bugs,分享一下。目前,这个网站上包含了46个“普通...

继续阅读 →

84个超级有用的CSS技巧与资源 »

随着国内越来越多的人们对web前端技术的关注,完全满足不了人们各种各样的web2.0应用,我这里提供了84个超级有用的CSS技巧与资源。已给大家提供更多的灵感和技巧。FeastyoureyesoverthiscollectionofsuperusefulCSSresources:53CSS-TechniquesYouCouldn’tL...

继续阅读 →