简明现代魔法 -> CSS层叠样式表

CSS中a标签的样式介绍

a链接样式的“爱恨”原则

CSS为一些特殊效果准备了特定的工具,我们称之为“伪类”。其中有几项是我们经常用到的,下面我们就详细介绍一下经常用于定义链接样式的四个伪类。因为我们要定义链接样式,所以其中必不可少的就是超级链接中的锚标签--a,锚标签和伪类链接起来书写的方法就是定义链接样式的基础方法。

发布于 2010-08-20 分类:csszone

让超出的文字显示为省略号

用省略号代替文字的超出部分是很常见的需求

对大片文字的显示样式进行限制是CSS中最常用的地方之一,我们在行列时,经常会出现一行文字超出了宽度,很多人使用了 overflow:hidden,让超出来的内容隐藏,有没有一种代码让文字超出时,出现省略号了?

发布于 2010-08-16 分类:csszone

解决float:right后右对齐换行

需要对浮动进一步了解

当非float的元素和float的元素在一起的时候,如果非float元素在先,那么float的元素将被排斥也就是说,你的span是float:right,但是你文本还是float:none。如果要让两者在同一行的话,有两种方法。把span先于文本显示,或者或者把文本也设成float。

发布于 2010-08-09 分类:csszone

CSS2实现的边框三角

一个很好的CSS三角技巧

利用CSS的border属性可以生成一些图形,例如三角或是圆角。纯粹的CSS2的内容,没有兼容性的问题。css border 三角,纯css2实现,兼容各浏览器(包括IE6),且效果非常好。

发布于 2010-08-07 分类:csszone

需要频繁清除浮动的解决方案

清除浮动的一个小技巧

浏览器FireFox,Chrome下,li之间有缝隙,Google得知缝隙由字体大小产生,所以另外加入hack来除缝。而这两种实现方法中,float:left要比display:inline;的表现方式要好。因为内联(display:inline;)属于行布局,其特性是在一行里进行布局,所以不能被设定宽高。块级元素的布局相对于内联样式要精确的多。所以尽量使用float:left;

发布于 2010-08-06 分类:csszone

设计具有良好结构的CSS代码

当项目变得庞大时糟糕的CSS代码会让你抓狂

以我的经验,项目流程中如果缺乏"顺序"或一个关于项目的清晰视图是非常不利的而且你还得冒风险去添加,更改,删除class及其属性,如此在你的最终产品中得到的将只有混乱的代码和大量未使用的元素。我建议在你直接编写CSS代码之前,先把你的网站的所有区块都在草稿里画出来。

发布于 2010-07-08 分类:csszone

list-style-image 图片垂直居中

让列表图片垂直居中

如果使用list-style-image设置了一个列表项的前面的小图标,在Firefox和Chrome下是正常显示的。 但是在IE下想让他也居中正常的显示,死活不听话。 退而求其次,找了一个折中的解决办法,就是使用ul li的backgrou-image(背景图片)来解决。

发布于 2010-06-24 分类:csszone

CSS的匹配原理

让你写出高效的CSS

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

发布于 2010-06-09 分类:csszone

margin-top在Firefox失效的解决方法

左层绝对定位右层相对定位时,清除左边浮动

一个简单的例子就是左右两个层,左边层绝对定位,右边层相对定位,右边层的margin-top在firefox下会有问题。解决方法就是,在左边层结束后,清除一次浮动即可。

发布于 2010-06-06 分类:csszone

使用Hack使图片水平与垂直居中

淘宝的一个前端面试题

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

发布于 2010-06-05 分类:csszone

排行榜单制作

把你最热门的页面直观地推荐给用户

排行榜单在很多网站上可以看到,通过确切的页面点击率,将最热门的页面推荐给用户,是个不错的做法。 下面是简明现代魔法制作的一个排行的效果。

发布于 2010-06-04 分类:csszone

关于CSS布局的前端面试题

从这两道前端面试题中你可以知道你需要学些什么

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

发布于 2010-06-01 分类:csszone

小叮当告诉你各浏览器对CSS3的支持情况

看看你使用的浏览器能否支持CSS3

上面的图是某日本神人用 CSS3 画的。四个浏览里面 Chrome 的支持度最高,不仅圆角、阴影一应俱全,甚至连眼睛都还会动 @@。Firefox 3.6 次之,除了眼睛不会动之外都和 Chrome 相当,Opera 则是少了阴影。如果您翻不了墙,可以点这个链接测试CSS3的小叮当,本站也可以看看这个小叮当。

发布于 2010-05-17 分类:csszone

overflow 属性介绍

overflow 属性规定如何处理如何处理不符合元素框的内容

overflow 属性规定如何处理如何处理不符合元素框的内容。 参数介绍: visible:内容不会被修剪,会呈现在元素框之外。 hidden:内容会被修剪,但是浏览器不会显示供查看内容的滚动条。 scroll:内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。 auto:由浏览器决定如何显示。如果需要,则显示滚动条。

发布于 2010-05-13 分类:csszone

控制图片显示的最大宽度

使用CSS表达式

网站开发时经常遇到的问题,有些图片不适宜过大,大了之后会把整个网页撑开,很不好看。下面是CSS控制图片显示的最大宽度的代码,直接放在CSS文件中调用就可以了。IE5及其以后版本支持在CSS中使用expression,用来把CSS属性和JavaScript表达式关联起来,这里的CSS属性可以是元素固有的属性,也可以是自定义属性。

发布于 2010-05-06 分类:csszone
 

copyright © 2009 简明现代魔法    学习、分享、进步

power by Gonn 感谢所有关心和支持本站的朋友们