http://www.tohuadesign.cn/blog/ PJBlog3 2011-09-02T11:14:10+08:00 rayson http://www.tohuadesign.cn/blog/ tohua2007@163.com 2011-09-02T11:14:10+08:00 2011-09-02T11:14:10+08:00

.clearfix:after {
          content:"";
          display:block;
          height:0;
          clear:both;
}
.clearfix {
          zoom:1;
}

.length{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}/*控制字数长度*/
.two-lines{overflow:hidden;text-overflow:ellipsis;}/*控制分行字数*/

/*图片居中*/
.img-wh{width:100px;height:100px;}
.img-box{border:1px solid #F1F1F1;text-align:center;overflow:hidden;position:relative;display:table-cell;text-align:center;vertical-align:middle;}
.img-box p{position:static;+position:absolute;top:50%;text-align:center;}
.img-box img{position:static;+position:relative;top:-50%;left:-50%;}

<div class="img-box"><p>图片</p></div>/*样式*/

/*按钮*/
.btn_style a{background:url(../images/btn_bg_left.gif) 0 0;color:#DD4300;text-decoration:none;height:23px;float:left;cursor:hand;margin:0;}
.btn_style a span{background:url(../images/btn_bg_right.gif) no-repeat right 0;margin:0;float:left;height:18px;padding:5px 5px 0 5px;}
.btn_style a:hover{background:url(../images/btn_bg_left.gif) 0 -23px;color:#DD4300;text-decoration:none;}
.btn_style a:hover span{background:url(../images/btn_bg_right.gif) no-repeat right -23px;}

<a href="#"><span>我是普通的按钮</span></a>/*多用于非表单按钮*/

button {position:relative;border:0; padding:0;cursor:pointer;overflow:visible;}
button::-moz-focus-inner {border:none;}
button span {position:relative;display:block; white-space:nowrap;}    
button.submitBtn {padding: 0 10px 0 0;margin-right:5px;font-size:12px;font-weight:bold;text-align:center;background:transparent url(/images/brands/btn-bg.gif) no-repeat right -36px;}
button.submitBtn span {line-height:29px;padding:0 0 0 10px; height:29px; background:transparent url(/images/brands/btn-bg.gif) no-repeat left 0; color:#fff;}

<button><span>我是表单的按钮</span></button>/*多用于表单*/]]>

http://www.tohuadesign.cn/blog/default.asp?id=45 rayson http://www.tohuadesign.cn/blog/ tohua2007@163.com 2009-11-26T10:45:10+08:00 2009-11-26T10:45:10+08:00

1、结尾斜线

用记事本编写代码的时候，我们比较容易忽略结尾斜线之类的东西。比较容易忽略有头部的标签，如：meta,调用外部样式表的link，还有代码中的img标签，这些都是需要结尾斜线的。

2、div标签未关闭

这是版面设计导致验证失败原因的最常见原因之一。经常在编写的时候因为代码的繁多，经常忘记关闭DIV。所以我们在写代码的时候可以同时写上<div></div>后再在标签里写内容代码。这个可以减少失误。

3、图像需要“alt”属性

你可能还没有注意到，图像也是高级验证的潜在绊脚石。除了结尾斜线，高级验证也要求用alt标签来描述图像。
如：<img src="images/pic.jpg" alt="为花网站设计" />
搜索引擎也靠alt标签来识别网页上的图像，所以无论怎样加上alt标签总是好的。

4、未知实体数据

我们在统计代码中含有“&”等符号，是一个影响验证的错误。这个时候我们得用&代替“&”等符号。
还有比如：>用编码表示为& g t ; <用编码表示为& l t ;

5、Align标签

在“align=absmiddle属性通不过w3c验证”中提到过有关align的问题。有的时候习惯在DIV或者图片文字垂直居中对齐中加入align，可以尝试用“float”或者“text-align”等样式来代替align

6、不良嵌套

这里在编写代码时候的错误，比如<strong><div></strong></div>。正确的写法应该是：<div><strong></strong></div>

7、background背景

在使用数据的时候很多人还是习惯用表格，为了界面效果会在表头加入图片，代码为：<td background="images/bg.jpg"></td>
这个也能导致W3C验证失败。会提示：Attribute "background" exists, but can not be used for this element.

以上是工作学习中经常碰到的原因，但是，验证失败的原因还有很多，会在以后的工作学习中不断更新。]]>

