自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

飘零雾雨的专栏

欢迎到我的主博客:css探索之旅(http://blog.doyoe.com/)

原创 纯CSS构造Tips效果补遗

  其实并不想写这篇文章滴,已经不好玩了。因为之前已经写过一篇类似的文章(纯CSS构造Tips效果),如果需要其它的Tips效果应该都可以在那个基础之上略做修改或扩展。  不过这段时间还是有不少同学问,已经给出原型了,可是。。。  再整一篇,全当是骗点流量:)  [效果演示:http://www....

2008-03-12 15:09:00 936 2

原创 无限制的自由适应的边框

  前几天改一个东东时,看到一个不错的效果,可惜它是用JS做的,有点复杂和麻烦。今天正好没什么事,就整了个用CSS实现的方法,感觉应该会比较实用的。  效果描述:一个容器,有外在表现的一种容器,这个容器要根据自身包含的内容(比如说图片)大小来改变自己的宽高。  {这个框框是借用别人滴,我美工比较差...

2008-03-12 15:07:00 1042 0

原创 两种简易的图片切换效果

  选项卡效果已被应用到越来越多的地方,于是更多不同需求的选项卡也就出现了。  没事写了2个简单的图片切换实例,其实是从选项卡实例扩展滴,所以仍使用以前那篇文章(加了点料的选项卡效果)的JS。  实例一演示:[http://www.doyoe.com/model/tabstrip/tabstrip...

2008-03-12 15:01:00 580 0

原创 CSS未知尺寸的图片在容器中垂直居中的方法

如何使得未知大小的图片在容器里垂直居中

2008-03-12 14:57:00 733 0

原创 列表在各浏览器中的表现差异

  CSS总是出人意表,而IE却总是让人意外,这点相信大家都有同感了。  我们今天就说说列表,在讲这个之前,得先了解一些关于列表本身的特性,它们在IE及其它非IE浏览器中的表现差异。  例如,我随便写了一段:无序列表有序列表  然而就这一段普通的代码,在IE及非IE下也有着截然不同的效果(加上bo...

2008-03-07 12:20:00 725 0

原创 奥运年,我再次光顾了神舟

  就在前几天,入手了一台神舟优雅 hp800的笔记本电脑。标题为什么要说“再次”呢?原因很简单,因为之前用来蛮长一段时间的神舟笔记本。对于在外界蜚誉参半的神舟,我不再多加评论,好不好,谁用谁知道。  先来说说此次购机的简单过程:  几年前,大哥购入了一台神舟承运系列的笔记本,我用了几有2年,所以...

2008-03-07 12:13:00 458 0

原创 加了点料的选项卡效果

  补上前篇文章所说的“图二”选项卡实例。  类似的效果,其实我之前已经写过了(不规则背景图片滑动门),这里篇文章主要是为了说明上篇文章的“合理性”及“良好的用户体验”,不阐述其它的问题。  [演示地址:http://www.doyoe.com/model/tabstrip/tabstrip4/5...

2007-11-12 17:29:00 1275 0

原创 对选项卡的合理性及用户体验的几点看法

  看过最早的选项卡其实应该是微软的一些东东,都是一些非常经典的。比如说IE的“Internet 选项”之类的,非常棒。  从“Internet 选项”中,用户可以很清晰的看出当前自己是在浏览哪个区域。“Internet 选项”的“当前”选项按钮和其它不是当前的区分非常明了,你可以一目了然的就知道...

2007-11-08 15:25:00 477 0

原创 另类TabStrip效果(书签应用补遗)

  书签其实还是蛮好玩滴,需要的只是你有时间和兴趣,当前也要有想法:)  之前整理了个用书签弄的简单相册类图片展示效果,稍稍扩展下就弄了个另类的TabStrip,不过上篇提到的几个遗憾还是没很好的解决。本来很久以前就想写,不过一搁下就忘了这事!- -  当前样式使用了一个变通,虽然也不大好,不过了...

2007-11-07 17:54:00 561 0

原创 初来广州之家中失窃

  刚到广州,是朋友来接的,有几年没见到她,样子没什么变化,只是更成熟了些。  一见面,她劈头盖脸就说,这么热的天,你怎么还穿着西服?让我措手不及(本以为这么久没见。。。)我解释到家里和车上都不热,只是下车后才觉得热。  来到她住的地方,把行李都放下,总算可以歇一口气了。这一路都担心行李箱会爆开,...

2007-11-07 17:50:00 686 0

原创 初来广州之火车MM

  初来广州,新地方,人生地不熟,倒是在车上碰上一个能聊上几句的哥们。  哦,貌似不对,还有一个广州本地的MM,两人说了过一个站的时间,帮助偶打发了将近1小时,在此表示感谢:)  MM先问我去哪,我说去广州。  听到我说去广州,MM马上打开了话匣子,然后说她是广州人,家就在岗顶附近,离我上班的地方...

2007-10-31 13:54:00 710 0

原创 有趣的放大镜效果

  闲话先不说,直接看实例先:  [演示地址:http://www.doyoe.com/model/xhtmlcss/style/larger/larger.htm]CSS部分:.larger { width:300px; padding:40px; overflow:auto;}.larger...

2007-10-12 10:29:00 630 0

原创 纯CSS的相册图片展示(书签应用)

  国庆节回来,这回着实是踏踏实实的休息了一次,感觉精神好多了。活是干了一点,不过睡得放心多了。尤其是昨晚的台风影响,感觉好凉爽,一觉居然睡了10个小时。  今天上班把以前写的一个东东整理了一下,不过还是有不少的缺憾在里面,感兴趣的朋友看看就可以了:)  其实这个东东已经有很多人写过了,不过还是把...

2007-10-11 08:59:00 1374 0

原创 怎样的“标题”与“更多”更简洁实用

  怎样的“标题”与“更多”更简洁实用呢?  页面多了,不可避免的就会碰到“标题”与“更多”在一行内的情况。初一看下,这有什么可说的呢?不就是标题更多混写嘛,很简单啊。  是,确实很简单,不过在简单的同时还考虑实用合理的话,或许就有些些麻烦了。  比如,我们要定制一个如下图的“标题”与“更多”(想...

2007-10-10 08:41:00 535 0

原创 规范化的链接样式顺序?

  有的时候文章的相关链接太多了,一时半会不好分辨哪些文章是自己已看过的,哪些又是还没有来得及研读的等等,虽说是个小小的问题,但也得耗费你的一点时间:)  既然只是个小小的问题,解决的方法当然也是极为简单的,所要求的只是一个好记性和熟练程度或者好习惯。   举一例子来说先:  [演示地址:http...

2007-10-09 09:35:00 843 1

原创 纯CSS构造Tips效果

  这几天心情很不好,什么事都不想做,有点莫名其妙,却让人有很疲累的感觉。  不过总这样也不是办法,强行给了自己一个作业,工作最能麻木一个人,实践证明确实非常有道理。  Tips,不知道大家对这个东东感不感兴趣,相信有title,很多人都不愿再去另做这个东东来代替title的显示效果,而我恰恰也在...

2007-09-29 09:55:00 745 0

原创 高固定情况下的水平及垂直居中

  哇,好久没有Blog一下了,最近实在是忙晕了头,当然不仅仅是工作的问题,还有其它的。  今天终于是忙里偷闲,好不容易有点时间更新一下Blog了,却被蜘蛛网似的杂乱无章的引用,留言,评论给搞得不爽,准备等再有时间就把“引用”什么的功能去掉,太多垃圾引用了。  发现好长一段时间或者说一直以来,很多...

2007-09-29 09:54:00 590 0

原创 简单的链接向右下凹陷效果

  链接的效果可以被广大且有才的同学们做成漂亮的乱七八糟,所以我就不再在“漂亮”上较真了:)  重新把曾经一段时间被人们喜爱的“向右下凹陷”的链接效果整理了一下,当个回忆也好...  [演示地址:http://www.doyoe.com/model/xhtmlcss/style/a.htm]COD...

2007-09-29 09:54:00 562 0

原创 不规则背景图片滑动门

     记得很久以前写过一个滑动门菜单的Demo,前些日子写了一种用越发不规则的图片做背景的滑动门菜单,但总有点瑕疵,因为会存在盲点区域,虽然范围很小,几乎可以忽略,但毕竟还是存在。先来看看演示再说。      [演示地址:http://www.doyoe.com/model/xhtmlcss/...

2007-09-29 09:53:00 1354 0

原创 避免和清除宽自适应布局在ie中产生几像素差异的方法

     标题想了半天也想不到一个好的,感觉怎么写怎么长!- -怕是小学时缩句没学好。      今天想说的这个问题应该算是老调重谈了,不过写出来希望会给大家一些帮助,也使我自己不会忘记,毕竟好记性比不上烂笔头。      相信做过宽度自适应布局的同学都碰到过在ie下莫名其妙的多出几像素的问题,我...

2007-09-29 09:51:00 669 0

原创 对于两栏布局可能出现的几种情况的思考

      对于一直比较受人喜爱的两栏布局,个人认为不外乎以下几种情况,或许会有比较多的细节方面的不同,但都可以在这几种情况内部进行演变。      可能会出现的情况:左栏呈现重要的主体内容,右栏的相对次要;右栏呈现重要的主体内容,左栏相对次要;至于左右两栏同样重要的那种情况,其实也是上面两种情况...

2007-09-29 09:50:00 869 0

原创 单行文本溢出处理补遗

      貌似让文本长度随容器宽度变化而发生不同的截取效果也蛮有趣的,这在做弹性布局时很有用。      当然做这个东东没有什么技术含量在里面,不过觉得有点意思,同时好久没Blog一下了...      [演示地址:http://www.doyoe.com/model/xhtmlcss/styl...

2007-09-29 09:50:00 389 0

原创 关于如何提高CSS重用性的思路

      * 本文只提供一个思路,具体如何操作还需要大家自己去发现和体会。      为什么要提高CSS的重用性呢?      因为具有高重用性的CSS不仅可以减少冗余和节省工程时间,而且能加快页面展现速度,所以提高CSS的重用性都是非常有用而必要的。      如何提高CSS的重用性呢?   ...

2007-09-29 09:49:00 920 0

原创 截断单行的溢出文本

     貌似好久以前写过了,找了半天不到!- -      很多时候文本的溢出会让我们的的页面变得很怪异,不处理又非常别扭,闲得无聊的时候会写段程序控制下,但基本不会有那么闲。      下面这种CSS方法可以比较简单的对单行文本的溢出进行处理,但让人不满意的地方就是会有被截出不完整的字的情况出...

2007-09-29 09:48:00 536 0

原创 简单写了个时下比较流行的tabStrip

      时下网上非常流行那种tabStrip的效果,只要不滥用,确实可以为网站增色不少。      就我个人来讲,也觉得这是一个非常好的技术:      ①让页面更美观,结构更紧凑;      ②效果更吸引人;      ③最重要的就是节省了很多“地方”。      以前一个内容比较多的页面,...

2007-09-29 09:46:00 610 0

原创 CSS切割背景应用补遗

    上篇文章讲了一下合并图片,并利用CSS进行背景切割渲染的例子。这篇文章将是对上篇的一个补充,在平时的设计中可能会经常使用到下面将要讲的这个效果。      这次将背景切割结合A(链接)的一些伪类来进行实际应用,以展示鼠标经过链接时出现不同的效果。      直接进入正题,先看最终效果再说:...

2007-09-29 09:45:00 613 0

原创 合并图片,用CSS切割以减少图片请求次数

      为了加快页面访问速度,我们可能会想到多种可行的办法:如提升硬性条件方面的性能、减少HTTP请求次数,使用Cache,合并文件(aoao总结的把js和css合并成一个文件非常好玩)等等。      这里主要讲一下如何节省图片的请求次数,至于如何能减少图片请求,不外乎就是减少实际图片的数量...

2007-09-29 09:44:00 1738 0

原创 形如p+p的有趣现象

把例子摆出来先,在非ie浏览器中打开后,能看到例子效果: [演示地址:http://www.doyoe.com/model/xhtmlcss/style/pp.htm]  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&g...

2007-09-29 09:43:00 418 0

原创 伪类:first-child的测试

first-child其实是一个很好的东西,只是IE一直不支持,不知道是出于什么考虑的,有点无聊。 还记得极遥远的时候,这个问题是xiaoming同学问的。如何在不动原来的代码情况下,只弄个外部css来改变某块东东里面的第一个元素的样式。很自然,这个问题一下就会让人想到用:first-child,...

2007-09-29 09:42:00 430 0

原创 总结基本Tags在XHTML1.0各DTD的校检数据

今天花了点时间将一些基本的Tags符合哪些XHTML 1.0 DTD的数据总结了一下。由于只是个人的经验总结,难免会出现各种错误,希望各位达人指正。这里只给出对Strict级别的测试地址:[http://www.doyoe.com/model/dhtml/example/tags.htm]DTD:...

2007-09-29 09:41:00 432 0

原创 如何对select元素中的选项进行逻辑分组

不知道大家有没有这样的感觉,在select选项足够多的时候,被select中的选项弄得头昏眼花,想要找一个自己想要的选项实在是太困难了。其实是可以对select里面的选项进行逻辑分组的。可以想象得到,如果对select的选项进行了分组,这对于有大量选项的select肯定是有好处的。至少用户体验会好...

2007-09-29 09:40:00 875 0

原创 用BDO改变文本流方向控制阅读顺序

由于各个国家在阅读顺序上可能存在差异,所以有的时候需要能够控制文本的书写方向,或由左到右,或由右到左。这时我们就可以用BDO这个东东来搞定对文本流方向的控制,要注意的是BDO元素将关闭双向法则并控制阅读顺序,当你使用BDO元素时必需附带DIR标签属性。[演示地址:http://www.doyoe....

2007-09-29 09:39:00 455 0

原创 DIV布局之三行三列之高度自适应补遗

很显然,上篇文章只是在理想范畴内做了三行三列的三列自适应高。对于一般的站点,那样布局设计其实也就可以了,但如果针对的是门户,或者PV超过百万,千万。。。的网站,这样的布局就显得捉襟见肘了。也就是说,在网络环境不变的情况下,我们唯有想办法通过良性的布局和程序来提高页面的执行浏览速度。[演示地址:ht...

2007-09-29 09:38:00 615 0

原创 DIV布局之三行三列之高度自适应

写了几篇宽度自适应的布局后,发现很多朋友都对高度自适应十分感兴趣,于是整理了一篇贴了大家参考一下:一般来说一个有好几列的布局,每列的内容都是不固定的,或多或少。所以在做布局的时候一般不会给出每列的定高,但这样做却出现了列与列之间的高度不一致,导致陷入灵活有余而精致欠缺的尴尬。所以设计师们急切的希望...

2007-09-29 09:37:00 822 0

原创 zIndex的几个小小的问题(二)

这些文字是对上篇文章的一点补充,没有什么需要特别说明的,只是把一些“概念常识”整理一下。仍然先做一个和上篇文章中纸牌式的效果或仍沿用那个效果:[演示地址:http://www.doyoe.com/model/xhtmlcss/style/zindex/3.htm]CSS部分:div { posit...

2007-09-29 09:36:00 1516 0

原创 zIndex的几个小小的问题(一)

zIndex在实际应用中很是实用。不过也有些问题需要注意,很容易把头都搞大。当然,其实说什么都是没用滴,先用zIndex做个效果看看再说,首先得知道它都可以胜任哪些东东,这是比较重要的。比如要做一个下面的扑克牌堆叠的效果,这是非常简单的。扑克牌图片网上随便找就可以了,或者直接拿下面的这几张。效果如...

2007-09-29 09:34:00 1647 0

原创 CSS伪对象搞定首字下沉

用过word,看过报纸的朋友,是不是对它们的首字下沉效果很感兴趣?有的时候适当的在web中使用些首字下沉的效果,能为你的web增色不少。通过伪对象:first-letter可以搞定这个效果:[演示地址:http://www.doyoe.com/model/xhtmlcss/style/first....

2007-09-29 09:33:00 680 0

原创 AccessKey在web的作用性

AccessKey是一个非常有意思的东东,不过在web中会去使用AccessKey的人应该不多。因为长久以来就只有少部分人会用它在web中定义快捷键,而浏览者在潜移默化之下也都习惯了“蹂躏”鼠标;浏览者一习惯了点鼠标,在web用AccessKey的人就更少了。不知道这长长的一句有没有语法错误,我自...

2007-09-29 09:32:00 1508 1

原创 TabIndex是干什么滴

TabIndex就是按Tab键有顺序的获取定义过的TabIndex元素设置在各个元素之间的焦点。做过表单或者填写过表单的人都会发现,使用Tab键可以逐一获得每个input的焦点。这个东东其实也是可以修改的,比如不想被获取,或者改变被获取的顺序。在填写表单的时候(注册登录或其它),有很多用户都是不通...

2007-09-29 09:32:00 1825 2

原创 一个有意思的字母逐渐增大效果

今天逛CSDN的时候,无意间看到挺有意思的字母逐渐增大的效果(个人觉得比较好玩)。整理了一下,拿给大家也看看。记得以前只是用循环写过这样的效果,由于很少会用到,没去仔细研究过。今天偶然见到,还是觉得蛮好玩滴。[演示地址:http://www.doyoe.com/model/xhtmlcss/sty...

2007-09-29 09:31:00 518 0

提示
确定要删除当前文章?
取消 删除