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

清除浮动的三种方法

更多方式清除浮动

可以使用使用空标签清除浮动,使用overflow属性,使用after伪对象清除浮动等。

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

鼠标移到链接弹出图片的效果

有链接就可以看图片

当鼠标移到链接时,图片会显示出来。在某些场合这个设计会比较有用。更多用处还是由大家来发掘啦。

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

常用的栏目框框设计

从Google学习来的一个CSS技巧

这个CSS框框有许多用途,比如显示某个栏目之类的,个人觉得这个设计得还不错。

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

CSS 经典技巧,必看

非常不错的CSS技巧,你知道多少个呢?

CSS字体属性简写规则,如何同时使用两个类,关于CSS border的缺省值,图片替换技巧,CSS box模型的另一种调整技巧,块元素居中对齐,用CSS来处理垂直对齐,直通到屏幕底部的背景色等等。

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

CSS 使网页变灰

哀悼4月14日玉树遇难的同胞

如果需要使网站变灰,在网页上加层滤镜就可以了。有的时候加上后可能不生效,是因为网站没有使用最新的网页标准协议。

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

一些高效的 CSS 代码编写规范

如何实现高效整洁的CSS代码

CSS学起来并不难,但在大型项目中,就变得难以管理,特别是不同的人在CSS书写风格上稍有不同,团队上就更加难以沟通,为此总结了一些如何实现高效整洁的CSS代码原则。

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

CSS的作用及其基本结构

非常好的一个CSS基础教程

有一次找工作面试,很直接的那个面试官就问了我“CSS的作用是什么?”我当时回答也很搞笑,就说了句,“现在做网站离不开CSS,这个就像鱼离不开水一样”。可能觉得说得也没错。但深层次的想,确实没有回答人家的问题。

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

CSS 丰富的利器

全面介绍CSS的选择器

一般没有系统的学习过,只是在网上看一些片断教程的人。见到最多的可能也就是:元素选择符(例如:body 、a 、li )ID选择符(例如:#head、#body、#foot)类选择符(例如:.red、.item、.content)今天我们把所有的选择符统统拿出来说个遍。

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

用CSS控制文本左右对齐且首行缩进

CSS实现两端对齐效果

CSS 代码如下:*.elegant{margin-left: 40px;margin-right: 80px;letter-spacing: 1px;word-spacing: 2px;line-height: 1.7em;text-indent: 2em;text-align: justify;}

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

CSS 鼠标样式

让你自定义你的鼠标样子

大家否曾注意到有些网站的鼠标不是规则的斜向上箭头的形状,而是十字形,或者是向左的箭头,或者是个问号等等。当你想在网页的不同位置让鼠标显示不 同形状,以体现不同的功能区;当你想让你的网站体现与众不同的风格时,考虑一下在鼠标样式上下功夫吧。其实鼠标样式的用途还是极为广泛的,那么怎样才能实现鼠标的不同样式呢?

发布于 2010-03-31 分类:csszone

CSS 的对话气泡效果设计

设计活泼的回复样式

气泡效果设计,.bubble-box{ background:#EEE; width:200px; margin-bottom:30px; }

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

inline-block 属性分析

解决浮动的蹊跷问题

ie6,ie7的haslayout属性是个让人头疼的问题。在做导航条的时候,一般会用到ul li结构,大多数时候我们是把li设置为浮动,让其并排显示在同一行。还有一种方法就是设置li为display:inline;这样可以达到同样的效果,但是问题是inline元素的特性:默认无法设置宽度,高度,以及上下margin。

发布于 2010-03-23 分类:csszone

CSS 实现垂直居中

又一个实用的居中技巧

水平居中我们知道最简便的方法就是margin:auto,但是margin只是相对宽度有效。如果垂直居中的元素高度已知,这个比较简单,也不需要额外的辅助元素。如果居中元素高度可变,这个需要额外的一个wrapper元素,用table-cell的方式来模拟表格的居中实现,当然,早期的ie又是另一招,具体可见代码。

发布于 2010-03-18 分类:csszone

类似按钮的表单 CSS

让你的表单看起来像按钮

我们再来设计类似按钮的 Form 表单吧。演示效果如下:form{margin:0px} input{ border:1px solid #808080; }

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

一个活泼的标题与内容显示样式

从简单生活网学到的一个CSS设计

从简单生活网学到的一个CSS设计,标题看起来很舒服清新,标题和数据可以用以上优雅显示。

发布于 2010-03-11 分类:csszone
 

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

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