IT博客-2013-随笔分类-Web Standardshttp://www.cnitblog.com/2013/category/1978.htmlzh-cnMon, 26 Sep 2011 21:17:20 GMTMon, 26 Sep 2011 21:17:20 GMT60CSS position:fixed; for IE6http://www.cnitblog.com/2013/archive/2006/03/04/7169.html2013抽屉2013抽屉Sat, 04 Mar 2006 02:20:00 GMThttp://www.cnitblog.com/2013/archive/2006/03/04/7169.htmlhttp://www.cnitblog.com/2013/comments/7169.htmlhttp://www.cnitblog.com/2013/archive/2006/03/04/7169.html#Feedback1http://www.cnitblog.com/2013/comments/commentRss/7169.htmlhttp://www.cnitblog.com/2013/services/trackbacks/7169.html阅读全文

2013抽屉 2006-03-04 10:20 发表评论
]]>根据浏览器和分辨率不同自动调用样式表http://www.cnitblog.com/2013/archive/2006/03/03/7139.html2013抽屉2013抽屉Fri, 03 Mar 2006 08:07:00 GMThttp://www.cnitblog.com/2013/archive/2006/03/03/7139.htmlhttp://www.cnitblog.com/2013/comments/7139.htmlhttp://www.cnitblog.com/2013/archive/2006/03/03/7139.html#Feedback0http://www.cnitblog.com/2013/comments/commentRss/7139.htmlhttp://www.cnitblog.com/2013/services/trackbacks/7139.html<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码</title>
<link href="" rel="stylesheet" type="text/css" />
<script language="jscript">
if (window.navigator.userAgent.indexOf("MSIE")>=1)
{
var IE1024="style1.css";
var IE800="style2.css";
var IE1152="css1.css";
var IEother="css1.css";
ScreenWidth(IE1024,IE800,IE1152,IEother)
}else{
if (window.navigator.userAgent.indexOf("Firefox")>=1)
{
//如果浏览器为Firefox
var Firefox1024="style1";
var Firefox800="style2.css";
var Firefox1152="css1.css";
var Firefoxother="css1.css";
ScreenWidth(Firefox1024,Firefox800,Firefox1152,Firefoxother)
}else{
//如果浏览器为其他
var Other1024="css1.css";
var Other800="css1.css";
var Other1152="css1.css";
var Otherother="css1.css";
ScreenWidth(Other1024,Other800,Other1152,Otherother)
}
}
function ScreenWidth(CSS1,CSS2,CSS3,CSS4){
if ((screen.width == 1024) && (screen.height == 768)){
setActiveStyleSheet(CSS1);
}else{
if ((screen.width == 800) && (screen.height == 600)){
setActiveStyleSheet(CSS2);
}else{
if ((screen.width == 1152) && (screen.height == 864)){
setActiveStyleSheet(CSS3);
}else{
setActiveStyleSheet(CSS4);
}}}
}
function setActiveStyleSheet(title){document.getElementsByTagName("link")[0].href=""+title;}
</script>
</head>
<body>
</body>
</html> 
解释：

var IE1024="";
var IE800="";
var IE1152="";
var IEother="";
引号里面分别填写，用户使用IE的时候并且分辨率为1024*768,800*600,1152*864要使用的css文件名.

var Firefox1024="";
var Firefox800="";
var Firefox1152="";
var Firefoxother="";
引号里面分别填写，用户使用FF的时候并且分辨率为1024*768,800*600,1152*864要使用的css文件名.

var Other1024="";
var Other800="";
var Other1152="";
var Otherother="";
引号里面分别填写，用户使用其他浏览器的时候并且分辨率为1024*768,800*600,1152*864要使用的css文件名.

关键代码：

1.<link href="" rel="stylesheet" type="text/css" />注意连接为空。
2. document.getElementsByTagName("link")[0].href=""+title; 其中href中为样式表的位置，本文用了同级所以没有写。
3.本文只用了两个样式，定义了不同背景色以示区别不同。

2013抽屉 2006-03-03 16:07 发表评论
]]>CSS 良好交互的基础http://www.cnitblog.com/2013/archive/2006/03/03/7136.html2013抽屉2013抽屉Fri, 03 Mar 2006 08:02:00 GMThttp://www.cnitblog.com/2013/archive/2006/03/03/7136.htmlhttp://www.cnitblog.com/2013/comments/7136.htmlhttp://www.cnitblog.com/2013/archive/2006/03/03/7136.html#Feedback0http://www.cnitblog.com/2013/comments/commentRss/7136.htmlhttp://www.cnitblog.com/2013/services/trackbacks/7136.html
第一条就是我原先提到的，先有了成品的客户确认的精确的设计以后，再去建构css。这样，可以减少你大量的不必要的返工。不要只有设计毛胚，就贸然开始css设计。在设计pure css的网站的时候，心里一定要有明确的模块化的概念。根据laytou和function做模块化的设定。

