DOMtab的基本使用方法以及下载地址和完整演示

一.什么是DOMtab
DOMtab是一个用javascipt制作的通用可扩展的tab切换显示隐藏内容快的web控件。

二.怎么使用DOMtab
1.在页面的区域加上

2.在页面主体的部分加上

Proof 1

Test to prove that more than one menu is possible

back to menu

Proof 2

Test to prove that more than one menu is possible

back to menu

[… and so on …]

继续阅读“DOMtab的基本使用方法以及下载地址和完整演示”

短小精悍的 form代码

国外的一片文章,用css定义form但是里面几乎就是用了最精悍的代码

html





CSS

label,input {
display: block;
width: 150px;
float: left;
margin-bottom: 10px;
}

label {
text-align: right;
width: 75px;
padding-right: 20px;
}

br {
clear: left;
}

把label,input用float:left定义成一行,然后距离下面10px,lable单独定义边距和文字并复写宽度,最后用br{clear:left}来换行

原文地址:http://www.quirksmode.org/css/forms.html

import css OR link css

css在页面里面一般有三种引入方式
1.在页面里面直接写


2.用link进行引用

3.用import进行引用

第一种是直接在html页面上进行css书写,而第二种和第三种是采用外部引用样式单独提取文件。
问题1.到底link和@import有什么区别?
我们先来看看他们的定义
继续阅读“import css OR link css”

破解UX Magazine的自适应屏幕的三列和两列

UX Magazine.com是2006年度首届css大赛的冠军网站,呵呵既然是冠军网站肯定有他自己的特点
和得到冠军的法宝,其中一个就是采用了宽平和窄屏的两种不同显示模式,在屏幕>1024的时候采用
三列,当屏幕<1024的时候采用两列,而且设计的巧妙在于如果你不仔细观察根本发现不了它细节
上的变化,可以说利用了巧妙的css技巧让,让宽平和窄屏幕的用户都可以很好的浏览网站内容。

那么下面我们就来分析分析他是怎么做的,先来看看首页的源代码。(非常的整洁和干净)
先看头部找到关键部分:


………… …………….




………………….


…………………..


从上面的代码可以看出,整个页面引用了四个主要css:
1.uxm.base.css是整个页面的基础样式;
继续阅读“破解UX Magazine的自适应屏幕的三列和两列”

破解淘宝菜单

呵呵为什么又来一个破解,为什么是淘宝菜单,因为taobao上面的菜单,可以说是中国第一个大型网站采用css做的滑动门菜单,二来
滑动门有一弱点就是会产生选中链接的虚线线框偏移,而淘宝的菜单是没有虚线框的,哈哈至于怎么做到的我们会在下面分析:

好了长话段说我们先打开taobao的首页看看找到如下代码:

很标准的滑动门菜单结构,至于真正的滑动门菜单技术我们这里不详细介绍,如果你不是很了解的话,可以去看《CSS中的滑动门技术》,我们在查找一下菜单的css
继续阅读“破解淘宝菜单”

ie7下的图像自适应大小

今天在更改lbs在ie7下小图片出现滚动条bug的时候发现一个有趣的事情,
ie7在我修正bug测试的时候竟然发现在ie7下图片竟然可以自动适应屏幕大小,我查看了一下代码


img{
vertical-align: middle;
border: 0px none;
max-width:100%;
height:auto;
}

发现是定义了一个max-width:100%;在firefox下就支持max-width
的,ie7下也开始支持max-width和max-min了,怪不得可以根据屏幕自适应大小呢。
另外补充一下,设置的时候要max-width:100%;height:auto;都要写上,如果只写
max-width:100%;的话在ie7是可以等比例缩放的,但是在firefox下就不能等比例缩放
加上height:auto的话,在ie7和fierfox下就都可以实现自适应容器大小,并且等比例
缩放了