- 博客(32)
- 资源 (3)
- 收藏
- 关注
RSS订阅原创 纯CSS构造Tips效果
这几天心情很不好，什么事都不想做，有点莫名其妙，却让人有很疲累的感觉。 不过总这样也不是办法，强行给了自己一个作业，工作最能麻木一个人，实践证明确实非常有道理。 Tips，不知道大家对这个东东感不感兴趣，相信有title，很多人都不愿再去另做这个东东来代替title的显示效果，而我恰恰也在这群人里面：）不过title始终有它自己的局限性，效果单一，容易让人审美疲劳。 之前偶尔
2007-09-29 09:55:00
1075
原创 高固定情况下的水平及垂直居中
哇，好久没有Blog一下了，最近实在是忙晕了头，当然不仅仅是工作的问题，还有其它的。 今天终于是忙里偷闲，好不容易有点时间更新一下Blog了，却被蜘蛛网似的杂乱无章的引用，留言，评论给搞得不爽，准备等再有时间就把“引用”什么的功能去掉，太多垃圾引用了。 发现好长一段时间或者说一直以来，很多同学都对居中这个话题十分感兴趣，当然这里既有水平居中也包括垂直居中。 相信水平居中大家都
2007-09-29 09:54:00
719
原创 简单的链接向右下凹陷效果
链接的效果可以被广大且有才的同学们做成漂亮的乱七八糟，所以我就不再在“漂亮”上较真了：） 重新把曾经一段时间被人们喜爱的“向右下凹陷”的链接效果整理了一下，当个回忆也好... ［演示地址：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
原创 不规则背景图片滑动门
记得很久以前写过一个滑动门菜单的Demo，前些日子写了一种用越发不规则的图片做背景的滑动门菜单，但总有点瑕疵，因为会存在盲点区域，虽然范围很小，几乎可以忽略，但毕竟还是存在。先来看看演示再说。 ［演示地址：http://www.doyoe.com/model/xhtmlcss/menu/menu4/1.htm］CSS部分：html,body { margin:0;
2007-09-29 09:53:00
1538
原创 避免和清除宽自适应布局在ie中产生几像素差异的方法
标题想了半天也想不到一个好的，感觉怎么写怎么长!- -怕是小学时缩句没学好。 今天想说的这个问题应该算是老调重谈了，不过写出来希望会给大家一些帮助，也使我自己不会忘记，毕竟好记性比不上烂笔头。 相信做过宽度自适应布局的同学都碰到过在ie下莫名其妙的多出几像素的问题，我也觉得ie总是让人不断的折腾，可能是怕我们老坐在电脑前不“运动”会滋生出些什么乱七八糟的毛病来
2007-09-29 09:51:00
843
原创 对于两栏布局可能出现的几种情况的思考
对于一直比较受人喜爱的两栏布局，个人认为不外乎以下几种情况，或许会有比较多的细节方面的不同，但都可以在这几种情况内部进行演变。 可能会出现的情况：左栏呈现重要的主体内容，右栏的相对次要；右栏呈现重要的主体内容，左栏相对次要；至于左右两栏同样重要的那种情况，其实也是上面两种情况中的一个特例；如果您还有其他的不同想法，请跟我分享一下：）以下是两栏布局的XHTML部分：
2007-09-29 09:50:00
1190
原创 单行文本溢出处理补遗
貌似让文本长度随容器宽度变化而发生不同的截取效果也蛮有趣的，这在做弹性布局时很有用。 当然做这个东东没有什么技术含量在里面，不过觉得有点意思，同时好久没Blog一下了... ［演示地址：http://www.doyoe.com/model/xhtmlcss/style/tof2.htm］ 代码如下： "http://www.w3.org/T
2007-09-29 09:50:00
486
原创 关于如何提高CSS重用性的思路
* 本文只提供一个思路，具体如何操作还需要大家自己去发现和体会。 为什么要提高CSS的重用性呢？ 因为具有高重用性的CSS不仅可以减少冗余和节省工程时间，而且能加快页面展现速度，所以提高CSS的重用性都是非常有用而必要的。 如何提高CSS的重用性呢？ 1、定义一些公有的全局样式，如html, body, hn等等。
2007-09-29 09:49:00
1145
原创 截断单行的溢出文本
貌似好久以前写过了，找了半天不到!- - 很多时候文本的溢出会让我们的的页面变得很怪异，不处理又非常别扭，闲得无聊的时候会写段程序控制下，但基本不会有那么闲。 下面这种CSS方法可以比较简单的对单行文本的溢出进行处理，但让人不满意的地方就是会有被截出不完整的字的情况出现。 ［演示地址：http://www.doyoe.com/model/xhtm
2007-09-29 09:48:00
717
原创 简单写了个时下比较流行的tabStrip
时下网上非常流行那种tabStrip的效果，只要不滥用，确实可以为网站增色不少。 就我个人来讲，也觉得这是一个非常好的技术： ①让页面更美观，结构更紧凑； ②效果更吸引人； ③最重要的就是节省了很多“地方”。 以前一个内容比较多的页面，拉了半天滚动条也拉不到底，想找个自己感兴趣的东东似乎也得花些时间。而使用了tabStrip
2007-09-29 09:46:00
896
原创 CSS切割背景应用补遗
上篇文章讲了一下合并图片，并利用CSS进行背景切割渲染的例子。这篇文章将是对上篇的一个补充，在平时的设计中可能会经常使用到下面将要讲的这个效果。 这次将背景切割结合A（链接）的一些伪类来进行实际应用，以展示鼠标经过链接时出现不同的效果。 直接进入正题，先看最终效果再说： ［效果演示：http://www.doyoe.com/model/xhtmlc
2007-09-29 09:45:00
746
原创 合并图片，用CSS切割以减少图片请求次数
为了加快页面访问速度，我们可能会想到多种可行的办法：如提升硬性条件方面的性能、减少HTTP请求次数，使用Cache，合并文件（aoao总结的把js和css合并成一个文件非常好玩）等等。 这里主要讲一下如何节省图片的请求次数，至于如何能减少图片请求，不外乎就是减少实际图片的数量和代码的编写质量。 我们可以把一些不经常变动的框架图片由原来分割成的多张小图合并
2007-09-29 09:44:00
1972
原创 形如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
原创 伪类:first-child的测试
first-child其实是一个很好的东西，只是IE一直不支持，不知道是出于什么考虑的，有点无聊。 还记得极遥远的时候，这个问题是xiaoming同学问的。如何在不动原来的代码情况下，只弄个外部css来改变某块东东里面的第一个元素的样式。很自然，这个问题一下就会让人想到用:first-child，只不过万恶的ie不支持，只能用js或expression了。由于FF，Opera，Mozi
2007-09-29 09:42:00
515
原创 总结基本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
原创 如何对select元素中的选项进行逻辑分组
不知道大家有没有这样的感觉，在select选项足够多的时候，被select中的选项弄得头昏眼花，想要找一个自己想要的选项实在是太困难了。其实是可以对select里面的选项进行逻辑分组的。可以想象得到，如果对select的选项进行了分组，这对于有大量选项的select肯定是有好处的。至少用户体验会好很多，方便大家，何乐而不为呢？［演示地址：http://www.doyoe.com/m
2007-09-29 09:40:00
1428
原创 用BDO改变文本流方向控制阅读顺序
由于各个国家在阅读顺序上可能存在差异，所以有的时候需要能够控制文本的书写方向，或由左到右，或由右到左。这时我们就可以用BDO这个东东来搞定对文本流方向的控制，要注意的是BDO元素将关闭双向法则并控制阅读顺序，当你使用BDO元素时必需附带DIR标签属性。［演示地址：http://www.doyoe.com/model/dhtml/example/bdo.htm］XHTML： "h
2007-09-29 09:39:00
594
原创 DIV布局之三行三列之高度自适应补遗
很显然，上篇文章只是在理想范畴内做了三行三列的三列自适应高。对于一般的站点，那样布局设计其实也就可以了，但如果针对的是门户，或者PV超过百万，千万。。。的网站，这样的布局就显得捉襟见肘了。也就是说，在网络环境不变的情况下，我们唯有想办法通过良性的布局和程序来提高页面的执行浏览速度。［演示地址：http://www.doyoe.com/model/xhtmlcss/layout/5.ht
2007-09-29 09:38:00
849
原创 DIV布局之三行三列之高度自适应
写了几篇宽度自适应的布局后，发现很多朋友都对高度自适应十分感兴趣，于是整理了一篇贴了大家参考一下：一般来说一个有好几列的布局，每列的内容都是不固定的，或多或少。所以在做布局的时候一般不会给出每列的定高，但这样做却出现了列与列之间的高度不一致，导致陷入灵活有余而精致欠缺的尴尬。所以设计师们急切的希望能找个一到简单而有效的解决高度自适应的方法，这里只列举一种通过padding及margin
2007-09-29 09:37:00
1157
原创 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
原创 zIndex的几个小小的问题(一)
zIndex在实际应用中很是实用。不过也有些问题需要注意，很容易把头都搞大。当然，其实说什么都是没用滴，先用zIndex做个效果看看再说，首先得知道它都可以胜任哪些东东，这是比较重要的。比如要做一个下面的扑克牌堆叠的效果，这是非常简单的。扑克牌图片网上随便找就可以了，或者直接拿下面的这几张。效果如下图：［演示地址：http://www.doyoe.com/model/xht
2007-09-29 09:34:00
2020
原创 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
823
原创 AccessKey在web的作用性
AccessKey是一个非常有意思的东东，不过在web中会去使用AccessKey的人应该不多。因为长久以来就只有少部分人会用它在web中定义快捷键，而浏览者在潜移默化之下也都习惯了“蹂躏”鼠标；浏览者一习惯了点鼠标，在web用AccessKey的人就更少了。不知道这长长的一句有没有语法错误，我自己都被绕进去了-_-!!!缩下句就是：AccessKey虽然有趣，但使用的人不多。 使用Acces
2007-09-29 09:32:00
1915
1
原创 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
原创 DIV布局之三行三列左右两栏固定中间自适应
忙了2个星期，终于有时间整理出下面这篇文章了，呵呵。这个布局其实是在之前两个layout上的一个延伸，做了之前两个，再做一个这样的layout应该不会有什么问题滴，手法都差不多。要使宽度会自适应，顾名思义，就是宽度是不固定的，随外容器变化而变化。而在使用div布局上，就有这么一个优点，div是自动适应容器宽度的。而我们这里要注意的问题仅仅是如何让左右两栏始终固定在原位置，简单点的方法当
2007-09-29 09:30:00
2510
2
原创 DIV布局之三行两列右栏宽度固定左栏宽度自适应
和前一篇文章一样，只是这次调换了个位置。把之前的左栏固定变为了现在的右栏固定，实现的手法也是大同小异，不过有一个地方需要注意。那就是在写HTML时，应该把右边的先写，然后再写左边。因为DIV的默认样式是block，每个div都会自动断行。如果先写左边，再写右边的话，因为左边没有float漂浮，右边的会在右部断行；所以编写时，先写右边，再写左边，右边是float的。［演示地址：http:
2007-09-29 09:29:00
1153
原创 DIV布局之三行两列左栏宽度固定右栏宽度自适应
在用DIV布局时，总会碰到各种各样的问题，有些还非常怪异，总之让人头大。不过当你找到了窍门，你就会把它当作是一门艺术来看待了，真的非常有趣。现在先来谈谈关于三行两列的布局［左栏固定，右栏自适应宽度］之一，我能想到比较好的办法是使用margin漂浮法。先说说要做成这件事，要做些什么，会碰到些什么问题。要让右栏自适应宽度，也就是说随着浏览器分辨率的不同而发生相应变化。同时左栏又如何做到固定在某
2007-09-29 09:27:00
2045
1
原创 使用LABEL增强你的页面体验
今天浏览aoao（嗷嗷）的网站时，无意发现aoao呼吁大家要给checkbox及radio配个老婆（LABEL），仔细看了一下，发现这样做确实很有必要。虽然我一直都有给它们配“老婆”，但确实没做到aoao这样来倡议大家都这么做，先自己汗一个-_-!! 在现如今WEB都以用户体验作为一个重要的指标来看待，是很有道理的。相信每个网友在浏览页面时，都希望有最IN的体验。 现在我们就来
2007-09-29 09:11:00
688
原创 完整点击区域滑动门菜单
最近，网上已有越来越多的滑动门菜单样式。可谓五花八门，让人眼花缭乱。今日闲来无事，也写了一个，仅供参考。 这里比较重要是链接区域的宽要能自适应，防止有的链接字多，有的链接字少，造成不可意料的维护麻烦。 ［演示地址：http://www.doyoe.com/model/xhtmlcss/menu/menu2/1.htm］输出效果：.dymenu
2007-09-29 09:09:00
1113
原创 如何让DIV在内容不固定的情况下宽度刚好显示完内容
一般来说，TABLE默认情况下，TD的宽度会随着内容的变化而变化，而且宽度为内容的实际宽度，这样省去了很多容器自适应宽度的代码。由于DIV是block级别元素，DIV的默认宽度是100%的浏览器分辨率宽度。所以在DIV里面的内容不够多时，会有一大段留白：引用代码：测试DIV自适应宽度为正好能显示完内容输出效果：测试DIV自适应宽度为正好能显示完内容由以上的效果我们看到，确实
2007-09-29 09:07:00
2344
原创 图片在已固定宽度的DIV及TABLE中自适应
有一定web的经验的人都会了解，在固定的DIV或表格里放一张大过其宽高的图片，DIV或TABLE就会被图片撑开，使得原本精心布置好的页面被弄得一团糟。现在有一张200*200px的图片，我们将其放在宽定义为150px的容器里［红色代表容器的边框］，演示如下：引用代码： 效果如下：上面的效果就是正常情况下会出现的，我们发现这张图片仍是以本身大小显示的，而它的容器则被撑大了
2007-09-29 08:54:00
1808
CSS参考手册v3.4.0（飘零雾雨版）
2012-02-28
飘零雾雨版 CSS参考手册v3.2.0
2011-12-08
飘零雾雨版 CSS参考手册v3.1.0
2011-10-13
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人