- 博客(47)
- 资源 (3)
- 收藏
- 关注
RSS订阅原创 纯CSS构造Tips效果补遗
其实并不想写这篇文章滴，已经不好玩了。因为之前已经写过一篇类似的文章（纯CSS构造Tips效果），如果需要其它的Tips效果应该都可以在那个基础之上略做修改或扩展。 不过这段时间还是有不少同学问，已经给出原型了，可是。。。 再整一篇，全当是骗点流量：） ［效果演示：http://www.doyoe.com/model/xhtmlcss/style/tips/tips2.htm
2008-03-12 15:09:00
1104
2
原创 无限制的自由适应的边框
前几天改一个东东时，看到一个不错的效果，可惜它是用JS做的，有点复杂和麻烦。今天正好没什么事，就整了个用CSS实现的方法，感觉应该会比较实用的。 效果描述：一个容器，有外在表现的一种容器，这个容器要根据自身包含的内容（比如说图片）大小来改变自己的宽高。 {这个框框是借用别人滴，我美工比较差而且人很懒滴说，只是自己切了下图} 一路做来都非常顺利，顺便考虑了下图片请求的问题，合并
2008-03-12 15:07:00
1460
原创 两种简易的图片切换效果
选项卡效果已被应用到越来越多的地方，于是更多不同需求的选项卡也就出现了。 没事写了2个简单的图片切换实例，其实是从选项卡实例扩展滴，所以仍使用以前那篇文章（加了点料的选项卡效果）的JS。 实例一演示：［http://www.doyoe.com/model/tabstrip/tabstrip4/3.htm］ 实例二演示：［http://www.doyoe.com/model/t
2008-03-12 15:01:00
786
原创 列表在各浏览器中的表现差异
CSS总是出人意表，而IE却总是让人意外，这点相信大家都有同感了。 我们今天就说说列表，在讲这个之前，得先了解一些关于列表本身的特性，它们在IE及其它非IE浏览器中的表现差异。 例如，我随便写了一段：无序列表有序列表 然而就这一段普通的代码，在IE及非IE下也有着截然不同的效果（加上border后更效果更直观）。 IE下的效果（图一）： 非IE下效果（图二）：
2008-03-07 12:20:00
941
原创 奥运年，我再次光顾了神舟
就在前几天，入手了一台神舟优雅 hp800的笔记本电脑。标题为什么要说“再次”呢？原因很简单，因为之前用来蛮长一段时间的神舟笔记本。对于在外界蜚誉参半的神舟，我不再多加评论，好不好，谁用谁知道。 先来说说此次购机的简单过程： 几年前，大哥购入了一台神舟承运系列的笔记本，我用了几有2年，所以对神舟笔记本的方方面面应该还算是有点话语权的。神舟笔记本一直以来就是以高性价比展现在世人面前的
2008-03-07 12:13:00
530
原创 加了点料的选项卡效果
补上前篇文章所说的“图二”选项卡实例。 类似的效果，其实我之前已经写过了（不规则背景图片滑动门），这里篇文章主要是为了说明上篇文章的“合理性”及“良好的用户体验”，不阐述其它的问题。 ［演示地址：http://www.doyoe.com/model/tabstrip/tabstrip4/5.htm］CSS部分：.hide { display:none;}#tab_1 { w
2007-11-12 17:29:00
1413
原创 对选项卡的合理性及用户体验的几点看法
看过最早的选项卡其实应该是微软的一些东东，都是一些非常经典的。比如说IE的“Internet 选项”之类的，非常棒。 从“Internet 选项”中，用户可以很清晰的看出当前自己是在浏览哪个区域。“Internet 选项”的“当前”选项按钮和其它不是当前的区分非常明了，你可以一目了然的就知道哪个是正在浏览的。 从设计合理性的角度来看，它这样做是很明智的。可以想象，当年微软做出这种效
2007-11-08 15:25:00
556
原创 另类TabStrip效果(书签应用补遗)
书签其实还是蛮好玩滴，需要的只是你有时间和兴趣，当前也要有想法:) 之前整理了个用书签弄的简单相册类图片展示效果，稍稍扩展下就弄了个另类的TabStrip，不过上篇提到的几个遗憾还是没很好的解决。本来很久以前就想写，不过一搁下就忘了这事!- - 当前样式使用了一个变通，虽然也不大好，不过了胜于无，暂时还是可以用滴。 由于很懒，没对该例子作美化，仅作说明。 ［演示地址：h
2007-11-07 17:54:00
672
原创 初来广州之家中失窃
刚到广州，是朋友来接的，有几年没见到她，样子没什么变化，只是更成熟了些。 一见面，她劈头盖脸就说，这么热的天，你怎么还穿着西服？让我措手不及（本以为这么久没见。。。）我解释到家里和车上都不热，只是下车后才觉得热。 来到她住的地方，把行李都放下，总算可以歇一口气了。这一路都担心行李箱会爆开，在车上的时候，由于没座，实在是太累了，就坐了一会箱子上，哪知道质量这么差，一下就坐爆了，幸好没
2007-11-07 17:50:00
774
原创 初来广州之火车MM
初来广州，新地方，人生地不熟，倒是在车上碰上一个能聊上几句的哥们。 哦，貌似不对，还有一个广州本地的MM，两人说了过一个站的时间，帮助偶打发了将近1小时，在此表示感谢：） MM先问我去哪，我说去广州。 听到我说去广州，MM马上打开了话匣子，然后说她是广州人，家就在岗顶附近，离我上班的地方很近。 MM的热情，倒是令我“热血沸腾”啊，多好的一个MM，主动告诉该如何如何走，该
2007-10-31 13:54:00
827
原创 有趣的放大镜效果
闲话先不说，直接看实例先： ［演示地址：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
761
原创 纯CSS的相册图片展示(书签应用)
国庆节回来，这回着实是踏踏实实的休息了一次，感觉精神好多了。活是干了一点，不过睡得放心多了。尤其是昨晚的台风影响，感觉好凉爽，一觉居然睡了10个小时。 今天上班把以前写的一个东东整理了一下，不过还是有不少的缺憾在里面，感兴趣的朋友看看就可以了：） 其实这个东东已经有很多人写过了，不过还是把自己整理的贴出来大家瞧瞧，看还可以怎么改进。 先看看Demo吧： ［效果演示：ht
2007-10-11 08:59:00
1641
原创 怎样的“标题”与“更多”更简洁实用
怎样的“标题”与“更多”更简洁实用呢？ 页面多了，不可避免的就会碰到“标题”与“更多”在一行内的情况。初一看下，这有什么可说的呢？不就是标题更多混写嘛，很简单啊。 是，确实很简单，不过在简单的同时还考虑实用合理的话，或许就有些些麻烦了。 比如，我们要定制一个如下图的“标题”与“更多”（想必是最常见的了）。 看到上图，首先头脑里就会有一个大致的结构，如： 今
2007-10-10 08:41:00
660
原创 规范化的链接样式顺序？
有的时候文章的相关链接太多了，一时半会不好分辨哪些文章是自己已看过的，哪些又是还没有来得及研读的等等，虽说是个小小的问题，但也得耗费你的一点时间:) 既然只是个小小的问题，解决的方法当然也是极为简单的，所要求的只是一个好记性和熟练程度或者好习惯。 举一例子来说先： ［演示地址：http://www.doyoe.com/model/xhtmlcss/style/link.ht
2007-10-09 09:35:00
995
1
原创 纯CSS构造Tips效果
这几天心情很不好，什么事都不想做，有点莫名其妙，却让人有很疲累的感觉。 不过总这样也不是办法，强行给了自己一个作业，工作最能麻木一个人，实践证明确实非常有道理。 Tips，不知道大家对这个东东感不感兴趣，相信有title，很多人都不愿再去另做这个东东来代替title的显示效果，而我恰恰也在这群人里面：）不过title始终有它自己的局限性，效果单一，容易让人审美疲劳。 之前偶尔
2007-09-29 09:55:00
1064
原创 高固定情况下的水平及垂直居中
哇，好久没有Blog一下了，最近实在是忙晕了头，当然不仅仅是工作的问题，还有其它的。 今天终于是忙里偷闲，好不容易有点时间更新一下Blog了，却被蜘蛛网似的杂乱无章的引用，留言，评论给搞得不爽，准备等再有时间就把“引用”什么的功能去掉，太多垃圾引用了。 发现好长一段时间或者说一直以来，很多同学都对居中这个话题十分感兴趣，当然这里既有水平居中也包括垂直居中。 相信水平居中大家都
2007-09-29 09:54:00
700
原创 简单的链接向右下凹陷效果
链接的效果可以被广大且有才的同学们做成漂亮的乱七八糟，所以我就不再在“漂亮”上较真了：） 重新把曾经一段时间被人们喜爱的“向右下凹陷”的链接效果整理了一下，当个回忆也好... ［演示地址：http://www.doyoe.com/model/xhtmlcss/style/a.htm］CODE： "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
2007-09-29 09:54:00
664
原创 不规则背景图片滑动门
记得很久以前写过一个滑动门菜单的Demo，前些日子写了一种用越发不规则的图片做背景的滑动门菜单，但总有点瑕疵，因为会存在盲点区域，虽然范围很小，几乎可以忽略，但毕竟还是存在。先来看看演示再说。 ［演示地址：http://www.doyoe.com/model/xhtmlcss/menu/menu4/1.htm］CSS部分：html,body { margin:0;
2007-09-29 09:53:00
1525
原创 避免和清除宽自适应布局在ie中产生几像素差异的方法
标题想了半天也想不到一个好的，感觉怎么写怎么长!- -怕是小学时缩句没学好。 今天想说的这个问题应该算是老调重谈了，不过写出来希望会给大家一些帮助，也使我自己不会忘记，毕竟好记性比不上烂笔头。 相信做过宽度自适应布局的同学都碰到过在ie下莫名其妙的多出几像素的问题，我也觉得ie总是让人不断的折腾，可能是怕我们老坐在电脑前不“运动”会滋生出些什么乱七八糟的毛病来
2007-09-29 09:51:00
827
原创 对于两栏布局可能出现的几种情况的思考
对于一直比较受人喜爱的两栏布局，个人认为不外乎以下几种情况，或许会有比较多的细节方面的不同，但都可以在这几种情况内部进行演变。 可能会出现的情况：左栏呈现重要的主体内容，右栏的相对次要；右栏呈现重要的主体内容，左栏相对次要；至于左右两栏同样重要的那种情况，其实也是上面两种情况中的一个特例；如果您还有其他的不同想法，请跟我分享一下：）以下是两栏布局的XHTML部分：
2007-09-29 09:50:00
1172
原创 单行文本溢出处理补遗
貌似让文本长度随容器宽度变化而发生不同的截取效果也蛮有趣的，这在做弹性布局时很有用。 当然做这个东东没有什么技术含量在里面，不过觉得有点意思，同时好久没Blog一下了... ［演示地址：http://www.doyoe.com/model/xhtmlcss/style/tof2.htm］ 代码如下： "http://www.w3.org/T
2007-09-29 09:50:00
473
原创 关于如何提高CSS重用性的思路
* 本文只提供一个思路，具体如何操作还需要大家自己去发现和体会。 为什么要提高CSS的重用性呢？ 因为具有高重用性的CSS不仅可以减少冗余和节省工程时间，而且能加快页面展现速度，所以提高CSS的重用性都是非常有用而必要的。 如何提高CSS的重用性呢？ 1、定义一些公有的全局样式，如html, body, hn等等。
2007-09-29 09:49:00
1123
原创 截断单行的溢出文本
貌似好久以前写过了，找了半天不到!- - 很多时候文本的溢出会让我们的的页面变得很怪异，不处理又非常别扭，闲得无聊的时候会写段程序控制下，但基本不会有那么闲。 下面这种CSS方法可以比较简单的对单行文本的溢出进行处理，但让人不满意的地方就是会有被截出不完整的字的情况出现。 ［演示地址：http://www.doyoe.com/model/xhtm
2007-09-29 09:48:00
702
原创 简单写了个时下比较流行的tabStrip
时下网上非常流行那种tabStrip的效果，只要不滥用，确实可以为网站增色不少。 就我个人来讲，也觉得这是一个非常好的技术： ①让页面更美观，结构更紧凑； ②效果更吸引人； ③最重要的就是节省了很多“地方”。 以前一个内容比较多的页面，拉了半天滚动条也拉不到底，想找个自己感兴趣的东东似乎也得花些时间。而使用了tabStrip
2007-09-29 09:46:00
872
原创 CSS切割背景应用补遗
上篇文章讲了一下合并图片，并利用CSS进行背景切割渲染的例子。这篇文章将是对上篇的一个补充，在平时的设计中可能会经常使用到下面将要讲的这个效果。 这次将背景切割结合A（链接）的一些伪类来进行实际应用，以展示鼠标经过链接时出现不同的效果。 直接进入正题，先看最终效果再说： ［效果演示：http://www.doyoe.com/model/xhtmlc
2007-09-29 09:45:00
730
原创 合并图片，用CSS切割以减少图片请求次数
为了加快页面访问速度，我们可能会想到多种可行的办法：如提升硬性条件方面的性能、减少HTTP请求次数，使用Cache，合并文件（aoao总结的把js和css合并成一个文件非常好玩）等等。 这里主要讲一下如何节省图片的请求次数，至于如何能减少图片请求，不外乎就是减少实际图片的数量和代码的编写质量。 我们可以把一些不经常变动的框架图片由原来分割成的多张小图合并
2007-09-29 09:44:00
1951
原创 形如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
583
原创 伪类:first-child的测试
first-child其实是一个很好的东西，只是IE一直不支持，不知道是出于什么考虑的，有点无聊。 还记得极遥远的时候，这个问题是xiaoming同学问的。如何在不动原来的代码情况下，只弄个外部css来改变某块东东里面的第一个元素的样式。很自然，这个问题一下就会让人想到用:first-child，只不过万恶的ie不支持，只能用js或expression了。由于FF，Opera，Mozi
2007-09-29 09:42:00
503
原创 总结基本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
527
原创 如何对select元素中的选项进行逻辑分组
不知道大家有没有这样的感觉，在select选项足够多的时候，被select中的选项弄得头昏眼花，想要找一个自己想要的选项实在是太困难了。其实是可以对select里面的选项进行逻辑分组的。可以想象得到，如果对select的选项进行了分组，这对于有大量选项的select肯定是有好处的。至少用户体验会好很多，方便大家，何乐而不为呢？［演示地址：http://www.doyoe.com/m
2007-09-29 09:40:00
1369
原创 用BDO改变文本流方向控制阅读顺序
由于各个国家在阅读顺序上可能存在差异，所以有的时候需要能够控制文本的书写方向，或由左到右，或由右到左。这时我们就可以用BDO这个东东来搞定对文本流方向的控制，要注意的是BDO元素将关闭双向法则并控制阅读顺序，当你使用BDO元素时必需附带DIR标签属性。［演示地址：http://www.doyoe.com/model/dhtml/example/bdo.htm］XHTML： "h
2007-09-29 09:39:00
580
原创 DIV布局之三行三列之高度自适应补遗
很显然，上篇文章只是在理想范畴内做了三行三列的三列自适应高。对于一般的站点，那样布局设计其实也就可以了，但如果针对的是门户，或者PV超过百万，千万。。。的网站，这样的布局就显得捉襟见肘了。也就是说，在网络环境不变的情况下，我们唯有想办法通过良性的布局和程序来提高页面的执行浏览速度。［演示地址：http://www.doyoe.com/model/xhtmlcss/layout/5.ht
2007-09-29 09:38:00
826
原创 DIV布局之三行三列之高度自适应
写了几篇宽度自适应的布局后，发现很多朋友都对高度自适应十分感兴趣，于是整理了一篇贴了大家参考一下：一般来说一个有好几列的布局，每列的内容都是不固定的，或多或少。所以在做布局的时候一般不会给出每列的定高，但这样做却出现了列与列之间的高度不一致，导致陷入灵活有余而精致欠缺的尴尬。所以设计师们急切的希望能找个一到简单而有效的解决高度自适应的方法，这里只列举一种通过padding及margin
2007-09-29 09:37:00
1133
原创 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
1672
原创 zIndex的几个小小的问题(一)
zIndex在实际应用中很是实用。不过也有些问题需要注意，很容易把头都搞大。当然，其实说什么都是没用滴，先用zIndex做个效果看看再说，首先得知道它都可以胜任哪些东东，这是比较重要的。比如要做一个下面的扑克牌堆叠的效果，这是非常简单的。扑克牌图片网上随便找就可以了，或者直接拿下面的这几张。效果如下图：［演示地址：http://www.doyoe.com/model/xht
2007-09-29 09:34:00
2006
原创 CSS伪对象搞定首字下沉
用过word，看过报纸的朋友，是不是对它们的首字下沉效果很感兴趣？有的时候适当的在web中使用些首字下沉的效果，能为你的web增色不少。通过伪对象:first-letter可以搞定这个效果：［演示地址：http://www.doyoe.com/model/xhtmlcss/style/first.htm］CSS部分：.dyfirst { width:300px; borde
2007-09-29 09:33:00
806
原创 AccessKey在web的作用性
AccessKey是一个非常有意思的东东，不过在web中会去使用AccessKey的人应该不多。因为长久以来就只有少部分人会用它在web中定义快捷键，而浏览者在潜移默化之下也都习惯了“蹂躏”鼠标；浏览者一习惯了点鼠标，在web用AccessKey的人就更少了。不知道这长长的一句有没有语法错误，我自己都被绕进去了-_-!!!缩下句就是：AccessKey虽然有趣，但使用的人不多。 使用Acces
2007-09-29 09:32:00
1888
1
原创 TabIndex是干什么滴
TabIndex就是按Tab键有顺序的获取定义过的TabIndex元素设置在各个元素之间的焦点。做过表单或者填写过表单的人都会发现，使用Tab键可以逐一获得每个input的焦点。这个东东其实也是可以修改的，比如不想被获取，或者改变被获取的顺序。在填写表单的时候（注册登录或其它），有很多用户都是不通过鼠标，而直接按Tab键跳到下一个文本框的，等到所有的东东都填好，然后是提交，这是一个非常好和
2007-09-29 09:32:00
2230
2
原创 一个有意思的字母逐渐增大效果
今天逛CSDN的时候，无意间看到挺有意思的字母逐渐增大的效果（个人觉得比较好玩）。整理了一下，拿给大家也看看。记得以前只是用循环写过这样的效果，由于很少会用到，没去仔细研究过。今天偶然见到，还是觉得蛮好玩滴。［演示地址：http://www.doyoe.com/model/xhtmlcss/style/bigger.htm］代码如下： "http://www.w3.org/TR/
2007-09-29 09:31:00
628
CSS参考手册v3.4.0（飘零雾雨版）
2012-02-28
飘零雾雨版 CSS参考手册v3.2.0
2011-12-08
飘零雾雨版 CSS参考手册v3.1.0
2011-10-13
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人