小繁的Blog » web standards

文档标记—引用

under web standards- 学习笔记 2008-07-29 am

在HTML Mastery中介绍了HTML两种不同的引用标记
一种是块级引用标记<blockquote>,另一种是内联引用标记<q>.
块引用<blockquote>,它会对文本进行缩进,现在常被人们用来做缩排文本,而非是做为有实际意义的引用容器,
<blockquote>中的cite属性通常用来设置URL形式的推荐引用的来源.在firefox中右键选择属性可以在弹出的窗口
中看到引用信息.在其他浏览器中这种信息被忽略了.
对于内联引用<q>因为各浏览器对<q>特性的支持不一直没有推荐使用.

Continue to Read

CSS解决未知高度垂直居中

under web standards 2008-03-23 pm

原文标题：Vertical Centering in CSS
副标题：Yuhu’s Definitive Solution with Unknown Height
尽管有CSS的vertical-align特性，但是并不能有效解决未知高度的垂直居中问题（在一个DIV标签里有未知高度的文本或图片的情况下）。
标准浏览器如Mozilla, Opera, Safari等.，可将父级元素显示方式设定为TABLE(display: table;) ，内部子元素定为table-cell (display: table-cell),通过vertical-align特性使其垂直居中，但非标准浏览器是不支持的。
非标准浏览器只能在子元素里设距顶部50%，里面再套个元素距顶部-50% 来抵消。
CSS
body {padding: 0; margin: 0;}
body,html{height: 100%;}
#outer {height: 100%; overflow: hidden; position: relative;width: 100%; background:ivory;}
#outer[id] {display: table; position: static;}
#middle {position: absolute; top: 50%;} /* for explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; [...]

Continue to Read

2

CSS完全工具手册

under web standards 2008-01-31 pm

小雕那里抢来的很方便,很实用.
用户界面

I Like Your Color
输入URL然后它会抓出其中的颜色并用16进制表示。
CSS Multi-element Rollover Generator
使用CSS和一个图片创建出一个翻转按钮的样式。
CSS Rounded Box Generator
Ruthsarian Layouts
6个CSS页面布局模板，包括颜色、标题等。
Bluerobot Layout Reservoir
2栏和3栏的CSS布局框架
Glish CSS Layout techniques
2、3、 4栏的CSS布局框架
The Layout-o-matic
输入页宽、栏数和padding，它会自动生成CSS和HTML的布局框架。
Little Boxes
w3cn.org上提供的那些布局模板
Open Source Web Design
各种免费的完整页面模板
Web Builders’ Toolkit
更多的模版资源
Iconico Online CSS Scrollbar Color Changer
List-u-Like
一个CSS菜单生成器：轻松创建采用li并兼容各种浏览器的导航菜单。

Tags:css

Continue to Read

4

web标准中的一些问题(二)

under web standards 2008-01-17 am

转载请注明出处
四;关于ie6的高度自适应问题。内容超出高度的时候，对于ff and ie7来说，实现自适应问题之需要设置 height:auto或者min-height=value; 但是在ie6中是无法识别他们的。
针对ie7,ff，ie6中自适应高度，最好的做法是设置min-height和利用cssHack设置height。例如： min-height:600px; _height:600px; ie7,ff中可以识别的min-height，但无法识别_height，ie6会忽略“_”继续读取得。这里的_height:600px;对于ie6中当内容超过了600像素时，由于设置了height，可以使ie自动的拥有布局，适应内容进行扩展。虽然有些时候是不希望ie去自动的扩展适应内容的。
另一种方法可以定义height:100%,同样解决了ie6中高度自适应问题.
默认拥有布局的元素
* [html], [body] * [table], [tr], [th], [td] * [img] * [hr] * [input], [select], [textarea], [button] * [iframe], , [object], [applet] * [marquee] 关于haslayout

Tags:web problem

Continue to Read

2

web标准中的一些问题(一)

under web standards 2008-01-13 pm

转载请注明出处
一；a的样式问题
有时候会出现访问过hover样式后就不能在出现（ff，ie中都出现的），在精通ccs中介绍过一个链接样式的书写顺序LoVe:HAte;L-link,V-visited,H-hover,A-active;关于书写顺序狐狸再他站立介绍了css hack写法中介绍了关于
区别FF，IE7，IE6：
background:orange;*background:green !important;*background:blue;他的书写顺序ff,ie7,ie6.
二；关于ie6的双倍空白边bug
ie6中，在解析块状元素时对水平外边距magrin存在外边距加倍的问题。
例body {padding:0;
margin:0;
}
div{
float:left;
margin:10px;
width:100px;
height:100px;
border:1px solid red;
}
<div>
<a href=”#”>
小繁的Blog,小繁的Blog，小繁的Blog，小繁的Blog，小繁的Blog，小繁的Blog，小繁的Blog，小繁的Blog，小繁的Blog，小繁的Blog，小繁的Blog，小繁的Blog，小繁的Blog，小繁的Blog</a>
</div>
只需添加：display:inline; （并非将元素转为inline）
关于inline元素的一些特点：
在没有将inline元素浮动的情况下其高度和宽度是不能被改变的，
垂直的外边距,只是根据内容的宽度和高度适应大小。
inline元素如果添加float ，其默认会将inline转为block元素。因为