第二条也是我现在遵循的，很有必要的一条原则。良好组织的css文档和详细又明了的注释。在团队协调和以后自我修改的时候也可以节约大量的沟通和再回忆、解读的时间。不要把css的设定都放在一个css文件里面。我现在一般通用的做法是，一个portal css文件作为入口，把其他的css按照不同的功能放在不同的css文件里面，portal css文件import.比如fonts.css专门负责字体设定。themes.css专门负责主题类相关的设定，还有print.css, forms.css,layout.css等等不同的功能css。

第三条是不断的学习新的css技术和概念。多研究其他优秀的purecss站点。理解他们的应用原则。慢慢自己的css设计也会得心应手。

2013抽屉 2006-03-03 16:02 发表评论
]]>让文本或图片在div容器中垂直居中http://www.cnitblog.com/2013/archive/2006/02/25/6931.html2013抽屉2013抽屉Sat, 25 Feb 2006 02:36:00 GMThttp://www.cnitblog.com/2013/archive/2006/02/25/6931.htmlhttp://www.cnitblog.com/2013/comments/6931.htmlhttp://www.cnitblog.com/2013/archive/2006/02/25/6931.html#Feedback0http://www.cnitblog.com/2013/comments/commentRss/6931.htmlhttp://www.cnitblog.com/2013/services/trackbacks/6931.html
<div id="outer">
  <div id="middle">
    <div id="inner">
      any text
      any height
      any content, for example generated from DB
      everything is vertically centered
    </div>
  </div>
</div>

样式表:

<style type="text/css">
#outer {height: 400px; overflow: hidden; position: relative;}
#outer[id] {display: table; position: static;}

#middle {position: absolute; top: 50%;} /* for explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; position: static;}

#inner {position: relative; top: -50%} /* for explorer only */
/* optional: #inner[id] {position: static;} */
</style>


2013抽屉 2006-02-25 10:36 发表评论
]]>小型网站css标准写法http://www.cnitblog.com/2013/archive/2006/02/23/6878.html2013抽屉2013抽屉Thu, 23 Feb 2006 05:36:00 GMThttp://www.cnitblog.com/2013/archive/2006/02/23/6878.htmlhttp://www.cnitblog.com/2013/comments/6878.htmlhttp://www.cnitblog.com/2013/archive/2006/02/23/6878.html#Feedback0http://www.cnitblog.com/2013/comments/commentRss/6878.htmlhttp://www.cnitblog.com/2013/services/trackbacks/6878.html/*文件信息，分别为标题、作者、URL、描述、创建日期、最后修改日期- -

Title : 
Author : 
URL : 

Description : 

Created : 
Modified : 

- - - - - - - - - - - - - - - - - - - - - */

/* ----- CSS ----- */

*{}    
html{}    
body{}

/* ----- IDS ----- */

#container{}    
#primaryContent{}    
#secondaryContent{}    
#navigation{}    
#footer{}

/* ----- CLASSES 类----- */

.hide{}
.show{}

/* ----- HEADINGS 标题----- */

h1{}
h2{}
h3{}
h4{}

/* ----- PARAGRAPHS 段落----- */

p{}
#primaryContent p{}
#secondaryContent p{}

/* ----- QUOTES 引用----- */

blockquote{}
blockquote p{}
cite{}
blockquote cite{}

/* ----- CODE 代码----- */

pre{}
code{}
p code{}
pre code{}

/* ----- LISTS 列表----- */

li{}
li p{}
ol{}
ul{}
ol li{}
ul li{}

#navigation li{}

#navigation ul{}

#navigation ul li{}

#navigation ol{}

#navigation ol li{}

/* ----- IMAGES 图像----- */

img{}
img a{}
img a:hover{}

/* ----- BREAK 断行----- */

hr{}

/* ----- TEXT FORMATTING 文本格式----- */

strong{}
em{}
b{}
i{}

/* ----- LINKS 连接----- */

a{}
a:hover{}
a:visited, a:active, a:focus{}
a:visited{}
a:active{}
a:focus{}

p a{}
cite a{}
li a{}
dt a{}
dd a{}

/* ----- TABLES 表格----- */

table{}
caption{}
thead{}
tbody{}
tfoot{}
tr{}
tr .alt{}
th{}
td{}

/* ----- FORMS 表单----- */

form{}
fieldset{}
legend{}
label{}
input{}
textarea{}
input, textarea{}
select{}
optgroup{}
option{}

