CSS
文章平均质量分 71
飘零雾雨
一直专注于web前端开发...
展开
-
两种简易的图片切换效果
选项卡效果已被应用到越来越多的地方,于是更多不同需求的选项卡也就出现了。 没事写了2个简单的图片切换实例,其实是从选项卡实例扩展滴,所以仍使用以前那篇文章(加了点料的选项卡效果)的JS。 实例一演示:[http://www.doyoe.com/model/tabstrip/tabstrip4/3.htm] 实例二演示:[http://www.doyoe.com/model/t原创 2008-03-12 15:01:00 · 798 阅读 · 0 评论 -
高固定情况下的水平及垂直居中
哇,好久没有Blog一下了,最近实在是忙晕了头,当然不仅仅是工作的问题,还有其它的。 今天终于是忙里偷闲,好不容易有点时间更新一下Blog了,却被蜘蛛网似的杂乱无章的引用,留言,评论给搞得不爽,准备等再有时间就把“引用”什么的功能去掉,太多垃圾引用了。 发现好长一段时间或者说一直以来,很多同学都对居中这个话题十分感兴趣,当然这里既有水平居中也包括垂直居中。 相信水平居中大家都原创 2007-09-29 09:54:00 · 719 阅读 · 0 评论 -
合并图片,用CSS切割以减少图片请求次数
为了加快页面访问速度,我们可能会想到多种可行的办法:如提升硬性条件方面的性能、减少HTTP请求次数,使用Cache,合并文件(aoao总结的把js和css合并成一个文件非常好玩)等等。 这里主要讲一下如何节省图片的请求次数,至于如何能减少图片请求,不外乎就是减少实际图片的数量和代码的编写质量。 我们可以把一些不经常变动的框架图片由原来分割成的多张小图合并原创 2007-09-29 09:44:00 · 1970 阅读 · 0 评论 -
形如p+p的有趣现象
把例子摆出来先,在非ie浏览器中打开后,能看到例子效果: [演示地址:http://www.doyoe.com/model/xhtmlcss/style/pp.htm] "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">testp+p {text-indent:2em; color:#f00;}第一种情况testtesttest第原创 2007-09-29 09:43:00 · 611 阅读 · 0 评论 -
总结基本Tags在XHTML1.0各DTD的校检数据
今天花了点时间将一些基本的Tags符合哪些XHTML 1.0 DTD的数据总结了一下。由于只是个人的经验总结,难免会出现各种错误,希望各位达人指正。这里只给出对Strict级别的测试地址:[http://www.doyoe.com/model/dhtml/example/tags.htm]DTD:表明符合或通过XHTML 1.0 DTD何级别的定义。 S=Strict(严格),原创 2007-09-29 09:41:00 · 542 阅读 · 0 评论 -
DIV布局之三行三列之高度自适应补遗
很显然,上篇文章只是在理想范畴内做了三行三列的三列自适应高。对于一般的站点,那样布局设计其实也就可以了,但如果针对的是门户,或者PV超过百万,千万。。。的网站,这样的布局就显得捉襟见肘了。也就是说,在网络环境不变的情况下,我们唯有想办法通过良性的布局和程序来提高页面的执行浏览速度。[演示地址:http://www.doyoe.com/model/xhtmlcss/layout/5.ht原创 2007-09-29 09:38:00 · 849 阅读 · 0 评论 -
zIndex的几个小小的问题(一)
zIndex在实际应用中很是实用。不过也有些问题需要注意,很容易把头都搞大。当然,其实说什么都是没用滴,先用zIndex做个效果看看再说,首先得知道它都可以胜任哪些东东,这是比较重要的。比如要做一个下面的扑克牌堆叠的效果,这是非常简单的。扑克牌图片网上随便找就可以了,或者直接拿下面的这几张。效果如下图:[演示地址:http://www.doyoe.com/model/xht原创 2007-09-29 09:34:00 · 2020 阅读 · 0 评论 -
DIV布局之三行三列左右两栏固定中间自适应
忙了2个星期,终于有时间整理出下面这篇文章了,呵呵。这个布局其实是在之前两个layout上的一个延伸,做了之前两个,再做一个这样的layout应该不会有什么问题滴,手法都差不多。要使宽度会自适应,顾名思义,就是宽度是不固定的,随外容器变化而变化。而在使用div布局上,就有这么一个优点,div是自动适应容器宽度的。而我们这里要注意的问题仅仅是如何让左右两栏始终固定在原位置,简单点的方法当原创 2007-09-29 09:30:00 · 2510 阅读 · 2 评论 -
避免和清除宽自适应布局在ie中产生几像素差异的方法
标题想了半天也想不到一个好的,感觉怎么写怎么长!- -怕是小学时缩句没学好。 今天想说的这个问题应该算是老调重谈了,不过写出来希望会给大家一些帮助,也使我自己不会忘记,毕竟好记性比不上烂笔头。 相信做过宽度自适应布局的同学都碰到过在ie下莫名其妙的多出几像素的问题,我也觉得ie总是让人不断的折腾,可能是怕我们老坐在电脑前不“运动”会滋生出些什么乱七八糟的毛病来原创 2007-09-29 09:51:00 · 843 阅读 · 0 评论 -
对于两栏布局可能出现的几种情况的思考
对于一直比较受人喜爱的两栏布局,个人认为不外乎以下几种情况,或许会有比较多的细节方面的不同,但都可以在这几种情况内部进行演变。 可能会出现的情况:左栏呈现重要的主体内容,右栏的相对次要;右栏呈现重要的主体内容,左栏相对次要;至于左右两栏同样重要的那种情况,其实也是上面两种情况中的一个特例;如果您还有其他的不同想法,请跟我分享一下:)以下是两栏布局的XHTML部分:原创 2007-09-29 09:50:00 · 1190 阅读 · 0 评论 -
纯CSS的相册图片展示(书签应用)
国庆节回来,这回着实是踏踏实实的休息了一次,感觉精神好多了。活是干了一点,不过睡得放心多了。尤其是昨晚的台风影响,感觉好凉爽,一觉居然睡了10个小时。 今天上班把以前写的一个东东整理了一下,不过还是有不少的缺憾在里面,感兴趣的朋友看看就可以了:) 其实这个东东已经有很多人写过了,不过还是把自己整理的贴出来大家瞧瞧,看还可以怎么改进。 先看看Demo吧: [效果演示:ht原创 2007-10-11 08:59:00 · 1662 阅读 · 0 评论 -
规范化的链接样式顺序?
有的时候文章的相关链接太多了,一时半会不好分辨哪些文章是自己已看过的,哪些又是还没有来得及研读的等等,虽说是个小小的问题,但也得耗费你的一点时间:) 既然只是个小小的问题,解决的方法当然也是极为简单的,所要求的只是一个好记性和熟练程度或者好习惯。 举一例子来说先: [演示地址:http://www.doyoe.com/model/xhtmlcss/style/link.ht原创 2007-10-09 09:35:00 · 1015 阅读 · 1 评论 -
纯CSS构造Tips效果补遗
其实并不想写这篇文章滴,已经不好玩了。因为之前已经写过一篇类似的文章(纯CSS构造Tips效果),如果需要其它的Tips效果应该都可以在那个基础之上略做修改或扩展。 不过这段时间还是有不少同学问,已经给出原型了,可是。。。 再整一篇,全当是骗点流量:) [效果演示:http://www.doyoe.com/model/xhtmlcss/style/tips/tips2.htm原创 2008-03-12 15:09:00 · 1120 阅读 · 2 评论 -
无限制的自由适应的边框
前几天改一个东东时,看到一个不错的效果,可惜它是用JS做的,有点复杂和麻烦。今天正好没什么事,就整了个用CSS实现的方法,感觉应该会比较实用的。 效果描述:一个容器,有外在表现的一种容器,这个容器要根据自身包含的内容(比如说图片)大小来改变自己的宽高。 {这个框框是借用别人滴,我美工比较差而且人很懒滴说,只是自己切了下图} 一路做来都非常顺利,顺便考虑了下图片请求的问题,合并原创 2008-03-12 15:07:00 · 1473 阅读 · 0 评论 -
嵌入式的学习
最近,对于如何让未知尺寸大小的图片在容器中垂直居中这个问题,大家表现出关注度非常高。 首先,我们不要去追究是否有这样做的必要,因为有的时候图片是从数据库读取的,可能大小不一,这时候为了不让图片大小不一而破坏了页面的美观性,其实就有必要这么做了。 总的来说,会有几种方案可以用来做这件事。这里,我只写一种个人认为较为简单和易于理解的方法。 [预览地址:暂未上传]CSS部分:转载 2008-03-12 14:57:00 · 383 阅读 · 0 评论 -
列表在各浏览器中的表现差异
CSS总是出人意表,而IE却总是让人意外,这点相信大家都有同感了。 我们今天就说说列表,在讲这个之前,得先了解一些关于列表本身的特性,它们在IE及其它非IE浏览器中的表现差异。 例如,我随便写了一段:无序列表有序列表 然而就这一段普通的代码,在IE及非IE下也有着截然不同的效果(加上border后更效果更直观)。 IE下的效果(图一): 非IE下效果(图二):原创 2008-03-07 12:20:00 · 959 阅读 · 0 评论 -
加了点料的选项卡效果
补上前篇文章所说的“图二”选项卡实例。 类似的效果,其实我之前已经写过了(不规则背景图片滑动门),这里篇文章主要是为了说明上篇文章的“合理性”及“良好的用户体验”,不阐述其它的问题。 [演示地址:http://www.doyoe.com/model/tabstrip/tabstrip4/5.htm]CSS部分:.hide { display:none;}#tab_1 { w原创 2007-11-12 17:29:00 · 1426 阅读 · 0 评论 -
对选项卡的合理性及用户体验的几点看法
看过最早的选项卡其实应该是微软的一些东东,都是一些非常经典的。比如说IE的“Internet 选项”之类的,非常棒。 从“Internet 选项”中,用户可以很清晰的看出当前自己是在浏览哪个区域。“Internet 选项”的“当前”选项按钮和其它不是当前的区分非常明了,你可以一目了然的就知道哪个是正在浏览的。 从设计合理性的角度来看,它这样做是很明智的。可以想象,当年微软做出这种效原创 2007-11-08 15:25:00 · 576 阅读 · 0 评论 -
另类TabStrip效果(书签应用补遗)
书签其实还是蛮好玩滴,需要的只是你有时间和兴趣,当前也要有想法:) 之前整理了个用书签弄的简单相册类图片展示效果,稍稍扩展下就弄了个另类的TabStrip,不过上篇提到的几个遗憾还是没很好的解决。本来很久以前就想写,不过一搁下就忘了这事!- - 当前样式使用了一个变通,虽然也不大好,不过了胜于无,暂时还是可以用滴。 由于很懒,没对该例子作美化,仅作说明。 [演示地址:h原创 2007-11-07 17:54:00 · 695 阅读 · 0 评论 -
有趣的放大镜效果
闲话先不说,直接看实例先: [演示地址:http://www.doyoe.com/model/xhtmlcss/style/larger/larger.htm]CSS部分:.larger { width:300px; padding:40px; overflow:auto;}.larger a { float:left; width:20px; height:20px; co原创 2007-10-12 10:29:00 · 773 阅读 · 0 评论 -
怎样的“标题”与“更多”更简洁实用
怎样的“标题”与“更多”更简洁实用呢? 页面多了,不可避免的就会碰到“标题”与“更多”在一行内的情况。初一看下,这有什么可说的呢?不就是标题更多混写嘛,很简单啊。 是,确实很简单,不过在简单的同时还考虑实用合理的话,或许就有些些麻烦了。 比如,我们要定制一个如下图的“标题”与“更多”(想必是最常见的了)。 看到上图,首先头脑里就会有一个大致的结构,如: 今原创 2007-10-10 08:41:00 · 807 阅读 · 0 评论 -
关于如何提高CSS重用性的思路
* 本文只提供一个思路,具体如何操作还需要大家自己去发现和体会。 为什么要提高CSS的重用性呢? 因为具有高重用性的CSS不仅可以减少冗余和节省工程时间,而且能加快页面展现速度,所以提高CSS的重用性都是非常有用而必要的。 如何提高CSS的重用性呢? 1、定义一些公有的全局样式,如html, body, hn等等。原创 2007-09-29 09:49:00 · 1145 阅读 · 0 评论 -
伪类:first-child的测试
first-child其实是一个很好的东西,只是IE一直不支持,不知道是出于什么考虑的,有点无聊。 还记得极遥远的时候,这个问题是xiaoming同学问的。如何在不动原来的代码情况下,只弄个外部css来改变某块东东里面的第一个元素的样式。很自然,这个问题一下就会让人想到用:first-child,只不过万恶的ie不支持,只能用js或expression了。由于FF,Opera,Mozi原创 2007-09-29 09:42:00 · 515 阅读 · 0 评论 -
图片在已固定宽度的DIV及TABLE中自适应
有一定web的经验的人都会了解,在固定的DIV或表格里放一张大过其宽高的图片,DIV或TABLE就会被图片撑开,使得原本精心布置好的页面被弄得一团糟。现在有一张200*200px的图片,我们将其放在宽定义为150px的容器里[红色代表容器的边框],演示如下:引用代码: 效果如下:上面的效果就是正常情况下会出现的,我们发现这张图片仍是以本身大小显示的,而它的容器则被撑大了原创 2007-09-29 08:54:00 · 1808 阅读 · 0 评论 -
纯CSS构造Tips效果
这几天心情很不好,什么事都不想做,有点莫名其妙,却让人有很疲累的感觉。 不过总这样也不是办法,强行给了自己一个作业,工作最能麻木一个人,实践证明确实非常有道理。 Tips,不知道大家对这个东东感不感兴趣,相信有title,很多人都不愿再去另做这个东东来代替title的显示效果,而我恰恰也在这群人里面:)不过title始终有它自己的局限性,效果单一,容易让人审美疲劳。 之前偶尔原创 2007-09-29 09:55:00 · 1075 阅读 · 0 评论 -
不规则背景图片滑动门
记得很久以前写过一个滑动门菜单的Demo,前些日子写了一种用越发不规则的图片做背景的滑动门菜单,但总有点瑕疵,因为会存在盲点区域,虽然范围很小,几乎可以忽略,但毕竟还是存在。先来看看演示再说。 [演示地址:http://www.doyoe.com/model/xhtmlcss/menu/menu4/1.htm]CSS部分:html,body { margin:0;原创 2007-09-29 09:53:00 · 1537 阅读 · 0 评论 -
截断单行的溢出文本
貌似好久以前写过了,找了半天不到!- - 很多时候文本的溢出会让我们的的页面变得很怪异,不处理又非常别扭,闲得无聊的时候会写段程序控制下,但基本不会有那么闲。 下面这种CSS方法可以比较简单的对单行文本的溢出进行处理,但让人不满意的地方就是会有被截出不完整的字的情况出现。 [演示地址:http://www.doyoe.com/model/xhtm原创 2007-09-29 09:48:00 · 717 阅读 · 0 评论 -
简单写了个时下比较流行的tabStrip
时下网上非常流行那种tabStrip的效果,只要不滥用,确实可以为网站增色不少。 就我个人来讲,也觉得这是一个非常好的技术: ①让页面更美观,结构更紧凑; ②效果更吸引人; ③最重要的就是节省了很多“地方”。 以前一个内容比较多的页面,拉了半天滚动条也拉不到底,想找个自己感兴趣的东东似乎也得花些时间。而使用了tabStrip原创 2007-09-29 09:46:00 · 896 阅读 · 0 评论 -
CSS切割背景应用补遗
上篇文章讲了一下合并图片,并利用CSS进行背景切割渲染的例子。这篇文章将是对上篇的一个补充,在平时的设计中可能会经常使用到下面将要讲的这个效果。 这次将背景切割结合A(链接)的一些伪类来进行实际应用,以展示鼠标经过链接时出现不同的效果。 直接进入正题,先看最终效果再说: [效果演示:http://www.doyoe.com/model/xhtmlc原创 2007-09-29 09:45:00 · 746 阅读 · 0 评论 -
AccessKey在web的作用性
AccessKey是一个非常有意思的东东,不过在web中会去使用AccessKey的人应该不多。因为长久以来就只有少部分人会用它在web中定义快捷键,而浏览者在潜移默化之下也都习惯了“蹂躏”鼠标;浏览者一习惯了点鼠标,在web用AccessKey的人就更少了。不知道这长长的一句有没有语法错误,我自己都被绕进去了-_-!!!缩下句就是:AccessKey虽然有趣,但使用的人不多。 使用Acces原创 2007-09-29 09:32:00 · 1915 阅读 · 1 评论 -
DIV布局之三行两列右栏宽度固定左栏宽度自适应
和前一篇文章一样,只是这次调换了个位置。把之前的左栏固定变为了现在的右栏固定,实现的手法也是大同小异,不过有一个地方需要注意。那就是在写HTML时,应该把右边的先写,然后再写左边。因为DIV的默认样式是block,每个div都会自动断行。如果先写左边,再写右边的话,因为左边没有float漂浮,右边的会在右部断行;所以编写时,先写右边,再写左边,右边是float的。[演示地址:http:原创 2007-09-29 09:29:00 · 1153 阅读 · 0 评论 -
完整点击区域滑动门菜单
最近,网上已有越来越多的滑动门菜单样式。可谓五花八门,让人眼花缭乱。今日闲来无事,也写了一个,仅供参考。 这里比较重要是链接区域的宽要能自适应,防止有的链接字多,有的链接字少,造成不可意料的维护麻烦。 [演示地址:http://www.doyoe.com/model/xhtmlcss/menu/menu2/1.htm]输出效果:.dymenu原创 2007-09-29 09:09:00 · 1113 阅读 · 0 评论 -
使用LABEL增强你的页面体验
今天浏览aoao(嗷嗷)的网站时,无意发现aoao呼吁大家要给checkbox及radio配个老婆(LABEL),仔细看了一下,发现这样做确实很有必要。虽然我一直都有给它们配“老婆”,但确实没做到aoao这样来倡议大家都这么做,先自己汗一个-_-!! 在现如今WEB都以用户体验作为一个重要的指标来看待,是很有道理的。相信每个网友在浏览页面时,都希望有最IN的体验。 现在我们就来原创 2007-09-29 09:11:00 · 688 阅读 · 0 评论 -
DIV布局之三行两列左栏宽度固定右栏宽度自适应
在用DIV布局时,总会碰到各种各样的问题,有些还非常怪异,总之让人头大。不过当你找到了窍门,你就会把它当作是一门艺术来看待了,真的非常有趣。现在先来谈谈关于三行两列的布局[左栏固定,右栏自适应宽度]之一,我能想到比较好的办法是使用margin漂浮法。先说说要做成这件事,要做些什么,会碰到些什么问题。要让右栏自适应宽度,也就是说随着浏览器分辨率的不同而发生相应变化。同时左栏又如何做到固定在某原创 2007-09-29 09:27:00 · 2043 阅读 · 1 评论 -
如何对select元素中的选项进行逻辑分组
不知道大家有没有这样的感觉,在select选项足够多的时候,被select中的选项弄得头昏眼花,想要找一个自己想要的选项实在是太困难了。其实是可以对select里面的选项进行逻辑分组的。可以想象得到,如果对select的选项进行了分组,这对于有大量选项的select肯定是有好处的。至少用户体验会好很多,方便大家,何乐而不为呢?[演示地址:http://www.doyoe.com/m原创 2007-09-29 09:40:00 · 1428 阅读 · 0 评论 -
zIndex的几个小小的问题(二)
这些文字是对上篇文章的一点补充,没有什么需要特别说明的,只是把一些“概念常识”整理一下。仍然先做一个和上篇文章中纸牌式的效果或仍沿用那个效果:[演示地址:http://www.doyoe.com/model/xhtmlcss/style/zindex/3.htm]CSS部分:div { position: absolute; color: #fff; width: 150p原创 2007-09-29 09:36:00 · 1687 阅读 · 0 评论 -
TabIndex是干什么滴
TabIndex就是按Tab键有顺序的获取定义过的TabIndex元素设置在各个元素之间的焦点。做过表单或者填写过表单的人都会发现,使用Tab键可以逐一获得每个input的焦点。这个东东其实也是可以修改的,比如不想被获取,或者改变被获取的顺序。在填写表单的时候(注册登录或其它),有很多用户都是不通过鼠标,而直接按Tab键跳到下一个文本框的,等到所有的东东都填好,然后是提交,这是一个非常好和原创 2007-09-29 09:32:00 · 2323 阅读 · 2 评论 -
一个有意思的字母逐渐增大效果
今天逛CSDN的时候,无意间看到挺有意思的字母逐渐增大的效果(个人觉得比较好玩)。整理了一下,拿给大家也看看。记得以前只是用循环写过这样的效果,由于很少会用到,没去仔细研究过。今天偶然见到,还是觉得蛮好玩滴。[演示地址:http://www.doyoe.com/model/xhtmlcss/style/bigger.htm]代码如下: "http://www.w3.org/TR/原创 2007-09-29 09:31:00 · 645 阅读 · 0 评论 -
简单的链接向右下凹陷效果
链接的效果可以被广大且有才的同学们做成漂亮的乱七八糟,所以我就不再在“漂亮”上较真了:) 重新把曾经一段时间被人们喜爱的“向右下凹陷”的链接效果整理了一下,当个回忆也好... [演示地址:http://www.doyoe.com/model/xhtmlcss/style/a.htm]CODE: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-原创 2007-09-29 09:54:00 · 679 阅读 · 0 评论 -
单行文本溢出处理补遗
貌似让文本长度随容器宽度变化而发生不同的截取效果也蛮有趣的,这在做弹性布局时很有用。 当然做这个东东没有什么技术含量在里面,不过觉得有点意思,同时好久没Blog一下了... [演示地址:http://www.doyoe.com/model/xhtmlcss/style/tof2.htm] 代码如下: "http://www.w3.org/T原创 2007-09-29 09:50:00 · 486 阅读 · 0 评论