http://www.tohuadesign.cn/blog/default.asp?id=44 rayson http://www.tohuadesign.cn/blog/ tohua2007@163.com 2009-11-17T11:08:42+08:00 2009-11-17T11:08:42+08:00

　　在查找中我发现了友情链接合作的两个问题，也是很多新站长在问的问题。一个是找什么样的友情链接合作站点，一个是通过什么样的方式去找。

　　找什么样的友情链接合作站点
　　自己也总结几个特点：内容、质量、数量

　　内容，网站重要的是也是内容了，所以找链接站点内容上要有相同或者相似之处，对于两个内容有一定相同或者相似之处的网站如果交换链接，可以适当增加网站权重，相关网站的相互投票所得分值也会比较高，如果判断大量的链接没有相关性，这种链接对于网站投票分值会起到反作用。

　　质量，很多的人都知道与高质量的网站做链接可以获得更好的反链作用。所以在选择交换链接的网站的时候尽量选择一些高质量的网站，链接向高质量的网站也会提高本站的权重。当然也不是说PR等数据低的站点就不要做了，因为PR等数据不代表一切，如果链接站点的内容等各方面都还不错，有发展的潜质与其做链接也是不错的。不过，切记不要和框架内链接、JS链接、链接工厂以及隐藏链接等进行交换，这个是许多站长都知道的大忌，因为这样反而降低了网站的权重。

　　数量，数量多并不一定好，为了增加网站的反链数量交换了大量无效链接，对网站也不是件好事。而在交换的站点中，尽量不要在外链过多的页面当中做链接，页面的外链接过多会将低投票分值，也会降低网页本身的权重，与这样的页面交换连接，获得的有效分值实在太低。外接不宜多宜精，很多站长都建议外链数控制在10到20个就行了。太多也未必一定有用。

　　通过什么样的方式去找

　　论坛，现在很多论坛都有交换友情链接的版块。不知道是自己不走运还是事实如此，在这样的地方并不能交换到比较好的链接，大多都是些垃圾站。而且很多并不是为了交换友情链接，而是为了增加网站的暴光度，所以这个方法并不是很好。

　　朋友/客户，我觉得这个是最实在也不会挑你毛病的方法，这个时候就是出门靠朋友了。与朋友或者客户的网站做链接是最快完成的。

　　相关站点的链接，这个是我最常用也是比较有效的方法了。在搜索引擎中搜索相关的站点，然后在站点的友情链接中一层层查找，是能找出不少质量不错的网站的，当然对方站点也未必会与你交换，但是只要把自己的网站搞好，提高本身的网站质量我相信很多的站长还是乐意与您合作的。而且与同行业的站点交换友情效果是最好的。

　　BLOG，其实BLOG也是一个不错的方法，在留言或者评论的时候随便把自己的网址带上，而且经常与站长讨论问题，得到外链的同时搞不好还有机会得到一两个志同道合的朋友，那就是一举两得了。

　　还有的方法就是通过QQ群，网址站等方法，其实每个方法都有它的好的一面。只是看自己如何去运用了。

　　友情链接其实并不是网站的全部，当然并不否认友情链接的重要性，但是网站建设重要的是自身网站的建设。如果网站在各方面都不错的话，以上的方法都不用去理会了，因为到时候是别人找你做链接，你来选择了。
　　不过，对待事情的看法就是仁者见仁，智者见智了，毕竟每个人的看法或者出发点都不一样。]]>

http://www.tohuadesign.cn/blog/default.asp?id=43 rayson http://www.tohuadesign.cn/blog/ tohua2007@163.com 2009-11-10T14:24:01+08:00 2009-11-10T14:24:01+08:00

例如：
<div><img align="absmiddle" src="/images/test.gif"  />图片文字垂直居中对齐</div>

但自从引入W3C标准后，align=absmiddle属性在W3C验证下通不过。
因此，我们考虑可以用CSS的style="vertical-align:middle;"来代替IMG的align=absmiddle属性来实现垂直居中。

<div><img style="vertical-align:middle;" src="/images/test.gif"  />图片文字垂直居中对齐</div>

用CSS控制与直接用align=absmiddle代码控制图片文字垂直居中对齐区别不大，CSS实现的稍微靠上了一些，不过CSS控制比较方便。]]>

