以图明志

CSS

用CSS模拟魔兽世界技能冷却的效果

巧用div的边框厚度实现这种效果
显然这种效果不复杂,一张背景图片,加上前面带有透明度的多边形图层,在脚本控制下就可以转起来了。但问题在于用什么方法来构建这个多边形?在IE下可以用VML,其他浏览器可以用Canvas等等。虽然行的通,但都不是最简单的。仔细分析下,该效果本质就是若干个三角形拼接而成。而三角形,如果你熟悉CSS2的话,一定在哪个地方见过。。。

CSS

CSS实现放大镜/狙击镜效果

放大镜或是狙击镜那样的效果
图片放大,这是一个比较容易的效果了。当然,今天说的可不是简简单单的在一个框里放大,而是一个圆。就像放大镜或是狙击镜那样,只有圆圈里的放大,圈外的当然还是原来的图片。这是不是很不可思议? 当然不是。做过Flash的也许会脱口而出:套个蒙版就是了。可惜CSS不是Flash,没有那一套。我们只有从CSS里面慢慢挖掘。

CSS

用CSS3做一个网页水平翻转效果

CSS3中transform属性的用法
愚人节,你想你的网站也愚弄一下访客吗?下面我给大家推荐个效果,就是整个页面左右颠倒了。css3 很强大,简单的几行代码就可以帮我们实现这个效果。目前这两个属性得到了除去ie以外各个主流浏览器webkit,firefox,opera的支持,属性名分别为 -webkit-transform,-moz-transform,-o-transform;

CSS

关于浮动、布局和块级格式化

clear float,has layout,block formatting context
float是网页布局中都要使用的css属性,他为我们灵活布局提供了方便,但同时浮动太多会带来很多麻烦,所以我通常的做法是使用float完后,马上清除他。float的本质是脱离的正常的html文档流,就是由于他脱离的文档流才出现了很多麻烦。用after产生的内容是个空格,先display:block,然后高度为0,不让他影响布局。

CSS

CSS网页宽度怎么定比较合适

确定宽度是一件苦恼的事
设计网页的时候,确定宽度是一件很苦恼的事。以nowamagic.net为例,根据Google Analytics的统计,半年多以来,访问者的屏幕分辨率一共有81种。最小的分辨率是122x160,这应该是手机;最大的分辨率是3360x1050,天知道是什么设备。一张网页要在大小如此悬殊的各种屏幕上,都呈现令人满意的效果,难度可想而知。

CSS

CSS3不遥远,几个特性你要知道

你应该了解的几个CSS3特性
CSS是众所周知且应用广泛的网站样式语言,在它的版本三(CSS3)计划中,新增了一些能够节省时间的特性。尽管只有当前最新了浏览器版本才能支持这些 效果,但了解它们还是必须且很有趣味性的。CSS3中的5个有趣的新技术:圆角、个别圆角、不透明度、阴影和调整元素大小。

CSS

CSS一个解决浮动问题的hack

Clear:both其实是有瑕疵的
原来后边的Clear:both;其实就是利用清除浮动来把外层的div撑开,所以有时候,我们在将内部div都设置成浮动之后,就会发现,外层div的背景没有显示,原因就是外层的div没有撑开,太小,所以能看到的背景仅限于一条线。但这种办法就是最好了的吗?我这么说,当然答案就不是了。可以采用通过Hack实现。

CSS

页面元素的CSS渲染优先级

了解CSS的优先级机制是很重要的
选择器都有一个权值,权值越大越优先;当权值相等时,后出现的样式表设置要优于先出现的样式表设置;创作者的规则高于浏览者:即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式;继承的CSS 样式不如后来指定的CSS 样式;在同一组属性设置中标有“!important”规则的优先级最大。

CSS

IE的CSS渲染跟其它浏览器有什么不同

浏览器兼容需要对IE的工作模式有所了解
由于IE系浏览器对标准的支持不够好,导致Web开发中经常需要去处理浏览器兼容性问题,特别有些莫名其妙的问题很让人头疼。如果外部样式、内部样式和内联样式同时应用于同一个元素,就是使多重样式的情况。之所以说是一般情况是因为可以使用!important来改变这种顺序,比如外部样式如果某个样式项使用了!important来提高优先级,其优先级将比内联样式高。

CSS

让IE6也支持position:fixed

抖动问题也解决了
众所周知IE6不支持position:fixed,这个bug与IE6的双倍margin和不支持PNG透明等bug一样臭名昭著。前些天遇到了这个问题。当时就简单的无视了IE6,但是对于大项目或商业网站,如果有用到这个属性的时候,是不可能直接无视的。如何让position:fixed在IE6中工作呢?本文所使用的技巧是用了一条InternetExplorer的CSS表达式(expression)。

CSS

CSS设计一个三列布局的页面

两列定宽中间自适应的结构布局
探讨这种布局是因为最近对话框组件以及信息系统B/S界面布局的需要。无论是什么,我们在写CSS之前首先引入reset.css,我使用的是淘宝的reset。将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内,允许空格。我们知道在IE6.0以及IE7.0是使用了一个has layout的概念。

CSS

CSS的历史与工作原理

与CSS经验分享
网页浏览器主要通过HTTP协议连接网页服务器而取得网页,HTTP容许网页浏览器送交资料到网页服务器并且获取网页。目前最常用的 HTTP 是 HTTP/1.1,这个协议在RFC2616中被完整定义。HTTP/1.1 有其一套Internet Explorer并不完全支援的标准,然而许多其他当代的网页浏览器则完全支援这些标准。网页的位置以URL(统一资源定位符)指示,此乃网页的地址;以http:开首的便是通过 HTTP协议登陆。

CSS

谈谈CSS中em与px的差异

让你的网站易用性更好
在国内网站中,包括三大门户,以及“引领”中国网站设计潮流的蓝色理想,ChinaUI等都是使用了px作为字体单位。只有百度好歹做了个可调的表率。而 在大洋彼岸,几乎所有的主流站点都使用em作为字体单位,也就是可调的。没错,px比em更加容易使用,大部分读者不知道em为何物或者它相当于多少 px。

CSS

一道页面布局的前端面试题

从这两道前端面试题中你可以知道你需要学些什么
让我们一起来做一个页面。首先,我们需要一个布局。 请使用 CSS 控制 3 个 div,实现如下图的布局。这题不难,在平时项目开发过程中也经常会碰到: 主要考虑几个问题:1. IE6 的 3 像素 BUG;2. 清楚浮动;

CSS

使图片水平并垂直居中的一个Hack

淘宝的一个前端面试题
淘宝的一个前端面试题:使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。 想起了vertical-align:middle;但是不行,后来才知道还要display:table-cell;才可以,但是display:table-cell;这个在IE是没有用的,于是就想用line-height来解决,无果。

CSS

弄清楚CSS的匹配原理

让你写出高效的CSS
用了这么多年的CSS,现在才明白CSS的真正匹配原理。看1个简单的CSS:DIV#divBox p span.red{color:red;}按习惯我们对这个CSS 的理解是,浏览器先查找id为divBox的DIV元素,当找到后,再找其下的所有p元素,然后再查找所有span元素,当发现有span的class为red的时候,就应用该style。多么简单易懂的原理,可是这个理解却是完完全全相反、错误的。
2 / 4 首页 < Prev 1 2 3 4 Next > 尾页 页码: