innerHTML:设置或获取位于对象起始和结束标签内的 HTML

scrollHeight: 获取对象的滚动高度。

scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离

scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离

scrollWidth:获取对象的滚动宽度

offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度

offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置

offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置

offsetWidth:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度

DIV + JS 图片上无缝滚动

<style type="text/css">
<!--
#demo {
background: #FFF;
overflow:hidden;
border: 1px dashed #CCC;
height: 100px;
text-align: center;
float: left;
}
#demo img {
border: 3px solid #F2F2F2;
display: block;
}
-->
</style>
向上滚动
<div id="demo">
<div id="demo1">
<a href="#"><img src="upload/2010/9/201009011433483370.gif" border="0" /></a>
<a href="#"><img src="upload/2010/9/201009011433483370.gif" border="0" /></a>
<a href="#"><img src="upload/2010/9/201009011433483370.gif" border="0" /></a>
<a href="#"><img src="upload/2010/9/201009011433483370.gif" border="0" /></a>
<a href="#"><img src="upload/2010/9/201009011433483370.gif" border="0" /></a>
</div>
<div id="demo2"></div>
</div>
<script>
<!--
var speed=10; //数字越大速度越慢
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
tab2.innerHTML=tab1.innerHTML; //克隆demo1为demo2
function Marquee(){
if(tab2.offsetTop-tab.scrollTop<=0)//当滚动至demo1与demo2交界时
tab.scrollTop-=tab1.offsetHeight //demo跳到最顶端
else{
tab.scrollTop++
}
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};//鼠标移上时清除定时器达到滚动停止的目的
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};//鼠标移开时重设定时器
-->
</script>

DIV + CSS + JS图片下无缝滚动

<style type="text/css">
<!--
#demo {
background: #FFF;
overflow:hidden;
border: 1px dashed #CCC;
height: 100px;
text-align: center;
float: left;
}
#demo img {
border: 3px solid #F2F2F2;
display: block;
}
-->
</style>

向下滚动
<div id="demo">
<div id="demo1">
<a href="#"><img src="upload/2010/9/201009011433483370.gif" border="0" /></a>
<a href="#"><img src="upload/2010/9/201009011433483370.gif" border="0" /></a>
<a href="#"><img src="upload/2010/9/201009011433483370.gif" border="0" /></a>
<a href="#"><img src="upload/2010/9/201009011433483370.gif" border="0" /></a>
<a href="#"><img src="upload/2010/9/201009011433483370.gif" border="0" /></a>
</div>
<div id="demo2"></div>
</div>
<script>
<!--
var speed=10; //数字越大速度越慢
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
tab2.innerHTML=tab1.innerHTML; //克隆demo1为demo2
tab.scrollTop=tab.scrollHeight
function Marquee(){
if(tab1.offsetTop-tab.scrollTop>=0)//当滚动至demo1与demo2交界时
tab.scrollTop+=tab2.offsetHeight //demo跳到最顶端
else{
tab.scrollTop--
}
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};//鼠标移上时清除定时器达到滚动停止的目的
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};//鼠标移开时重设定时器
-->
</script>

DIV + CSS + JS图片左无缝滚动

<style type="text/css">
<!--
#demo {
background: #FFF;
overflow:hidden;
border: 1px dashed #CCC;
width: 500px;
}
#demo img {
border: 3px solid #F2F2F2;
}
#indemo {
float: left;
width: 800%;
}
#demo1 {
float: left;
}
#demo2 {
float: left;
}
-->
</style>
向左滚动
<div id="demo">
<div id="indemo">
<div id="demo1">
<a href="#"><img src="upload/2010/9/201009011433483370.gif" border="0" /></a>
<a href="#"><img src="upload/2010/9/201009011433483370.gif" border="0" /></a>
<a href="#"><img src="upload/2010/9/201009011433483370.gif" border="0" /></a>
<a href="#"><img src="upload/2010/9/201009011433483370.gif" border="0" /></a>
<a href="#"><img src="upload/2010/9/201009011433483370.gif" border="0" /></a>
<a href="#"><img src="upload/2010/9/201009011433483370.gif" border="0" /></a>
</div>
<div id="demo2"></div>
</div>
</div>
<script>
<!--
var speed=10; //数字越大速度越慢
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
tab2.innerHTML=tab1.innerHTML;
function Marquee(){
if(tab2.offsetWidth-tab.scrollLeft<=0)
tab.scrollLeft-=tab1.offsetWidth
else{
tab.scrollLeft++;
}
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
-->
</script>

DIV + JS图片右无缝滚动

<style type="text/css">
<!--
#demo {
background: #FFF;
overflow:hidden;
border: 1px dashed #CCC;
width: 500px;
}
#demo img {
border: 3px solid #F2F2F2;
}
#indemo {
float: left;
width: 800%;
}
#demo1 {
float: left;
}
#demo2 {
float: left;
}
-->
</style>
向右滚动
<div id="demo">
<div id="indemo">
<div id="demo1">
<a href="#"><img src="upload/2010/9/201009011433483370.gif" border="0" /></a>
<a href="#"><img src="upload/2010/9/201009011433483370.gif" border="0" /></a>
<a href="#"><img src="upload/2010/9/201009011433483370.gif" border="0" /></a>
<a href="#"><img src="upload/2010/9/201009011433483370.gif" border="0" /></a>
<a href="#"><img src="upload/2010/9/201009011433483370.gif" border="0" /></a>
<a href="#"><img src="upload/2010/9/201009011433483370.gif" border="0" /></a>
</div>
<div id="demo2"></div>
</div>
</div>
<script>
<!--
var speed=10; //数字越大速度越慢
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
tab2.innerHTML=tab1.innerHTML;
function Marquee(){
if(tab.scrollLeft<=0)
tab.scrollLeft+=tab2.offsetWidth
else{
tab.scrollLeft--
}
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
-->
</script>

在网页制作过程中常常会用到以其他形式代替链接的方式，但如果只是按常理加代码的话在FF下是不支持手型链接样式的，
cursor:hand只支持IE，
支持IE FF的样式如下，
cursor:pointer这样两个浏览就通用了

<script language=JavaScript>
var elady_step=3; //1:small, 3:middle, 5:big
var elady_speed=50; //20:fast, 50:middle, 80:slow
var e_tp=new Array();
var e_tplink=new Array();
var adNum_elady1=0; 
var elady_stop_sh=0;
var elady_star_sh=1;

function elady1_moveImg(){
if ((!document.all&&!document.getElementById)||(elady_stop_sh==0)) return;
if (elady_star_sh==1){
 document.all.elady1_divimg.style.pixelTop=parseInt(document.all.elady1_divimg.style.pixelTop)+elady_step;}
else if (elady_star_sh==2){
 document.all.elady1_divimg.style.pixelLeft=parseInt(document.all.elady1_divimg.style.pixelLeft)+elady_step;}
else if (elady_star_sh==3){
 document.all.elady1_divimg.style.pixelTop=parseInt(document.all.elady1_divimg.style.pixelTop)-elady_step;}
else{
 document.all.elady1_divimg.style.pixelLeft=parseInt(document.all.elady1_divimg.style.pixelLeft)-elady_step;}
if (elady_star_sh<4) elady_star_sh++;
else elady_star_sh=1;
setTimeout("elady1_moveImg()",elady_speed);}

e_tplink[0]="#";
e_tp[0]="images/1.JPG";

e_tplink[1]="#";
e_tp[1]="images/2.JPG";

e_tplink[2]="#";
e_tp[2]="images/3.JPG";

e_tplink[3]="#";
e_tp[3]="images/4.JPG";

var currentimage=new Array();  
for (i=0;i<=3;i++){currentimage[i]=new Image();
      currentimage[i].src=e_tp[i];
         }
         function elady1_set(){   if (document.all)
         {      e_tprotator.filters.revealTrans.Transition=Math.floor(Math.random()*23);
               e_tprotator.filters.revealTrans.apply();   }
               }
               function elady1_playCo()
               {   if (document.all)      e_tprotator.filters.revealTrans.play()
               }function elady1_nextAd(){   if(adNum_elady1<e_tp.length-1)adNum_elady1++ ;
                     else adNum_elady1=0;
                        elady1_set();
                           document.images.e_tprotator.src=e_tp[adNum_elady1];
                              elady1_playCo();
                                 theTimer=setTimeout("elady1_nextAd()", 4000);}
                                 function elady1_linkurl(){   jumpUrl=e_tplink[adNum_elady1];
                                    jumpTarget='_blank';
                                       if (jumpUrl != ''){      if (jumpTarget != '')window.open(jumpUrl,jumpTarget);
                                             else location.href=jumpUrl;
                                                }}
function elady1_listMsg()
{   status=e_tplink[adNum_elady1];
document.returnValue = true;}
window.onload=elady1_nextAd;
document.write("<div id='elady1_divimg' style='position:relative'>");
document.write('<a onMouseOver="elady1_listMsg();return document.returnValue" target="_self">');
document.write('<img style="FILTER: revealTrans(duration=2,transition=20)" height=342 src="" width=707 border=0 name=e_tprotator ></a>');
document.write("</div>");
    </script>

要想用比较个性的字体就比较麻烦了，因为你不能保证客户端是否支持这种字体，常用的方法是用Photoshop把文字制作成图片。

为了让网页设计更加灵活，Google从2010年5月19日启动了网页在线字体服务，并一口气发布了十八字体族。但与 Monotype Web Fonts、FontShop 等字体商不同，Google 这次开放的字体与它其他很多服务一样，完全免费。

Google 目前提供的字体共有十八种，均为目前比较流行的免费字体，包括为 Android 而开发的 Droid 系列，被称为“Fonts for Scholars”的 Cardo，为代码印刷而设计的 Inconsolata，业余之作而不胫走红的 Yanone Kaffeesatz 等等，其中最能引人注目的是字体师 John Fell 设计的 IM Fell 字体。

我想每个网页设计师都会觉得这是个好消息，又一个来自Google的福音吧！

想使用它们吗？使用这些字体无需付费，也不必注册，只需要做简单的几步，举个例子，如果你想在你的网页中使用“Tangerine”这种字体：

1.在网页头部加入代码

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">

2.在你的CSS样式表中加入

body { font-family: 'Tangerine', serif; font-size: 48px; }

（注：这是让页面所有元素的字体都变成Tangerine，如果只想局部Tangerine字体只要改变CSS选择器就可以了！）

3.刷新查看效果！

好了简单吗？

如果想详细的了解Google在线字体的话，请到官方主页http://code.google.com/webfonts

详细使用方法http://code.google.com/apis/webfonts/docs/getting_started.html

2.Google网页目录收录* http://directory.google.com/Top/World/Chinese_Simplified/

3.百度搜索网站登陆* http://www.baidu.com/search/url_submit.html

4.搜搜搜索引擎：网站登录* http://www.soso.com/help/usb/urlsubmit.shtml

5.hao123网址之家网站登陆* http://221.12.147.30/url_submit.php   

                                                     http://post.baidu.com/f?kw=hao123

6.搜狐/搜狗网站登陆* http://www.sogou.com/feedback/urlfeedback.php

7.爱问搜索网站登陆* http://iask.com/guest/add_url.php

8.中国雅虎网站登陆*http://search.help.cn.yahoo.com/h4_4.html

9.网易有道搜索网站登陆* http://tellbot.yodao.com/report?keyFrom=help

10.Yahoo网站登陆* http://submit.search.yahoo.com/free/request/

11.中国搜索网站登陆* http://ads.zhongsou.com/register/page.jsp

12.有道搜索网站登陆* http://tellbot.yodao.com/report

13.TOM搜索网站登陆* http://search.tom.com/tools/weblog/log.php

14.北都网址大全登陆* http://www.beidu.org

15.英文yahoo网站登陆* http://siteexplorer.search.yahoo.com/submit

16.微软bing搜索网站登陆* http://cn.bing.com/docs/submit.aspx

17.alltheweb网站登陆* http://www.alltheweb.com/help/webmaster/submit_site

18.altavista网站登陆* http://www.altavista.com

19.DMOZ中文网站登陆* http://www.dmoz.org/World/Chinese_Simplified/

对于div,p等块级元素

　　正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行：

html<div id="wrap">正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义</div> 　　css#wrap{white-space:normal; width:200px; }

　　1.(IE浏览器)连续的英文字符和阿拉伯数字,使用word-wrap : break-word ;或者word-break:break-all;实现强制断行

　　#wrap{word-break:break-all; width:200px;}

　　或者

　　#wrap{word-wrap:break-word; width:200px;}

　　<div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>

　　效果：可以实现换行

　　2.(Firefox浏览器)连续的英文字符和阿拉伯数字的断行,Firefox的所有版本的没有解决这个问题,我们只有让超出边界的字符隐藏或者,给容器添加滚动条

　　#wrap{word-break:break-all; width:200px; overflow:auto;}

　　<div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>

　　效果：容器正常，内容隐藏

对于table

　　1. (IE浏览器)使用table-layout:fixed;强制table的宽度,多余内容隐藏

<table style="table-layout:fixed" width="200"> <tr><td>abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss</td></tr></table>

　　效果：隐藏多余内容

　　2.(IE浏览器)使用table-layout:fixed;强制table的宽度,内层td,th采用word-break : break-all;或者word-wrap : break-word ;换行

<table width="200" style="table-layout:fixed;"> <tr><td width="25%" style="word-break : break-all; ">abcdefghigklmnopqrstuvwxyz 1234567890</td><td style="word-wrap : break-word ;">abcdefghigklmnopqrstuvwxyz 1234567890</td></tr></table>

　　效果：可以换行

　　3. (IE浏览器)在td,th中嵌套div,p等采用上面提到的div,p的换行方法

　　4.(Firefox浏览器)使用table-layout:fixed;强制table的宽度,内层td,th采用word-break : break-all;或者word-wrap : break-word ;换行，使用overflow:hidden;隐藏超出内容，这里overflow:auto;无法起作用

<table style="table-layout:fixed" width="200"> <tr><td width="25%" style="word-break : break-all; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890</td><td width="75%" style="word-wrap : break-word; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890</td></tr></table>

　　效果：隐藏多于内容

　　5.(Firefox浏览器)在td,th中嵌套div,p等采用上面提到的对付Firefox的方法运行代码框。最后，这种现象出现的几率很小。

　　绝大多数的网站项目需求设计方案都有一个共通点：设计要求一定要“大气”。

　　“大气”这个原本陌生的词汇渐渐占领了我的设计思路，有种盲从地被强奸的感觉。其实，说实话，如果你让现今的小企业来对你的设计做些要求的话，从专业角度出发，他们可能连一个起码的要求都提不出来。我也曾经试探性地问过一些客户最基本的设计上的需求。比如网站的基本色调之类的，往往得到的答复就是：你们看着办吧，什么颜色好看用什么颜色。这种对自身企业不负责任的回答，难免会在一定程度上影响到设计人员的设计方向。

　　回到文章标题提到的“大气”上来。这个词汇在字典里的具体含义我不清楚，但大多数的企业客户都是义正严词地白纸黑字写在了需求说明里。可能这就是他们在对你的设计效果没有丝毫建设性要求之后，不经大脑思索就硬生生地强加给设计人员的最无理的要求了。但，如何做的大气，他们也拿不定注意的，某些客户可能只是为了掩饰自己的轻浮，而不得不做出的一个颇具风范的补充罢了。

　　对于设计人员来说，“大气”真的是非常头痛的问题。因为“大气”这东西不是说做就能做出来的，这不是一个实际存在的物体，只可意会不可言传。飘朵白云，放个飞机等等只能说明自己的庸俗，更有甚者，万般强调一定要在首页加上企业老总的照片，放上音乐播放器等等，这就是他们心中的“大气”。然而，这些所谓的“大气”并没能增加网站的优势，反而，更凸显了企业的无为。我们此时所要做的就是开导教化，规劝他们千万不要把自己的企业站做成一个娱乐场所，要娱乐，去那些门户网站就够了，他们什么都有，你想不到的都有。但往往这些建议都会被他们抛掷脑后，“我让你怎么做你就怎么做好了，又不会少你一分！”但凡听到类似这样的话的，这个企业绝对不是什么有实力的。做纺织的放个飞机表明自己的高度；做物流的放个唱着交响乐的音乐播放器表明自己深度。。。这样就大气了吗？

　　在网上找到一个这样对商业网站的定义，感觉概括的比较全面：“大气”是指突出要表现的主题,并加以适当的夸张，弱化辅助的图形，减少干扰的元素。同时通过色彩的搭配，元素的使用及比例等，形成考究的视觉中心，把“气”留住，让画面有良好的节奏感。这是一个比较高的境界，需要设计师不断的提高自身的修养与审美意识。

　　对于一个大气的商业网站来说，首先，页面布局设计就是一个非常有学问值得推敲的问题。布局合理有序，突出重点，简洁而不简单；单一而不单调；层次分明；设计元素协调；能更好地满足用户的需求，引导用户方便快捷地实现功能，第一时间找到自己要做的，下一步去哪，当前所在位置等等；给用户一种畅通无阻畅快淋漓的感觉，虽然是第一次访问，但已是似曾相识信手拈来。这样的大气来的更且实际。因为，飞机不会让用户想到你的纺织品有多么的精致，交响乐也不能让用户看到你的物流服务有多好。

　　一个网站就象一个人，合理的信息架构是骨架，丰富生动的信息内容是血肉，而界面是皮肤，贯穿始末的易用性等用户体验是内在的修养气质。这一切相辅相成缺一不可。所以一个有魅力的人其魅力所在绝不仅仅是因为有光鲜夺目的面孔，而更应是举手投足间不经意流露出的内在气质。网站也是如此，如果没有一副好的骨架，没有血肉，徒有一个好外表，最终还是会让人弃若鄙履的，这样又何谈“大气”呢？

　　企业网站不应只是一个光鲜华丽又孤芳自赏的橱窗广告，偶尔引来人驻足却又拉开了距离，让人亲近不得。企业网站更应该象是一个以用户为中心的亲切的便民窗口（像小区里的小卖部，它比市中心的商场超市更能满足周围住户的需求，而且更快速直接），能帮助人理解企业的价值主张，找到所需的产品或服务，建立友好的信任感，并以此为基础实现自身的赢利目标。可用性与赢利能力相结合，并兼顾界面的美观，企业网站建设只有做到了这一切，才能称之为“大气”。

“空间就是要先空出来，然后将好的东西放进去。”崔华峰说

“如果要用一个职业来比较的话，我选择新闻记者。”广州魄信装饰设计公司总设计师曾耀钧如是说。 

设计业界早就流行着一句话：如果你去都没有去过五星级宾馆，你又怎么能够设计出来呢？

永远记住，你是一个懂设计，爱设计的商人。用设计吃饭，你比别人更有资格。

 犹太人认为，拥有积极思想的人，对任何事都抱着乐观的态度，即使遇上挫折，积极者也会认为那是成功前的必经考验。

Ta是一个“学者型设计师”。

去找回 遗失已久 的 素描

艺术是情感传达的载体

一种非常私人的坚持，一路走下去，一定会遇到，属于自己的春天。

“冲动王”说：“将来我的孩子要是去学网页设计我就活活把他掐死”，“胖子”说：“将来我孩子要是不听话我就送他去学网页设计”当然这只是大家的玩笑而已。但是从心底要我选的话，我当然

不会选择让我的孩子去学设计。

鱼缸里的鱼，前途光明永无出路

旧碗，天天捧着用惯了

 这东西太贵重了 我怎么好意思用

光靠木块石头和铁板，人类是没有办法将太空梭送上宇宙的

 心大了事情就小了，心小了事情就大了

半个苹果 比 一个 苹果好吃

 选择的路 就 继续走下去吧 别管以后会怎样

终于知道了鼻子高的唯一好处就是 戴眼镜不容易掉

很多人近了，渐渐的远了。很多人很远，慢慢的近了

如果将人生一分为二， 前半段人生哲学是「不犹豫」，后半段人生哲学是「不后悔」。

 跑得太快，摔一跤，原地耽误大把时间。还不如跑得慢些，步步稳健，而且不会错过路边的风景。

生活在于经历，而不在于平米；

富裕在于感悟，而不在于别墅；

播下一个行动，你将收获一种习惯，播下一个习惯，你将收获一种性格，播下一种性格，你将收获一种命运。

大师的离去 是因为巨作已经完成

大师的来临 是因为巨作需要完成
绘画如同真爱，既使人痛苦又使人快乐，痛并快乐着。

使用DIV+CSS布局,为什么边界margin会在IE6中加倍,而在FF中没有问题
解决方法是多加一个CSS定义：display:inline;

display:inline 的作用是设置对象做为行内元素显示，
inline是内联对象的默认值（ps:内联对象就是不自动产生换行的元素，比如span）
而我们一般用的div是块级元素，默认display属性是block,
但将div的display设置为inline的话，则多个div可以象span一样显示在一行了。

用margin-left:11px !important;margin-left:5px;这样的方法也能结局使用margin时候的浏览器兼容性问题
但是要是margin的距离加倍问题只是在边界的时候才能发生
如果边界div和中间部分的div使用同一个margin样式的话就会出现问题了