http://www.tohuadesign.cn/blog/default.asp?id=42 rayson http://www.tohuadesign.cn/blog/ tohua2007@163.com 2009-11-03T10:16:25+08:00 2009-11-03T10:16:25+08:00

但现在，当网页头部包含W3C标准代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">时，使用style="overflow:hidden"隐藏滚动条会失效，因为它不符合W3C标准。

解决办法一：
使用CSS
<style type="text/css">
html {overflow-x: hidden;}
</style>

解决办法二：
使用javascript来隐藏滚动条
<script language="javascript">document.documentElement.style.overflow="hidden";
</script>]]>

http://www.tohuadesign.cn/blog/default.asp?id=41 rayson http://www.tohuadesign.cn/blog/ tohua2007@163.com 2009-10-21T14:02:14+08:00 2009-10-21T14:02:14+08:00

　　1、让更多的人了解企业
　　网络是不分地域、不分国别的，只要企业把自己的网站放到互联网上，全世界任何人，只要知道了企业的网址，无论在任何一个地方，都能通过互联网了解访问到企业的网站。拥有自己的网站，是一种趋势，也是一种必要。

　　2、更大程度的反应企业信息
　　企业网站容量更大，企业可以把企业自身的所有内容放入网站。如：可以把企业信息(如：公司简介、公司理念等)、产品及企业的动态等信息放到企业网站上，让客户或者潜在客户及时的了解企业的基本情况。并且可以以文字，图片，声音，视频等多种方式同时传播，更好的体现企业及产品。

　　3、可以降低费用
　　对于企业来说，每年的通迅费用，都是一笔不小的开支。在这种情况下，象很多大的公司，已经把服务手册，常见问题解答等通过网站发布，让客户通过网站找到自己的答案。如有必要，客户还可以通过网站留言本或者电子邮件留下问题，网站管理人员会及时解答。这解决了时差，地域的限制，在一定程度上能节约了大量的资源与费。

　　4、可以利用网站及时得到客户反馈的信息
　　要留住老客户有时比开发新客户还要难。因此，建立一个畅通的信息交流通道，及时发布信息、解答问题、提供帮助是客户关系中最重要的方式之一]]>

http://www.tohuadesign.cn/blog/default.asp?id=40 rayson http://www.tohuadesign.cn/blog/ tohua2007@163.com 2009-10-21T14:01:02+08:00 2009-10-21T14:01:02+08:00

　　在以往的工作中，相信每一个设计人员都会碰到过许多这样的事情，在做网站的时候，许多的客户会说这个网站怎么样怎么样的漂亮，这个功能怎么样好，然后是这个功能我也要，那个界面我也要，到了最后想法又一变再变，网站一改再改……最后网站“四不像”，想想这样的想法真可悲。
　　建网站，绝不能持着“人有我有”的心态，关键是结合企业自身的实际情况，能为客户提供什么的功能，什么样的服务才是重点。能帮助企业节省工作流程提高工作效率，能为企业带来真正的价值，才是建网站的目的。当然，这样并不是说明界面不重要，而是结合企业自身的理念及特点，做出符合自己的网站。]]>

http://www.tohuadesign.cn/blog/default.asp?id=39 rayson http://www.tohuadesign.cn/blog/ tohua2007@163.com 2009-08-21T15:37:05+08:00 2009-08-21T15:37:05+08:00

JS部分：

function show1(ta,tb,tt)
{
  for (i=1;i<=tb;i++)
  {
    if (tt==i)
    {
      document.getElementById(ta+"1"+tt).style.display="block";
      document.getElementById(ta+"0"+tt).className="c2";
    }
    else
    {
      document.getElementById(ta+"1"+i).style.display="none";
      document.getElementById(ta+"0"+i).className="c1";
    }
  }
}



HTML部分：

HTML代码部分需要注意的是，调用的外部JS要放在
<script language=javascript>
show1('a',4,1);
show1('q',3,1);
</script>
这一段代码的上边。

如下代码所示