/* ----- DEFINITIONS 自定义列表----- */

dl{}
dt{}
dd{}

2013抽屉 2006-02-23 13:36 发表评论
]]>target="_blank"不符合标准的变通解决方法，使用JShttp://www.cnitblog.com/2013/archive/2006/02/23/6866.html2013抽屉2013抽屉Thu, 23 Feb 2006 01:58:00 GMThttp://www.cnitblog.com/2013/archive/2006/02/23/6866.htmlhttp://www.cnitblog.com/2013/comments/6866.htmlhttp://www.cnitblog.com/2013/archive/2006/02/23/6866.html#Feedback0http://www.cnitblog.com/2013/comments/commentRss/6866.htmlhttp://www.cnitblog.com/2013/services/trackbacks/6866.html
<a href="document.html" target="_blank">external link</a>

改为运用rel属性:

<a href="document.html" rel="external">external link</a>

function externalLinks() {
if (!document.getElementsByTagName) return;
var anchors = document.getElementsByTagName("a");
for (var i=0; i<anchors.length; i++) {
var anchor = anchors[i];
if (anchor.getAttribute("href") &&
anchor.getAttribute("rel") == "external")
anchor.target = "_blank";
}
}
window.onload = externalLinks; 


2013抽屉 2006-02-23 09:58 发表评论
]]>完整xhtml的结构标签http://www.cnitblog.com/2013/archive/2006/02/23/6865.html2013抽屉2013抽屉Thu, 23 Feb 2006 01:55:00 GMThttp://www.cnitblog.com/2013/archive/2006/02/23/6865.htmlhttp://www.cnitblog.com/2013/comments/6865.htmlhttp://www.cnitblog.com/2013/archive/2006/02/23/6865.html#Feedback0http://www.cnitblog.com/2013/comments/commentRss/6865.htmlhttp://www.cnitblog.com/2013/services/trackbacks/6865.html结构
body, head, html, title
文本
abbr, acronym, address, blockquote, br, cite, code, dfn, div, em, h1, h2, h3, h4, h5, h6, kbd, p, pre, q, samp, span, strong, var
链接
a
列表
dl, dt, dd, ol, ul, li
表单
form, input, label, select, option, textarea
表格
caption, table, td, th, tr
图片
img
对象
object, param
meta
meta
外部调用
link
基本
base

xhtml不鼓励使用的标签

能通过过渡定义的标签，但通不过严格定义。
<font> 文字的外观，大小和颜色（Defines the font face, size, and color of text）
<u> 文本下划线（Defines underlined text）
<center> 句中对齐（Defines centered text）
<s> 删除线（Defines strikethrough text）
<strike> 删除线（Defines strikethrough text）
<noframes> 无视框时的内容（Defines a noframe section）
<iframe> 定义嵌入视图（Defines an inline sub window (frame)）
<isindex> 不建议使用（可搜寻，使用input代替）（Deprecated. Defines a single-line input field. Use <input> instead）
<dir> 目录式列举（Defines a directory list）
<menu> 菜单列表（Defines a menu list）
<basefont /> 定义基本字体（Defines a base font）
<applet> 定义java程序（Defines an applet）

能通过框架定义验证，不鼓励使用
<frame> 定义个别视框（Defines a sub window (a frame)）
<frameset> 视框格式总定义（Defines a set of frames）

2013抽屉 2006-02-23 09:55 发表评论
]]>动态更改CSS-换肤技术http://www.cnitblog.com/2013/archive/2006/02/23/6864.html2013抽屉2013抽屉Thu, 23 Feb 2006 01:51:00 GMThttp://www.cnitblog.com/2013/archive/2006/02/23/6864.htmlhttp://www.cnitblog.com/2013/comments/6864.htmlhttp://www.cnitblog.com/2013/archive/2006/02/23/6864.html#Feedback0http://www.cnitblog.com/2013/comments/commentRss/6864.htmlhttp://www.cnitblog.com/2013/services/trackbacks/6864.htmlstyleswitcher.js 点击下载
(下载此文件并更名为styleswitcher.js)

引用 head区需要的内容

<link rel="stylesheet" type="text/css" href="paul.css" title="bog standard" />
<link rel="alternate stylesheet" type="text/css" href="paul.css" title="wacky" />
<script type="text/javascript" src="styleswitcher.js"></script>

引用 控制CSS的切换

<a href="#" onclick="setActiveStyleSheet('default');return false;">change style to default</a>
<a href="#" onclick="setActiveStyleSheet('paul');return false;">change style to paul</a>

更改CSS不需要刷新面面，而且还会用cookie保存你的偏好设置

2013抽屉 2006-02-23 09:51 发表评论
]]>