2007-05-31
De L'amour Le Mieux
2007-05-17
如今，许多网站上都会用到统计表，于是我们需要为它们制作一些漂亮的图片来呈现，自然而然又想利用最少的带宽和最简单的标记。在把这些图片放到网页上的方法，一个是插入图片，一个是背景图片。
插入图片的代码固然简单，但是没有语义，跨平台的展示性并不强。那么背景图片呢，在更加没有语义的同时我们还要面临背景图片的两个问题：1.并非所有浏览器的默认设置是可以打印背景图片 2.用户不能复制图片中的数据到word文档或者outlook等其它编辑器。当然，我们可以告诉用户更改浏览器的打印设置，令其可以打印背景图片，但是要求用户这样做明显不是个好主意。接下来，我要介绍是另外一种方法，与以上两种方法完全不同哦～
什么是图表？
举个例子吧，比如：一个网站每月的浏览次数统计。我们需要画出一张下面这样的图表：
插入图片的代码固然简单，但是没有语义，跨平台的展示性并不强。那么背景图片呢，在更加没有语义的同时我们还要面临背景图片的两个问题：1.并非所有浏览器的默认设置是可以打印背景图片 2.用户不能复制图片中的数据到word文档或者outlook等其它编辑器。当然，我们可以告诉用户更改浏览器的打印设置，令其可以打印背景图片，但是要求用户这样做明显不是个好主意。接下来，我要介绍是另外一种方法，与以上两种方法完全不同哦～
什么是图表？
举个例子吧，比如：一个网站每月的浏览次数统计。我们需要画出一张下面这样的图表：
2007-04-06
别再说DIV＋CSS了！- [CSS]
从业三年来，不断听人说CSS＋DIV，甚至有些公司的招聘广告也是要求应聘者会“DIV+CSS”,这说法令人实在是受不了了。其实我也知道，说这话的人真正的意图是想说标准化网页制作。每当认识的人在我面前把这两个词强行组合在一起说出来的时候我都会马上给予纠正和解释。今天无意中去看蓝色的帖子，一楼一楼还是说的让人受不了的“CSS＋DIV”，忍不住给re了一下。
标准化网页制作，是用xhtml代码结合CSS样式表来书写网页。Div只是xhtml代码中的一个没有语义的标签而已，纯粹Div＋Css制作的网页那不是符合...
标准化网页制作，是用xhtml代码结合CSS样式表来书写网页。Div只是xhtml代码中的一个没有语义的标签而已，纯粹Div＋Css制作的网页那不是符合...
2007-03-08
今天是三八妇女节，祝天下所有女性同胞们节日快乐！
昨天下班前收到旧同事提醒：
三八节到了，要告诉女同胞们正确使用男人：有才华的当顾问，长的帅的当情人，挣钱多的当相公，顾家的做替补，有出息的玩偶遇，会浪漫的一夜情，靠的住的做知己，智商高的当孩他爸…
早上一上班就收到同事的祝福：
祝我们这些...
昨天下班前收到旧同事提醒：
三八节到了，要告诉女同胞们正确使用男人：有才华的当顾问，长的帅的当情人，挣钱多的当相公，顾家的做替补，有出息的玩偶遇，会浪漫的一夜情，靠的住的做知己，智商高的当孩他爸…
早上一上班就收到同事的祝福：
祝我们这些...
2007-03-01
[原]css技巧：清除浮动- [CSS]
当我们自豪地甩开table布局方式时，css+xhtml的布局也常常令我们苦恼不已。经典的3像素问题，莫名其妙的高度没有自适应等等，都是源于css里的float！
我聪明可爱的同行们一般都是在容纳了浮动对象的容器内最后放一个空的div，给其设置属性为clear:both。这样一来确实解决了不少讨厌的浮动问题，但是想想看，我们做标准是为了什么？一个空的div，浪费代码不说，还没有任何语义！
几个月前我终于找到一套纯css方法，不需要在xhtml代码里添加任何无用代码。废话不多说...
我聪明可爱的同行们一般都是在容纳了浮动对象的容器内最后放一个空的div，给其设置属性为clear:both。这样一来确实解决了不少讨厌的浮动问题，但是想想看，我们做标准是为了什么？一个空的div，浪费代码不说，还没有任何语义！
几个月前我终于找到一套纯css方法，不需要在xhtml代码里添加任何无用代码。废话不多说...
2006-11-05
iframe背景透明- []
1. 包含框架页：
<body bgColor="#eeeeee">
<iframe allowTransparency="true" src="kuangjia.htm">
</iframe> 2.被框架页kuangjia.htm：
<body bgColor="transparent">
2006-11-02
更具亲和力的表单结构- []
前段写过一篇更人性化的交互表单表现形式，今天再来推荐一款更具亲和力的表单结构。其好处在于：1.标签语义化增强。2.用户体验更好。
好处1的解释：充分运用xhtml固有标签label，将“用户名”、“密码”、“重复密码”等字符放进label标签里，令其具备语义。
好处2的解释：给label赋予for属性，并给后面的input赋予相同的id，用户在点击label里的文字时，对应的input被激活，变得可输入。
废话少说，代码贴上：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Form demo</title>
<style type="text/css">
<!--
body {
font-family: Arial, Helvetica, sans-serif;
font-size:12px;
color:#666666;
background:#fff;
text-align:center;}
* {
margin:0;
padding:0;
}
a {
color:#1E7ACE;
text-decoration:none;
}
a:hover {
color:#000;
text-decoration:underline;
}
h3 {
font-size:14px;
font-weight:bold;
}
pre,p {
color:#1E7ACE;
margin:4px;
}
input, select,textarea {
padding:1px;
margin:2px;
font-size:11px;
}
.buttom{
padding:1px 10px;
font-size:12px;
border:1px #1E7ACE solid;
background:#D0F0FF;
}
#formwrapper {
width:450px;
margin:15px auto;
padding:20px;
text-align:left;
border:1px solid #A4CDF2;
}
fieldset {
padding:10px;
margin-top:5px;
border:1px solid #A4CDF2;
background:#fff;
}
fieldset legend {
color:#1E7ACE;
font-weight:bold;
padding:3px 20px 3px 20px;
border:1px solid #A4CDF2;
background:#fff;
}
fieldset label {
float:left;
width:120px;
text-align:right;
padding:4px;
margin:1px;
}
fieldset div {
clear:left;
margin-bottom:2px;
}
.enter{ text-align:center;}
.clear {
clear:both;
}
-->
</style>
</head>
<body>
<div id="formwrapper">
<h3>已注册用户登录</h3>
<form action="" method="post" name="apLogin" id="apLogin">
<fieldset>
<legend>用户登录</legend>
<div>
<label for="Name">用户名</label>
<input type="text" name="Name" id="Name" size="18" maxlength="30" /><br />
</div>
<div>
<label for="password">密码</label>
<input type="password" name="password" id="password" size="18" maxlength="15" /><br />
</div>
<div class="cookiechk">
<label><input type="checkbox" name="CookieYN" id="CookieYN" value="1" /> <a href="#" title="选择是否记录您的信息">记住我</a></label>
<input name="login791" type="submit" class="buttom" value="登录" />
</div>
<div class="forgotpass"><a href="#">您忘记密码?</a></div>
</fieldset>
</form><br />
<h3>未注册创建帐户</h3>
<form action="" method="post" name="apForm" id="apForm">
<fieldset>
<legend>用户注册</legend>
<p><strong>您的电子邮箱不会被公布出去,但是必须填写.</strong> 在您注册之前请先认真阅读服务条款.</p>
<div>
<label for="Name">用户名</label>
<input type="text" name="Name" id="Name" value="" size="20" maxlength="30" />
*(最多30个字符)<br />
</div>
<div>
<label for="Email">电子邮箱</label>
<input type="text" name="Email" id="Email" value="" size="20" maxlength="150" /> *<br />
</div>
<div>
<label for="password">密码</label>
<input type="password" name="password" id="password" size="18" maxlength="15" />
*(最多15个字符)<br />
</div>
<div>
<label for="confirm_password">重复密码</label>
<input type="password" name="confirm_password" id="confirm_password" size="18" maxlength="15" />
*<br />
</div>
<div>
<label for="AgreeToTerms">同意服务条款</label>
<input type="checkbox" name="AgreeToTerms" id="AgreeToTerms" value="1" />
<a href="#" title="您是否同意服务条款">先看看条款？</a> * </div>
<div class="enter">
<input name="create791" type="submit" class="buttom" value="提交" />
<input name="Submit" type="reset" class="buttom" value="重置" />
</div>
<p><strong>* 在提交您的注册信息时, 我们认为您已经同意了我们的服务条款.<br />
* 这些条款可能在未经您同意的时候进行修改.</strong></p>
</fieldset>
</form>
</div>
</body>
</html>
2006-09-20
[原]暂住证——飘在北京- []
昨天就想写一篇关于北京暂住证的文章，有人戏称“良民证”。然而回到家身心俱乏，做完第二天中午的便当，就坐着就不想动了，也不愿意去思考，暂住证，很令人恶心烦恼的话题。从公司到家，需要步行40分钟。我比很多人幸福，因为我不需要挤地铁挤公交车。租住的房子离公司比较近，步行就可以了。我坚持步行，一是为健康，二是为安全。每天有十多个小时困在电脑前，没有运动的机会，走路对我来说是唯一的锻炼。本来也想买辆自行车，顾虑再三，没有买。原因一：北京这地方，谁没丢过车那才叫稀奇。原因二：交通混乱，明哲保身。从家到公司那段路可谓错综复杂，即使70度的转角处也看不到那边来车了没有，有一片绿色植物在那里挡着，而且那个立交桥下的路口没有红绿灯，没有人行横道。为保全自己，只能步行。
话题转到暂住证上来。昨天看到一篇新闻，北京清查出租房房客无暂住证房东将受罚。在北京混了快三年时间，从未办过暂住证，对此物也是深恶痛绝。如老罗所说，我在我自己祖国的领土上居住，凭什么要我暂住？我不暂住，我要永久地住！城里人，乡下人，城市户口，农村户口。。为什么要把好好的公民分等级，我安安静静地活着，承受着这个社会的种种压力，恭恭敬敬做我的好公民，恭恭敬敬纳税，你凭什么非要我暂住？在北京租房本身就是件难事，要躲开奸炸的中介，若碰上难缠刻薄的房东，那房子就住不踏实。就像我这房子，说是有冰箱，却不敢用，索性自己拿了封条给封起来。那冰箱不知道是什么年代的古董，就怕一用就坏，坏了房东正好赖上你，说你给用坏了，得给他修好。所以，干脆不用。菜每天买新鲜的，剩菜倒掉。就这房子，还说是家电齐全！房租当然不会少，二环边上的房子，有过北京租房经历的人都知道房价。
从即日起，出租房房主如没与房客签订“治安责任保证书”，将被处以房屋月租金10倍以下罚款；外地房客如没办暂住证，需立即退房，房主需交纳月租金5倍以下罚款。
我是老实人，你不查，我本本分分地活着，你一查，我慌了。万一要我立即退房怎么办？带着那么多家当行李，我上哪儿安身？好歹也算是个都市白领，却要落得无处栖身？何况我刚刚交了三个月房租，血汗钱，就这么没了？这是什么世道？不是早说暂住证要取消了么？于是，到处查资料，打电话，暂住证要怎么办理，公司不给代办，只说可以开证明，打到派出所去问，说必须房主身份证复印件和房契。天，我们那破房主，他肯把身份证复印件和房契提供给我们才怪呢。而派出所在回答我问题的同时也将我的住址进行了备案。这样一来，不办也得办，人家知根知底，随时查上门来。真后悔自己怎么就缺一根筋，人家一问，就说了。得，拖着吧，无路可走。不信真能把我们赶出去。
公司邮件说可以办北京工作居住证，一看条件傻眼了：本科学历，要学位证书，职称证书，拉倒吧，俺没上过大学。还有个什么北京市人才引进，硕士以上文凭，见鬼去吧。
晚上跟朋友倒苦水，朋友笑说：我们去美国吧。我说，怎么去啊，没有那些鬼证件，你根本出不了国门！其实我真正向往的是能在澳大利亚某草原上有一片自己的牧场，过着人人平等与世无争的日子。
2006-09-18
JS耍宝一- []
本想来一例CSS耍宝二，看到这个js效果实在很酷，忍不住要拿出来与大家分享：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><!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" xml:lang="zh-CN" lang="zh-CN">
<title>用层模拟的小窗口(可拖动展合)</title>
<meta http-equiv=Content-Type content="text/html; charset=gb2312" />
<style type="text/css">
body {
font-size: 12px
}
a:visited {
color: slategray; text-decoration: none
}
a:hover {
color: slategray; text-decoration: underline
}
alink {
color: slategray; text-decoration: none
}
</style>
<script type="text/javascript">
<!--
//可以打包为js文件;
var x0=0,y0=0,x1=0,y1=0;
var offx=6,offy=6;
var moveable=false;
var hover='orange',normal='#336699';//color;
var index=10000;//z-index;
//开始拖动;
function startDrag(obj)
{
if(event.button==1)
{
//锁定标题栏;
obj.setCapture();
//定义对象;
var win = obj.parentNode;
var sha = win.nextSibling;
//记录鼠标和层位置;
x0 = event.clientX;
y0 = event.clientY;
x1 = parseInt(win.style.left);
y1 = parseInt(win.style.top);
//记录颜色;
normal = obj.style.backgroundColor;
//改变风格;
obj.style.backgroundColor = hover;
win.style.borderColor = hover;
obj.nextSibling.style.color = hover;
sha.style.left = x1 + offx;
sha.style.top = y1 + offy;
moveable = true;
}
}
//拖动;
function drag(obj)
{
if(moveable)
{
var win = obj.parentNode;
var sha = win.nextSibling;
win.style.left = x1 + event.clientX - x0;
win.style.top = y1 + event.clientY - y0;
sha.style.left = parseInt(win.style.left) + offx;
sha.style.top = parseInt(win.style.top) + offy;
}
}
//停止拖动;
function stopDrag(obj)
{
if(moveable)
{
var win = obj.parentNode;
var sha = win.nextSibling;
var msg = obj.nextSibling;
win.style.borderColor = normal;
obj.style.backgroundColor = normal;
msg.style.color = normal;
sha.style.left = obj.parentNode.style.left;
sha.style.top = obj.parentNode.style.top;
obj.releaseCapture();
moveable = false;
}
}
//获得焦点;
function getFocus(obj)
{
if(obj.style.zIndex!=index)
{
index = index + 2;
var idx = index;
obj.style.zIndex=idx;
obj.nextSibling.style.zIndex=idx-1;
}
}
//最小化;
function min(obj)
{
var win = obj.parentNode.parentNode;
var sha = win.nextSibling;
var tit = obj.parentNode;
var msg = tit.nextSibling;
var *** = msg.style.display=="none";
if(***)
{
win.style.height = parseInt(msg.style.height) + parseInt(tit.style.height) + 2*2;
sha.style.height = win.style.height;
msg.style.display = "block";
obj.innerHTML = "0";
}
else
{
win.style.height = parseInt(tit.style.height) + 2*2;
sha.style.height = win.style.height;
obj.innerHTML = "2";
msg.style.display = "none";
}
}
//创建一个对象;
function xWin(id,w,h,l,t,tit,msg)
{
index = index+2;
this.id = id;
this.width = w;
this.height = h;
this.left = l;
this.top = t;
this.zIndex = index;
this.title = tit;
this.message = msg;
this.obj = null;
this.bulid = bulid;
this.bulid();
}
//初始化;
function bulid()
{
var str = ""
+ "<div id=xMsg" + this.id + " "
+ "style='"
+ "z-index:" + this.zIndex + ";"
+ "width:" + this.width + ";"
+ "height:" + this.height + ";"
+ "left:" + this.left + ";"
+ "top:" + this.top + ";"
+ "background-color:" + normal + ";"
+ "color:" + normal + ";"
+ "font-size:8pt;"
+ "font-family:Tahoma;"
+ "position:absolute;"
+ "cursor:default;"
+ "border:2px solid " + normal + ";"
+ "' "
+ "onmousedown='getFocus(this)'>"
+ "<div "
+ "style='"
+ "background-color:" + normal + ";"
+ "width:" + (this.width-2*2) + ";"
+ "height:20;"
+ "color:white;"
+ "' "
+ "onmousedown='startDrag(this)' "
+ "onmouseup='stopDrag(this)' "
+ "onmousemove='drag(this)' "
+ "ondblclick='min(this.childNodes[1])'"
+ ">"
+ "<span style='width:" + (this.width-2*12-4) + ";padding-left:3px;'>" + this.title + "</span>"
+ "<span style='width:12; border-width:0px;color:white;font-family:webdings; ' onclick='min(this)'>0</span>"
+ "<span style='width:12; border-width:0px; color:white;font-family:webdings; ' onclick='ShowHide(\""+this.id+"\",null)'>r</span>"
+ "</div>"
+ "<div style='"
+ "width:100%;"
+ "height:" + (this.height-20-4) + ";"
+ "background-color:white;"
+ "line-height:14px;"
+ "word-break:break-all;"
+ "padding:3px;"
+ "'>" + this.message + "</div>"
+ "</div>"
+ "<div id=xMsg" + this.id + "bg style='"
+ "width:" + this.width + ";"
+ "height:" + this.height + ";"
+ "top:" + this.top + ";"
+ "left:" + this.left + ";"
+ "z-index:" + (this.zIndex-1) + ";"
+ "position:absolute;"
+ "background-color:black;"
+ "filter:alpha(opacity=40);"
+ "'></div>";
document.body.insertAdjacentHTML("beforeEnd",str);
}
//显示隐藏窗口
function ShowHide(id,dis){
var bdisplay = (dis==null)?((document.getElementById("xMsg"+id).style.display=="")?"none":""):dis
document.getElementById("xMsg"+id).style.display = bdisplay;
document.getElementById("xMsg"+id+"bg").style.display = bdisplay;
}
//modify by haiwa @ 2005-7-14
//
//-->
</script><script type="text/javascript">
<!--
function initialize()
{
var a = new xWin("1",160,200,200,200,"窗口1","这效果是不是很酷呢？");
var b = new xWin("2",240,200,100,100,"窗口2","呵呵，鼠标上来点一下看看啊");
var c = new xWin("3",200,160,250,50,"窗口3","每一个都可以随意拖动哦～");
ShowHide("1","none");//隐藏窗口1
}
window.onload = initialize;
//-->
</script>
</head>
<body oncontextmenu="return false" onselectstart="return false">
<a onclick="ShowHide('1',null);return false;" href="#">窗口1</a>
<a onclick="ShowHide('2',null);return false;" href="#">窗口2</a>
<a onclick="ShowHide('3',null);return false;" href="#/">窗口3</a>
</body>
</html>
2006-09-14
CSS耍宝一- []
我的学习日志，从今天开始，每日一宝，请各位监督。下面来第一宝，从jscode搞来的代码和图片链接:-)
<!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>
<style>
body{ font-size:12px; line-height:22px;}
a{text-decoration:none;color:#ff0;font-weight:bold;text-align:center;line-height:100px;font-size:18px;}
#info span{position:absolute;width:523px;height:275px;top:115px; left:10px;background: url(http://www.jscode.cn/Uploadfile/200682485616973.GIF); visibility: hidden;}
a:link,a:visited{cursor: default;}
a:active,a:hover{cursor:auto;}
#hi{visibility: hidden; height:1px; overflow:hidden;}
#w01 a:hover span,#w02 a:active span{background-position: 0px 0px; visibility: visible;}
#w02 a:hover span,#w03 a:active span{background-position: 0px -275px; visibility: visible;}
#w03 a:hover span,#w04 a:active span{background-position: 0px -550px;visibility: visible; }
#w04 a:hover span,#w05 a:active span{background-position: 0px -825px; visibility: visible;}
#w05 a:hover span,#w06 a:active span{background-position: 0px -1100px; visibility: visible;}
#w06 a:hover span,#w07 a:active span{background-position: 0px -1375px; visibility: visible;}
#w07 a:hover span,#w08 a:active span{background-position: 0px -1650px; visibility: visible;}
#w08 a:hover span,#w09 a:active span{background-position: 0px -1925px; visibility: visible;}
#w09 a:hover span,#w10 a:active span{background-position: 0px -2200px; visibility: visible;}
#w10 a:hover span,#w11 a:active span{background-position: 0px -2475px; visibility: visible;}
#w11 a:hover span,#w12 a:active span{background-position: 0px -2750px; visibility: visible;}
#w12 a:hover span,#w13 a:active span{background-position: 0px -3025px;visibility: visible; }
#info a{width:44px; height:100px;display:block; background:#0cf; float:left;}
</style>
</head>
<body>
<div id="info">
<div id="w01"><a href="http://www.jscode.cn" target="_blank">鼠<span></span></a></div>
<div id="w02"><a href="http://www.jscode.cn" target="_blank">标<span></span></a></div>
<div id="w03"><a href="http://www.jscode.cn" target="_blank">上<span></span></a></div>
<div id="w04"><a href="http://www.jscode.cn" target="_blank">来<span></span></a></div>
<div id="w05"><a href="http://www.jscode.cn" target="_blank">从<span></span></a></div>
<div id="w06"><a href="http://www.jscode.cn" target="_blank">左<span></span></a></div>
<div id="w07"><a href="http://www.jscode.cn" target="_blank">到<span></span></a></div>
<div id="w08"><a href="http://www.jscode.cn" target="_blank">右<span></span></a></div>
<div id="w09"><a href="http://www.jscode.cn" target="_blank">来<span></span></a></div>
<div id="w10"><a href="http://www.jscode.cn" target="_blank">回<span></span></a></div>
<div id="w11"><a href="http://www.jscode.cn" target="_blank">划<span></span></a></div>
<div id="w12"><a href="http://www.jscode.cn" target="_blank">吧<span></span></a></div>
</div>
<div id="hi"><img src="http://www.jscode.cn/Uploadfile/200682485616973.GIF" alt="" /></div>
</body>
</html>