<link href="css.css" rel="stylesheet" type="text/css" />
<script src="tag.js"></script>
<div id="a01" onmouseover="show1('a',4,1);">11111</div>
<div id="a02" onmouseover="show1('a',4,2);">22222</div>
<div id="a03" onmouseover="show1('a',4,3);">33333</div>
<div id="a04" onmouseover="show1('a',4,4);">44444</div>
<div id="a11">11111</div>
<div id="a12">22222</div>
<div id="a13">33333</div>
<div id="a14">44444</div>
<div id="q01" onmouseover="show1('q',3,1);" style="margin-top:15px;">aaaaa</div>
<div id="q02" onmouseover="show1('q',3,2);">bbbbb</div>
<div id="q03" onmouseover="show1('q',3,3);">ccccc</div>
<div id="q11">aaaaa</div>
<div id="q12">bbbbb</div>
<div id="q13">ccccc</div>
<script language=javascript>
show1('a',4,1);
show1('q',3,1);
</script>]]>

http://www.tohuadesign.cn/blog/default.asp?id=36 admin http://www.tohuadesign.cn/blog/ tohua2007@163.com 2009-08-12T14:06:56+08:00 2009-08-12T14:06:56+08:00

1、图片经过效果：
<img src="images/menu_01.gif" width="105" height="35" border="0" onmouseover="this.src='images/menuo_01.gif'" onmouseout="this.src='images/menu_01.gif'" />

2、下拉列表选择跳转：
<select name="select" onchange='if (this.value!="")document.location.href=this.value;'>
              <option>产品服务快速通道</option>
              <option>生活手机</option>
              <option>生活手机</option>
            </select>

3、文本框点击时文字消失，失去焦点时文字出现

<script language="JavaScript" type="text/javascript">
   function addListener(element,e,fn){    
        if(element.addEventListener){    
             element.addEventListener(e,fn,false);    
         } else {    
             element.attachEvent("on" + e,fn);    
          }    
   }
   var myinput = document.getElementById("myinput");
   addListener(myinput,"click",function(){
    if (myinput.value=="请输入您的ID") myinput.value = "";
   })
   addListener(myinput,"blur",function(){
    if (myinput.value=="") myinput.value = "请输入您的ID";
   })
</script>

在input中加入ID：
<input type="text" value="请输入您的ID" id="myinput" />

4、地址栏添加小图标
<link rel="SHORTCUT ICON" href="您的网址/favicon.ico"> 　
<link rel="BOOKMARK" href="您的网址/favicon.ico"> ]]>

http://www.tohuadesign.cn/blog/default.asp?id=34 admin http://www.tohuadesign.cn/blog/ tohua2007@163.com 2009-08-12T11:22:52+08:00 2009-08-12T11:22:52+08:00

一、常见问题

1、div标签未关闭

　这是书写代码是最为常见的一种错误了。特别是记事本书写习惯的设计师，在未关闭的情况下记事本的不会提示你什么，如果是在DW中，未关闭DIV，开始的DIV会显示灰色，即无效。

2、DOCTYPE声明

　　不声明DOCTYPE，或者在文件开始错误声明DOCTYPE，也是一个常见错误。根据一般经验，Strict DOCTYPE是大家追求的最高级验证。Strict validation表明你的网页能够在所有浏览器上都得到最佳展示。
　　

3、结尾斜线

　　结尾斜线也是造成页面失效比较常见的原因。我们很容易忽略结尾斜线之类的东西，特别是在image标签等元素中。在严格的DOCTYPE中这是无效的。要在img标签结尾处加上“/”以解决此问题。
　　

4、图像alt属性

　　你可能还没有注意到，图像也是高级验证的潜在绊脚石。除了结尾斜线，高级验证也要求用alt标签来描述图像，如alt="收藏生活，享受生活"。搜索引擎也靠alt标签来识别网页上的图像，所以无论怎样加上alt标签总是好的。

5、未知实体数据

　　实体数据是又一个影响验证的易犯错误。我们可以考虑用适当的编码字符来代替“&”等符号。entire list中列出在XHTML版块设计中可用的适当的编码字符实体数据。

6、不良嵌套

嵌套就是元素里又包括元素，如下所示：
我们容易混淆嵌套元素的顺序。例如在div标签前启动strong标签，但又先关闭div标签。这可能不会改变版块布局，但却会使你的版块设计失效。

7、float元素的宽度之和要小于100%

    如果float元素的宽度之和正好是100%，某些古老的浏览器将不能正常显示。因此请保证宽度之和小于99%。


]]>

http://www.tohuadesign.cn/blog/default.asp?id=33