<?xml version="1.0" standalone="yes"?>
<?xml-stylesheet type="text/xsl" href="css/rss.xslt"?>
<rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:slash="http://purl.org/rss/1.0/modules/slash/"><channel><title>Dear Minux's Full House - ≮Minux's 网页设计≯</title><link>http://minux.cn/</link><description>每天拥有绿色好心情! - </description><generator>RainbowSoft Studio Z-Blog 1.8 Walle Build 100427</generator><language>zh-CN</language><copyright>Copyright 2003-2009 Minux.cn. Some Rights Reserved.</copyright><pubDate>Tue, 07 Sep 2010 06:48:34 +0800</pubDate><item><title>网易网站设计(思想)</title><author>icoody@gmail.com (minux)</author><link>http://minux.cn/post/506.html</link><pubDate>Sun, 19 Apr 2009 02:02:23 +0800</pubDate><guid>http://minux.cn/post/506.html</guid><description><![CDATA[很多人可能认为门户网站首页设计只是把一些导航、资讯内容和广告堆积起来摆放得好看就可以了，虽然这个观点也并不是完全错误的，确实门户网站首页是由这三方面内容组织而成，但随着互联网的快速发展，用户对访问网站的要求也越来越高，在互联网行业，因为很多东西是免费和相似的，用户转移成本会比较低，在这个网站有的东西去其他网站基本都能找到，只是输入个网址就可以了。网站营运商如果想留住用户和吸引更多的用户浏览自己的网站，那这个时候就是需要提高网站的用户体验来满足用户多方面的需求。 <br/>因此现在门户网站的设计越来越讲究和更为用户着想，最理想的门户网站设计流程需要经历“用户研究-交互设计-视觉设计-可用性测试”这几个步骤，其实有很多门户网站设计也会经历其中一些步骤，只是公司对这方面还没有一个很好的认识，没有一个系统的叫法和详细的职能分工，往往都是一个人身兼多职，大部分都是按个人经验主观判断去决定，没有一些客观的数据支持。例如经常会有一些网站策划者说：我也是网站用户之一，这个功能我没有使用需求，其他用户也应该没有使用需求可以删除。如果这时候有一份客观的使用分析数据就知道用户到底有没有这个需求了。虽然我们不可能全部都需要客观数据去做支持，但起码能以客观数据为基础再延伸到其他设计中。<br/>下面我们从几个方面来分析网易网站的设计思想：<br/><b>一、架构</b><br/>1、网站首页是兵家必争之地，每个频道负责人都想在显眼的位置推荐自己的产品或者资讯来增加曝光率，总是希望把所有东西一下子让用户看到，但最后我们就发现你放的东西越多，用户就根本找不到他想要的东西，快速离开的可能性很大。在国内的门户网站都习惯了资讯多、页面长，什么都往首页堆，感觉内容越多会显的越大气，但用户的耐性是有限的，所以网页的通透性对国内网站很重要，每一屏的架构变化不宜太多，适当就好，主次内容信息位置保持一致性，不然用户每浏览到下一屏都需要重新去解读架构，思考该从那里开始阅读，不但用户的耐性被消耗掉还会增加用户的浏览成本，所以网站首页的架构必须清晰明了，保持较好的通透性，减少用户的浏览成本。<br/>例如网易首页，采用三栏式结构，左栏为导航推荐区提供网易特色产品入口，中栏为主要资讯区，提供快速、全面、动态的各类新闻资讯，右栏为特色栏目区如博客、论坛等。各栏的内容属性清晰，用户能快速找到他们需要的信息畅顺的浏览不需要多余的思考。<br/><img onload="ResizeImage(this,500)" src="http://www.ued163.com/wp-content//upload/2009/03/e7bd91e69893e7bd91e7ab99e8a786e8a789e8b5b0e59091e59bbee589afe69cac2.jpg" alt="" title=""/><br/>据研究分析用户浏览网页的视觉一般是从左到右、从上至下的一个浏览习惯。网易网站的架构也在往这个方向改进，不断的提升用户体验。网易资讯类页面大致可分为3类架构，下图是3类架构的视觉走向图。<br/><img onload="ResizeImage(this,500)" src="http://www.ued163.com/wp-content//upload/2009/03/e7bd91e69893e7bd91e7ab99e8a786e8a789e8b5b0e59091e59bbee589afe69cac1.jpg" alt="" title=""/><br/>网易首页采用第一种架构，各频道首页例如新闻、体育、娱乐等采用第二种架构，新闻最终页采用第三种架构。这样可使用户保持统一的视觉走向，无论浏览那个页面用户都知道他们需要的资讯在那里，符合用户浏览网页的习惯，减少用户浏览成本。<br/><b>二、风格</b><br/>相信多数人都很喜欢apple的产品，为什么apple的产品那么受大众欢迎，除了品牌影响力外，时尚简单的外观设计和界面设计，也是受欢迎的其中原因之一，在apple的产品设计中让人感觉没有多余的东西，每一根线存在都是有意义的。还有在中国的书画史上，有很多艺术境界高远的作品都是少费笔墨却格外传神（如郑燮的竹石、齐翁的墨虾）。虽然网站设计不能称作为一件艺术创作，但用最少的元素设计出最好的作品这个也是网站设计中所追求目标之一。<br/>能用一根线表现出效果就没有必要使用2根线，能用文字表示清楚的就不需要用图片。页面设计如果使用过多装饰元素，会造成页面庞大下载速度缓慢，不要高估网民的耐性，大部分网民都是没有耐性的。浏览大量信息的时候需要一个简洁无阻碍的界面，过多的色彩和装饰反而会分散用户的注意力，影响到用户浏览效果和减少对资讯的点击。网站需要用户看到的是网站提供的信息内容和服务而不是花俏的装饰（个性产品网站除外）。这也是网易门户一直沿用简洁风格原因之一。<br/>例如新改版的网易新闻，打破了以往条条框框的感觉，取消了多余的线框，界面更清晰简洁，资讯内容更突出。<br/><img onload="ResizeImage(this,500)" src="http://www.ued163.com/wp-content//upload/2009/03/e696b0e997bb1.jpg" alt="" title=""/> <br/>列举2个简洁风格做的比较好的外国门户网站<br/><img onload="ResizeImage(this,500)" src="http://www.ued163.com/wp-content//upload/2009/03/e4be8be5ad90.jpg" alt="" title=""/><br/>Yaho新闻使用的是立体效果的设计，time是以线条为主的设计，2者给人感觉是简洁清晰没有多余的东西，既突出了资讯内容又不失美感。<br/>每个门户网站的面向受众都不同，也会造成门户网站的风格定位不一样，例如面向受众年龄层比较年轻的门户网站，在设计风格可能会偏向多色彩多功能，而面向受众年龄层较大的门户网站，在设计风格上就会相反。但不管怎样的设计风格保持清晰方便用户浏览的界面是必要的。<br/><b>三、信息排布</b> <br/>门户网站首页一般都会承载大量的资讯信息，密密麻麻的信息会让用户浏览网页的时候会产生压迫感，如何能让用户顺畅的浏览成为设计中重要的一环。<br/>大家可以对比下面2张信息排布图，信息条数都是相同的但第一张信息排布图会让人感觉信息很清晰。而第2张图会让用户感觉到信息排布有压迫感，可能还没有开始阅读就已经没有耐性了（忠诚度非常高的用户例外，但这类用户毕竟比较少）。所以在信息排布的时候到达一定行数时需要用一些留空做到视觉隔离，让视觉上有透气的感觉。<br/><img onload="ResizeImage(this,500)" src="http://www.ued163.com/wp-content//upload/2009/03/e4bfa1e681afe68e92e5b883.jpg" alt="" title=""/><br/><b><br/>四、视觉顺序</b><br/>每天的新闻会有重点和非重点之分，有新和旧之分（旧只是相对），大部分用户是希望先看最重要的后看非重要的，先看新的后看旧的这样一个顺序，那网站设计师就需要在视觉设计上引导用户去浏览，如下图示<br/><img onload="ResizeImage(this,500)" src="http://www.ued163.com/wp-content//upload/2009/03/e8a786e8a789e9a1bae5ba8fe59bbee589afe69cac.jpg" alt="" title=""/><br/>在一个信息版块里，会有第一视觉区、第二视觉区、第三视觉区，就是说当用户看到这一信息版块时第一眼会落到图片的位置，第2眼会落到大标题上，第3眼会落到其他地方。这样有顺序的引导用户浏览，可减少用户的浏览成本，增加页面的视觉效果。在这个信息版块里第1视觉和第2视觉有可能会因为选材方面而转换视觉，按常理图型视觉冲击力是大于文字的，但当选用的图片素材不优的时候也会被文字所吸引过去。<br/><b>五、亮点</b><br/>在国内的门户网站有资讯多页面长的特点，当用户浏览到页面最底部而又需要浏览更多资讯的时候，可能需要拉到最顶部才能点击导航浏览其他页面，这是一个比较费力的工程，一般门户网站的做法是提供一个“返回顶部”的功能，新改版的网易频道页面在这个位置提供一个和头部对应的导航，不需要用户二次点击就能达到目的。如下图：<br/><img onload="ResizeImage(this,500)" src="http://www.ued163.com/wp-content//upload/2009/03/e5b0be.jpg" alt="" title=""/><br/>以上从几方面简单分析了网易网首页的设计思想，相信还存在很多不足的地方，但我们会不断的摸索和尝试，为网友提供一个人性化的网络平台而努力。<br/>现阶段国内互联网行业和一些发达国家相比确实还有一段比较远的距离，特别是在网站用户体验上还处于摸索阶段，国人对浏览网站舒适度需求也在不断提升，因此提高网站的用户体验是网站设计未来发展的方向。但因为用户体验是纯主观的，就带有一定的不确定因素，个体差异也决定了每个用户的真实体验是无法通过其他途径来完全模拟或再现的。但是对于一个界定明确的用户群体来讲，其用户体验的共性是能够经由良好设计的实验来认识到。]]></description><category>≮Minux's 网页设计≯</category><comments>http://minux.cn/post/506.html#comment</comments><wfw:comment>http://minux.cn/</wfw:comment><wfw:commentRss>http://minux.cn/feed.asp?cmt=506</wfw:commentRss><trackback:ping>http://minux.cn/cmd.asp?act=tb&amp;id=506&amp;key=31100969</trackback:ping></item><item><title>CSS中position定位属性absolute与relative</title><author>icoody@gmail.com (minux)</author><link>http://minux.cn/post/483.html</link><pubDate>Sun, 19 Oct 2008 14:22:39 +0800</pubDate><guid>http://minux.cn/post/483.html</guid><description><![CDATA[很多朋友问过我absolute与relative怎么区分，怎么用？我们都知道absolute是绝对定位，relative是相对定位，但是这个绝对与相对是什么意思呢？绝对是什么地方的绝对，相对又是相对于什么地方而言的呢？那他们又有什么样的特性，可以做出什么样的效果呢？关于两者之间又有什么样的技巧呢？下面我们就来一一解读。 <br/><br/>Absolute，CSS中的写法是：position:absolute; 他的意思是绝对定位，他是参照浏览器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位，在没有设定TRBL，默认依据父级的做标原始点为原始点。如果设定TRBL并且父级没有设定position属性，那么当前的absolute则以浏览器左上角为原始点进行定位，位置将由TRBL决定。<br/><br/><img onload="ResizeImage(this,500)" src="http://www.77zy.com/77uploadpic/2007/4/2007429162117245.jpg" alt="" title=""/> <br/><br/>一般来讲，网页居中的话用Absolute就容易出错，因为网页一直是随着分辨率的大小自动适应的，而Absolute则会以浏览器的左上角为原始点，不会应为分辨率的变化而变化位置。很多人出错就在于这点上出错。而网页居左其特性与Relative很相似，但是还是有本质的区别的。 Relative，CSS中的写法是：position:relative; 他的意思是绝对相对定位，他是参照父级的原始点为原始点，无父级则以BODY的原始点为原始点，配合TRBL进行定位，当父级内有padding等CSS属性时，当前级的原始点则参照父级内容区的原始点进行定位。<br/><br/><img onload="ResizeImage(this,500)" src="http://www.77zy.com/77uploadpic/2007/4/2007429162117162.jpg" alt="" title=""/><br/><br/>有时我们还需要依靠z-index来设定容器的上下关系，数值越大越在最上面，数值范围是自然数。当然有一点要注意，父子关系是无法用z-index来设定上下关系的，一定是子级在上父级在下。]]></description><category>≮Minux's 网页设计≯</category><comments>http://minux.cn/post/483.html#comment</comments><wfw:comment>http://minux.cn/</wfw:comment><wfw:commentRss>http://minux.cn/feed.asp?cmt=483</wfw:commentRss><trackback:ping>http://minux.cn/cmd.asp?act=tb&amp;id=483&amp;key=d152aee2</trackback:ping></item><item><title>关于SQL的指针记录移动</title><author>icoody@gmail.com (minux)</author><link>http://minux.cn/post/481.html</link><pubDate>Fri, 03 Oct 2008 21:19:34 +0800</pubDate><guid>http://minux.cn/post/481.html</guid><description><![CDATA[<blockquote><div class="quote"><br/>rs.movenext是将指针下移,请问上移指针该怎么写呢？ <br/>关于指针的移动，具体见：<br/><br/><b>MoveFirst </b><br/><br/>使当前记录成为记录集内第一条记录。 <br/><br/><b>MoveLast </b><br/><br/>使当前记录成为记录集内最后一条记录。 <br/><br/><b>MoveNext </b><br/><br/>使当前记录成为记录集内下一条记录。 <br/><br/><b>MovePrevious </b><br/><br/>使当前记录成为记录集内前一条记录。<br/><br/>=======================================================<br/><br/>ASP新闻系统的上一条和下一条问题<br/><br/>查询全部记录 <br/>以conn,1,1打开记录集 <br/>rs.Find "ID=100"    ’寻找ID为100的文章，即要显示的文章 <br/>’显示文章内容 <br/>rs.movenext  ’指针下移一个单位 <br/>’显示下一个记录 <br/><br/>=======================================================<br/><br/>有好多新手只知道rs.movenext是用来移动指针的，但很少使用rs.move来进行操作。 <br/><br/>使用rs.move可以轻松实现快速移到指定的记录，使用时如下。 <br/><br/>set conn=server.createobject("adodb.connection") <br/><br/>conn.open "provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & server.mappath("test.mdb") <br/><br/>set rs=server.createobject("adodb.recordset") <br/><br/>rs.open "select * from tablename",conn,1,1 <br/><br/>rs.movefirst <br/><br/>rs.move 7 <br/><br/>response.write rs(0) <br/><br/>set rs=nothing <br/><br/>conn.close <br/><br/>set conn=nothing <br/><br/>注意的是上面的方法显示的是第8条数据，因为是向后移动了7条记录。 <br/></div></blockquote>]]></description><category>≮Minux's 网页设计≯</category><comments>http://minux.cn/post/481.html#comment</comments><wfw:comment>http://minux.cn/</wfw:comment><wfw:commentRss>http://minux.cn/feed.asp?cmt=481</wfw:commentRss><trackback:ping>http://minux.cn/cmd.asp?act=tb&amp;id=481&amp;key=47f9dfb5</trackback:ping></item><item><title>asp中有关字符编码转换的几个函数</title><author>icoody@gmail.com (minux)</author><link>http://minux.cn/post/480.html</link><pubDate>Tue, 23 Sep 2008 00:30:48 +0800</pubDate><guid>http://minux.cn/post/480.html</guid><description><![CDATA[文字编码转换：<br/>[code=javascript]<br/><%<br/>1、'UTF转GB---将UTF8编码文字转换为GB编码文字<br/>function UTF2GB(UTFStr) <br/><br/>for Dig=1 to len(UTFStr) <br/>  '如果UTF8编码文字以%开头则进行转换<br/>  if mid(UTFStr,Dig,1)="%" then <br/>     'UTF8编码文字大于8则转换为汉字<br/>    if len(UTFStr) >= Dig+8 then <br/>       GBStr=GBStr & ConvChinese(mid(UTFStr,Dig,9)) <br/>       Dig=Dig+8 <br/>    else <br/>      GBStr=GBStr & mid(UTFStr,Dig,1) <br/>    end if <br/>  else <br/>     GBStr=GBStr & mid(UTFStr,Dig,1) <br/>  end if <br/>next <br/>UTF2GB=GBStr <br/>end function <br/><br/>'UTF8编码文字将转换为汉字<br/>function ConvChinese(x) <br/>   A=split(mid(x,2),"%") <br/>   i=0 <br/>   j=0 <br/>  for i=0 to ubound(A) <br/>     A(i)=c16to2(A(i)) <br/>  next <br/>  for i=0 to ubound(A)-1 <br/>    DigS=instr(A(i),"0") <br/>    Unicode="" <br/>    for j=1 to DigS-1 <br/>      if j=1 then <br/>        A(i)=right(A(i),len(A(i))-DigS) <br/>        Unicode=Unicode & A(i) <br/>      else <br/>         i=i+1 <br/>         A(i)=right(A(i),len(A(i))-2) <br/>         Unicode=Unicode & A(i) <br/>      end if <br/>    next <br/><br/>    if len(c2to16(Unicode))=4 then <br/>       ConvChinese=ConvChinese & chrw(int("&H" & c2to16(Unicode))) <br/>    else <br/>       ConvChinese=ConvChinese & chr(int("&H" & c2to16(Unicode))) <br/>    end if <br/>  next <br/>end function <br/><br/>'二进制代码转换为十六进制代码<br/>function c2to16(x)<br/>   i=1 <br/>   for i=1 to len(x) step 4 <br/>      c2to16=c2to16 & hex(c2to10(mid(x,i,4))) <br/>   next <br/>end function <br/><br/>'二进制代码转换为十进制代码<br/>function c2to10(x)<br/>   c2to10=0 <br/>   if x="0" then exit function <br/>     i=0 <br/>   for i= 0 to len(x) -1 <br/>      if mid(x,len(x)-i,1)="1" then c2to10=c2to10+2^(i) <br/>   next <br/>end function <br/><br/>'十六进制代码转换为二进制代码<br/>function c16to2(x) <br/>    i=0 <br/>    for i=1 to len(trim(x)) <br/>      tempstr= c10to2(cint(int("&h" & mid(x,i,1)))) <br/>      do while len(tempstr)<4 <br/>         tempstr="0" & tempstr <br/>      loop <br/>      c16to2=c16to2 & tempstr <br/>   next <br/>end function <br/><br/>'十进制代码转换为二进制代码<br/>function c10to2(x) <br/>   mysign=sgn(x) <br/>   x=abs(x) <br/>   DigS=1 <br/>   do <br/>      if x<2^DigS then <br/>        exit do <br/>      else <br/>        DigS=DigS+1 <br/>      end if <br/>   loop <br/>   tempnum=x <br/><br/>   i=0 <br/>   for i=DigS to 1 step-1 <br/>      if tempnum>=2^(i-1) then <br/>         tempnum=tempnum-2^(i-1) <br/>         c10to2=c10to2 & "1" <br/>      else <br/>         c10to2=c10to2 & "0" <br/>      end if <br/>   next <br/>   if mysign=-1 then c10to2="-" & c10to2 <br/>end function<br/><br/>2、'GB转UTF8--将GB编码文字转换为UTF8编码文字<br/><br/>Function toUTF8(szInput)<br/>    Dim wch, uch, szRet<br/>    Dim x<br/>    Dim nAsc, nAsc2, nAsc3<br/>    '如果输入参数为空，则退出函数<br/>    If szInput = "" Then<br/>        toUTF8 = szInput<br/>        Exit Function<br/>    End If<br/>    '开始转换<br/>     For x = 1 To Len(szInput)<br/>        '利用mid函数分拆GB编码文字<br/>        wch = Mid(szInput, x, 1)<br/>        '利用ascW函数返回每一个GB编码文字的Unicode字符代码<br/>        '注：asc函数返回的是ANSI 字符代码，注意区别<br/>        nAsc = AscW(wch)<br/>        If nAsc < 0 Then nAsc = nAsc + 65536<br/>    <br/>        If (nAsc And &HFF80) = 0 Then<br/>            szRet = szRet & wch<br/>        Else<br/>            If (nAsc And &HF000) = 0 Then<br/>                uch = "%" & Hex(((nAsc \ 2 ^ 6)) Or &HC0) & Hex(nAsc And &H3F Or &H80)<br/>                szRet = szRet & uch<br/>            Else<br/>               'GB编码文字的Unicode字符代码在0800 - FFFF之间采用三字节模版<br/>                uch = "%" & Hex((nAsc \ 2 ^ 12) Or &HE0) & "%" & _<br/>                            Hex((nAsc \ 2 ^ 6) And &H3F Or &H80) & "%" & _<br/>                            Hex(nAsc And &H3F Or &H80)<br/>                szRet = szRet & uch<br/>            End If<br/>        End If<br/>    Next<br/>        <br/>    toUTF8 = szRet<br/>End Function<br/><br/>3、'GB转unicode---将GB编码文字转换为unicode编码文字<br/><br/>function chinese2unicode(Str) <br/>  dim i <br/>  dim Str_one <br/>  dim Str_unicode <br/>  if(isnull(Str)) then<br/>     exit function<br/>  end if<br/>  for i=1 to len(Str) <br/>    Str_one=Mid(Str,i,1) <br/>    Str_unicode=Str_unicode&chr(38) <br/>    Str_unicode=Str_unicode&chr(35) <br/>    Str_unicode=Str_unicode&chr(120) <br/>    Str_unicode=Str_unicode& Hex(ascw(Str_one)) <br/>    Str_unicode=Str_unicode&chr(59) <br/>  next <br/>  chinese2unicode=Str_unicode <br/>end function   <br/><br/>4、'URL解码<br/>Function URLDecode(enStr)<br/>dim deStr<br/>dim c,i,v<br/>deStr=""<br/>for i=1 to len(enStr)<br/>  c=Mid(enStr,i,1)<br/>  if c="%" then<br/>   v=eval("&h"+Mid(enStr,i+1,2))<br/>   if v<128 then<br/>    deStr=deStr&chr(v)<br/>    i=i+2<br/>   else<br/>    if isvalidhex(mid(enstr,i,3)) then<br/>     if isvalidhex(mid(enstr,i+3,3)) then<br/>      v=eval("&h"+Mid(enStr,i+1,2)+Mid(enStr,i+4,2))<br/>      deStr=deStr&chr(v)<br/>      i=i+5<br/>     else<br/>      v=eval("&h"+Mid(enStr,i+1,2)+cstr(hex(asc(Mid(enStr,i+3,1)))))<br/>      deStr=deStr&chr(v)<br/>      i=i+3 <br/>     end if <br/>    else <br/>     destr=destr&c<br/>    end if<br/>   end if<br/>  else<br/>   if c="+" then<br/>    deStr=deStr&" "<br/>   else<br/>    deStr=deStr&c<br/>   end if<br/>  end if<br/>next<br/>URLDecode=deStr<br/>end function<br/><br/>'判断是否为有效的十六进制代码<br/>function isvalidhex(str)<br/>dim c<br/>isvalidhex=true<br/>str=ucase(str)<br/>if len(str)<>3 then isvalidhex=false:exit function<br/>if left(str,1)<>"%" then isvalidhex=false:exit function<br/>  c=mid(str,2,1)<br/>if not (((c>="0") and (c<="9")) or ((c>="A") and (c<="Z"))) then isvalidhex=false:exit function<br/>  c=mid(str,3,1)<br/>if not (((c>="0") and (c<="9")) or ((c>="A") and (c<="Z"))) then isvalidhex=false:exit function<br/>end function<br/>%><br/>[/code]]]></description><category>≮Minux's 网页设计≯</category><comments>http://minux.cn/post/480.html#comment</comments><wfw:comment>http://minux.cn/</wfw:comment><wfw:commentRss>http://minux.cn/feed.asp?cmt=480</wfw:commentRss><trackback:ping>http://minux.cn/cmd.asp?act=tb&amp;id=480&amp;key=94cc868e</trackback:ping></item><item><title>防止注入的代码</title><author>icoody@gmail.com (minux)</author><link>http://minux.cn/post/463.html</link><pubDate>Tue, 27 May 2008 21:27:56 +0800</pubDate><guid>http://minux.cn/post/463.html</guid><description><![CDATA[一段很不错的防止注入代码！<br/>[code=java]<% <br/><br/>Dim Query_Badword,Form_Badword,i,Err_Message,Err_Web,name<br/><br/>'------定义部份  头----------------------------------------------------------------------<br/><br/>Err_Message = 1  '处理方式：1=提示信息,2=转向页面,3=先提示再转向<br/><br/>Err_Web = "Err.Asp" '出错时转向的页面<br/><br/>Query_Badword="'∥and∥select∥update∥chr∥delete∥%20from∥;∥insert∥mid∥master.∥set∥chr(37)∥="     <br/><br/>'在这部份定义get非法参数,使用"∥"号间隔     <br/><br/>Form_Badword="'∥%∥&∥*∥#∥@∥(∥)∥="     '在这部份定义post非法参数,使用"∥"号间隔<br/><br/>'------定义部份  尾-----------------------------------------------------------------------<br/>'<br/>'power by marquee<br/>On Error Resume Next<br/><br/>'----- 对 get query 值 的过滤.<br/><br/>if request.QueryString<>"" then<br/>Chk_badword=split(Query_Badword,"∥")<br/>FOR EACH Query_Name IN Request.QueryString<br/>for i=0 to ubound(Chk_badword)<br/>If Instr(LCase(request.QueryString(Query_Name)),Chk_badword(i))<>0 Then<br/>Select Case Err_Message<br/>  Case "1"<br/>Response.Write "<Script Language=JavaScript>alert('传参错误！参数 "&name&" 的值中包含非法字符串！\n\n请不要在参数中出现：and update delete ; insert mid master 等非法字符！');window.close();</Script>"<br/>  Case "2"<br/>Response.Write "<Script Language=JavaScript>location.href='"&Err_Web&"'</Script>"<br/>  Case "3"<br/>Response.Write "<Script Language=JavaScript>alert('传参错误！参数 "&name&"的值中包含非法字符串！\n\n请不要在参数中出现：and update delete ; insert mid master 等非法字符！');location.href='"&Err_Web&"';</Script>"<br/>End Select<br/>Response.End<br/>End If<br/>NEXT<br/>NEXT<br/>End if<br/><br/>'-----对 post 表 单值的过滤.<br/><br/>if request.form<>"" then<br/>Chk_badword=split(Form_Badword,"∥")<br/>FOR EACH name IN Request.Form<br/>for i=0 to ubound(Chk_badword)<br/>If Instr(LCase(request.form(name)),Chk_badword(i))<>0 Then<br/>Select Case Err_Message<br/>  Case "1"<br/>Response.Write "<Script Language=JavaScript>alert('出错了！表单 "&name&" 的值中包含非法字符串！\n\n请不要在表单中出现： % & * # ( ) 等非法字符！');window.close();</Script>"<br/>  Case "2"<br/>Response.Write "<Script Language=JavaScript>location.href='"&Err_Web&"'</Script>"<br/>  Case "3"<br/>Response.Write "<Script Language=JavaScript>alert('出错了！参数 "&name&"的值中包含非法字符串！\n\n请不要在表单中出现： % & * # ( )  等非法字符！');location.href='"&Err_Web&"';</Script>"<br/>End Select<br/>Response.End<br/>End If<br/>NEXT<br/>NEXT<br/>end if<br/>%><br/>[/code]]]></description><category>≮Minux's 网页设计≯</category><comments>http://minux.cn/post/463.html#comment</comments><wfw:comment>http://minux.cn/</wfw:comment><wfw:commentRss>http://minux.cn/feed.asp?cmt=463</wfw:commentRss><trackback:ping>http://minux.cn/cmd.asp?act=tb&amp;id=463&amp;key=d0d8c97a</trackback:ping></item><item><title>做了一个不无聊的东西</title><author>icoody@gmail.com (minux)</author><link>http://minux.cn/post/449.html</link><pubDate>Thu, 03 Apr 2008 23:23:51 +0800</pubDate><guid>http://minux.cn/post/449.html</guid><description><![CDATA[<p>先广而告之吧：<br />MINUX今天花了几个小时做了一个小程序，当然不是给自己做的，不过也可以给未来的自己用。<br /><a href="http://minux.cn/minux/xxyc.htm" target="_blank">胎儿血型预测</a> 、<a href="http://minux.cn/minux/plqzc.htm" target="_blank">排卵期、安全期计算器</a> 、<a href="http://minux.cn/minux/yczc.html" target="_blank">胎儿预产期计算器</a> 、<a href="http://minux.cn/minux/tzjs.htm" target="_blank">胎儿发育周记</a><br /><br />排卵期、安全期计算器：<a href="http://minux.cn/minux/plqzc.htm">http://minux.cn/minux/plqzc.htm</a> <br />预产期计算器：<a href="http://minux.cn/minux/yczc.html">http://minux.cn/minux/yczc.html</a> <br />胎儿发育周记：<a href="http://minux.cn/minux/tzjs.htm">http://minux.cn/minux/tzjs.htm</a> <br />胎儿血型预测：<a href="http://minux.cn/minux/xxyc.htm">http://minux.cn/minux/xxyc.htm</a><br /><br />通过这个小工具，可以快速的计算自己的预产期，胎儿周期（这个MINUX很喜欢，通过查看胎周，可以了解到自己BB最新的发育情况，还可以预先知道自己在这个时期会是什么状态，需要如何调整自己生活工作），每个月的排卵期和安全期，未来的小BB可能是什么样的血型。<br />哈哈，挺全吧，如果有这个需求的话，希望你喜欢MINUX的程序。<br />最后，祝每位准妈妈都生一个健康活泼的孩子～！</p>]]></description><category>≮Minux's 网页设计≯</category><comments>http://minux.cn/post/449.html#comment</comments><wfw:comment>http://minux.cn/</wfw:comment><wfw:commentRss>http://minux.cn/feed.asp?cmt=449</wfw:commentRss><trackback:ping>http://minux.cn/cmd.asp?act=tb&amp;id=449&amp;key=dcb17d60</trackback:ping></item><item><title>Minux的校内网站空间设计代码（贴于涂鸦板内）</title><author>icoody@gmail.com (minux)</author><link>http://minux.cn/post/393.html</link><pubDate>Sat, 22 Sep 2007 00:02:15 +0800</pubDate><guid>http://minux.cn/post/393.html</guid><description><![CDATA[<p><b>代码如下(最新改于9月23日)：</b><br />[code=html]<style type="text/css">      <br/>html {                         <br/>    scrollbar-face-color:#000;                         <br/>    scrollbar-highlight-color:#848284;                         <br/>    scrollbar-shadow-color:#000;                         <br/>    scrollbar-3dlight-color:#000;                         <br/>    scrollbar-arrow-color:#848284;                         <br/>    scrollbar-track-color:#848284;                         <br/>    scrollbar-darkshadow-color:#000;                         <br/>}            <br/>              <br/>body{                    <br/>    font-size: 12px;            <br/>    font-family: Comic Sans MS;<br/>    background-color: #818181;<br/>    margin: 0px;<br/>    padding: 0px;<br/>    margin-bottom: 10px;<br/>    text-align: center;<br/>    cursor:url(upload/2009/12/200912222228217431.jpg) repeat;                    <br/>}              <br/>           <br/>                  <br/>#header{            <br/>    width:766px;            <br/>    height:225px;                  <br/>    position:relative;                    <br/>    background:url(upload/2009/12/200912222228301604.jpg) no-repeat;            <br/>}                    <br/>                   <br/>                  <br/>                   <br/>#content{             <br/>    width:766px;                   <br/>    border:none;                    <br/>}             <br/>                   <br/>#userBlog .text{            <br/>    overflow:auto;                    <br/>    height:300px;            <br/>    color:#888;            <br/>    font-family:Comic Sans MS;              <br/>}                    <br/>#container #footer{                     <br/>    position:relative;                     <br/>    width:766px;                     <br/>    height:236px;                    <br/>    background:url(upload/2009/12/200912222228314314.jpg) no-repeat bottom;}                     <br/>                   <br/>#userRelations,#userUpdates {                    <br/>    float:left;                    <br/>    margin-left:20px;                    <br/>}                    <br/>.linkinpark{                    <br/>    background-color:#9cf;                     <br/>    color:#888;                    <br/>}                     <br/>.linkinpark a{                    <br/>    background-color:#888;                    <br/>}                     <br/>                   <br/>a:hover{                    <br/>    background-color:#A3A3A3;                     <br/>    color:#eee;                     <br/>    cursor:url(http://img.xiaonei.com/photos/20061001/1110/orig656484.cur);                    <br/>    text-decoration:none;<br/>}                     <br/>                   <br/>#userUpdates{                    <br/>    width:445px                   <br/>}             <br/>                   <br/>#navigation{              <br/>    position:absolte;                    <br/>    left:25px;                    <br/>    top:198px;                   <br/>    width:650px;                    <br/>    height:150px;                   <br/>    background:transparent;                    <br/>    overflow:hidden;                    <br/>    font-size:12px;                     <br/>    text-decoration:none;                    <br/>    border:none;              <br/>}                     <br/>#navigation A:link {                    <br/>    font-size:12px;                   <br/>    color: #fff;                   <br/>    text-decoration:none;                      <br/>}                     <br/>#navigation A:visited{              <br/>    font-size:12px;                    <br/>    COLOR: #fff;                     <br/>    text-decoration:none;                    <br/>}                     <br/>#navigation A:hover {              <br/>    font-size:12px;            <br/>    background:#fff;                    <br/>    text-decoration:none;                    <br/>    color:#000;                 <br/>}                     <br/>                         <br/>                   <br/>                    <br/>* html .inputbutton,* html .subbutton,* html .inputsubmit{                    <br/>    padding:0 5px;                    <br/>    border:0px solid;                    <br/>    background-color:#0F0F0F<br/>}                    <br/>                   <br/>* textarea{             <br/>    width:510px;            <br/>    height:90px;                   <br/>    padding:0 5px;                    <br/>    border:1px dashed #503524;                    <br/>    background:#eeeeee;            <br/>    background-image: url(http://fm161.img.xiaonei.com/pic001/20070921/14/32/large_3863h169.jpg); <br/>}                 <br/>                    <br/>                   <br/>                   <br/>#userActions li a{                    <br/>    color: #363739;                    <br/>}                     <br/>                   <br/>#userActions li a:hover{                    <br/>    color: #eee;                    <br/>}                     <br/>                   <br/>.more a,.author a,.boxcont a,.edit a{                    <br/>    color:#363739;                    <br/>}             <br/>                    <br/>#userRelations h3{                    <br/>    height: 42px;            <br/>    word-wrap: break-all;            <br/>    font-size: 12px;            <br/>    padding-top: 3px;            <br/>    padding-left: 15px;            <br/>    border-top:0px;            <br/>    background:url(upload/2009/12/200912222228311414.jpg) no-repeat; color:#424542;                     <br/>}             <br/>             <br/>#userUpdates h3{                    <br/>    height: 42px;            <br/>    word-wrap: break-all;            <br/>    font-size: 12px;            <br/>    padding-top: 3px;            <br/>    padding-left: 15px;            <br/>    border-top:0px;            <br/>    background:url(upload/2009/12/200912222228347157.jpg) no-repeat;             <br/>    color:#424542;                     <br/>}             <br/>                  <br/>#AccountInfo H4,#BasicInfo H4,#ContactInfo H4,#PersonalInfo H4, #SchoolInfo H4                    <br/>{                    <br/>    color:#424542;                    <br/>}                     <br/>#userRelations .boxcont { border-right:0px;}                   <br/>#tagline,#utility,#logo,.block,#permalink,#sidebar,#footer p,#footer strong,#reportlink,#footer div{                    <br/>    display:none;                    <br/>} <br/>/*友链样式*/   <br/>#flink ul{    <br/>width: 95%;/*根据自己群设置宽度*/<br/>height:230px;   <br/>text-align:center;    <br/>padding:5px;    <br/>}    <br/>#flink li{    <br/>float:left;    <br/>width:49%;/*这个也得根据自己群设置宽度*/   <br/>height:20px;    <br/>color: #333;    <br/>margin-top:5px;    <br/>padding:5px 0;    <br/>display:block;    <br/>text-align:center;    <br/>}    <br/>#flink li a {     <br/>display:block;    <br/>text-decoration: none;    <br/>padding:5px;    <br/>}    <br/>#flink li a:hover {     <br/>display:block;    <br/>background:#ccc;    <br/>color:#fff;    <br/>padding:5px;    <br/>text-decoration: none;    <br/>}            <br/>a:hover img {filter:alpha(opacity=68,style=4);}<br/>#userProfile .stat{BACKGROUND:url(upload/2009/12/200912222228355260.gif) no-repeat left top;padding-left:110px;}#star1,#userProfile .rank{float:right;display:none;} <br/>#jumpgirl {<br/>float:left;<br/>width:200px;<br/>height:300px;<br/>background:url(upload/2009/12/200912222228350350.gif) no-repeat; <br/>}<br/> #olympic {<br/> position: relative;<br/> width:155px;<br/> height:37px;<br/> margin: auto;<br/> }<br/></style><br /><!--以下为FLASH播放器--><br />&nbsp;</p><object style="position: absolute; top: 29px; left: 790px; data: " id="audioplayer1" tribe="" fm021.img.xiaonei.com="" width="190" height="24" type="application/x-shockwave-flash"><br /><param name="movie" value="http://fm021.img.xiaonei.com/tribe/20070511/1725/A5758036MG.swf" /><br /><font color="Green"><param name="FlashVars" value="playerID=1&amp;autostart=yes&amp;bg=0x999999&amp;leftbg=0x999999&amp;lefticon=0x000000&amp;rightbg=0x000000&amp;rightbghover=0x999999&amp;righticon=0x999999&amp;righticonhover=0xaa0055&amp;text=0x000000&amp;slider=0xffffff&amp;track=0x000000border=0x666666&amp;loader=0xffffff&amp;soundFile=<s>http://bbs.sznews.com/upload/20070623/U200706231182610066416.mp3</s>" /></font><br /><param name="quality" value="high" /><br /><param name="menu" value="false" /><br /><param name="bgcolor" value="#000000" /></object><p><br />&nbsp;</p><div id="flink"><br /><div id="jumpgirl">&nbsp;</div><br /><fieldset><br /><legend><b>我的涂色板</b></legend><br /><ul><br />    <font color="Red">    <li><a title="<s>Minux is Full House</s>" target="_blank" href="<s>http://minux.cn</s>"><s>Minux's Full House</s></a> <br />    &nbsp;</li>    <li><a title="<s>Minux is TaoBao Shop</s>" target="_blank" href="<s>http://shop33285502.taobao.com</s>"><s>Minux's Taobao Shop</s></a> </font><br />    &nbsp;</li></ul></fieldset> <br />&nbsp;</div><p><br />&nbsp;</p><div id="olympic"><br /><embed style="width: 155px; height: 37px; overflow: hidden" width="155" height="37" type="application/x-shockwave-flash" src="http://aw.awflasher.com/2008lite.swf"></embed><br />&nbsp;</div><p><br />&nbsp;</p><fieldset></fieldset><p><br />&nbsp;</p><div>&nbsp;</div><p>[/code]<br /><br />其中做了 <font color="Red"><s>test</s></font> 标记的可以替换为你喜欢的超级链接；做了 <font color="Green"><s>test</s></font> 的部分可以替换为你喜欢的音乐地址。 <img style="margin: 0px 0px -2px" border="0" alt="" src="/image/smilies/icon_lol.gif" /></p>]]></description><category>≮Minux's 网页设计≯</category><comments>http://minux.cn/post/393.html#comment</comments><wfw:comment>http://minux.cn/</wfw:comment><wfw:commentRss>http://minux.cn/feed.asp?cmt=393</wfw:commentRss><trackback:ping>http://minux.cn/cmd.asp?act=tb&amp;id=393&amp;key=6a58a5fe</trackback:ping></item><item><title>详解定位与定位应用</title><author>icoody@gmail.com (minux)</author><link>http://minux.cn/post/374.html</link><pubDate>Sat, 28 Apr 2007 23:35:57 +0800</pubDate><guid>http://minux.cn/post/374.html</guid><description><![CDATA[<blockquote><div class="quote">定位一直是WEB标准应用中的难点，如果理不清楚定位那么可能应实现的效果实现不了，实现了的效果可能会走样。如果理清了定位的原理，那定位会让网页实现的更加完美。<br/><br/>引伸阅读 <br/>解读absolute与relative <br/>position:relative/absolute无法冲破的等级 <br/>对《无法冲破的等级》一文的补充 <br/>定位的定义：<br/><br/>在CSS中关于定位的内容是：position:relative | absolute | static | fixed <br/><br/>static 没有特别的设定，遵循基本的定位规定，不能通过z-index进行层次分级。<br/>relative 不脱离文档流，参考自身静态位置通过 top,bottom,left,right 定位，并且可以通过z-index进行层次分级。<br/>absolute 脱离文档流，通过 top,bottom,left,right 定位。选取其最近的父级定位元素，当父级 position 为 static 时，absolute元素将以body坐标原点进行定位，可以通过z-index进行层次分级。<br/>fixed 固定定位，这里他所固定的对像是可视窗口而并非是body或是父级元素。可通过z-index进行层次分级。<br/><br/>CSS中定位的层叠分级：z-index: auto | namber;  <br/><br/>auto 遵从其父对象的定位<br/>namber  无单位的整数值。可为负数<br/><br/>定位的原理：<br/><br/>可以位移的元素 （相对定位）<br/><br/>在本文流中，任何一个元素都被文本流所限制了自身的位置，但是通过CSS我们依然使得这些元素可以改变自己的位置，我们可以通过float来让元素浮动，我们也可以通过margin来让元素产生位置移动。但是事实上那并非是真实的位移，因为，那只是通过加大margin值来实现的障眼法。而真正意义上的位移是通过top,right,bottom,left（下称TRBL，TRBL可以折分使用。）针对一个相对定位的元素所产生的。我们看下面的图：<br/><br/><img onload="ResizeImage(this,500)" src="http://andymao.com/andy/upload/200704010545288882.PNG" alt="" title=""/><br/><br/>我们看图中是一个宽度为200px，高度为50px，margin:25px; border:25px solid #333; padding:25px; 相对定位的元素，并且位移距上50px，距左50px。而下方是一块默认定位的黑色区块。我们看到这个处在文本流的区块被上面的相对定位挡住了一部分，这说明：“当元素被设置相对定位或是绝对定位后，将自动产生层叠，他们的层叠级别自然的高于文本流”。除非设置其z-index值为负值，但是在Firefox等浏览器中z-index为负值时将不会显示。并且我们发现当相对定位元素进行位移后，表现内容已经脱离了文本流，只是在本文流中还为原来的相对定位留下了原有的总宽与总高（内容的高度或是宽度加上margin\border\padding的数值）。这说明在相对定位中，虽然表现区脱离了原来的文本流，但是在文本流中还还有此相对定位的老窩。这点要特别注意，因为在实际应用中如果相对定位的位移数值过大，那么原有的区域就会形成一块空白。<br/><br/>并且我们注意，定位元素的坐标点是在margin值的左上边缘点，即图中的B点。那么所有的位移的计算将以这个点为基础进行元素的推动。当TRBL为正值时位移的方向是内聚的，由些可推，当TRBL为负值时位移的方向是外放的。在图片有位移的箭头指向标识，带有加号的是正值位移方向，带有减号的是负值位移方向。关于位移方位，可以延伸阅读怿飞的《由浅入深漫谈margin属性（一）》<br/><br/>可以在任意一个位置的元素 （绝对定位）<br/><br/>如上所述：相对定位只可以在文本流中进行位置的上下左右的移动，同样存在一定的局限性，虽然他的表现区脱离了文本流，但是在文本流却依然为其保留了一席之地，这就好比一个打工的人他到了外地，但是在老家依然有一个专属于他的位置，这个位置不随他的移动而改变。但是这样很明显就会空出一块空白来，如果希望文本流抛弃这个部分就需要用到绝对定位，绝对定位不光脱离了文本流，而且在文本流中也不会给这个绝对定位元素留下专属空位，这就好比是一个工厂里的工人，如果有一个工人走了自然会要有别的工人来填充这个位置。而移动出去的部分自然也就成为了自由体。绝对定位将可以通过TRBL来设置元素处在任何一个位置。在父层position属性为默认值时，TRBL的坐标原点以body的坐标原点为起始。看下图：<br/><br/><img onload="ResizeImage(this,500)" src="http://andymao.com/andy/upload/200704010614004430.png" alt="" title=""/><br/><br/>上图可知，文本流中的内容会顶替绝对定位无素的位置，一点都不会客气。而绝对定位元素自然的层叠于文本流之上。而在单一的绝对定位中，定位元素将会跑到网页的左上角，因为那里是他们的被绝对定位后的坐标原点。<br/><br/>被关联的绝对定位<br/><br/>上面说的是单一的绝对定位，而在实际的应用中我们常常会需要用到一种特别的形式。即希望定位元素要有绝对定位的特性，但是又希望绝对定位的坐标原点可以固定在网页中的某一个点，当这个点被移动时绝对位定元素希望能保证相对于这个原坐标的相对位置。也就是说需要这个绝对定位要跟着网页移动，而并且是因定在网页的某一个固定位置。通常当网页是居中形式的时候这种效果就会显得特别的重要。要实现这种效果基本方式就是为这个绝对定位的父级设置为相对定位。那么绝对定位的坐标就会以父级为坐标起始点。<br/><br/>虽然是如此，但是这个坐标原点却并不是父级的坐标原点，这是一个很奇怪的坐标位置。我们看一下模型图示：<br/><br/><img onload="ResizeImage(this,500)" src="http://andymao.com/andy/upload/200704010637260135.png" alt="" title=""/><br/><br/>我们看到，这个图中父级为黑灰色区块，子级为青色区块。父级是相对定位，子级是绝对定位。子级设置了顶部位移50个像素，左倾位移50个像素。那么我们看，子级的坐标原点并不是从父级的坐标原点位移50个像素，而是从父级块的padding左上边缘点为坐标起始点（即A点）。而父级这里如果要产生位置移动，或是浏览器窗口大小有所变动都不会影响到这个绝对定位元素与父级的相对定位元素之间的位置关系。这个子级也不用调整数值。<br/><br/>这是一种很特别并且也是非常实用的应用方式。如果你之前对于定位的控制并不自如的话，相信看完对这里对定位的解释一定可以把定位使用得随心所欲。<br/><br/>总在视线里的元素 （固定定位）<br/><br/>由于广告的滥用，使得一些浏览器软件都开始有了广告内容拦截，使得一些很好的效果现在都不推荐使用了。比如让一个元素可能随着网页的滚动而不断改变自己在浏览器的位置。而现在我可以通过CSS中的一个定位属性来实现这样的一个效果，这个元素属性就是曾经不被支持的position:fixed; 他的含义就是：固定定位。这个固定与绝对定位很像，唯一不同的是绝对定位是被固定在网页中的某一个位置，而固定定位则是固定在浏览器的视框位置。</div></blockquote>]]></description><category>≮Minux's 网页设计≯</category><comments>http://minux.cn/post/374.html#comment</comments><wfw:comment>http://minux.cn/</wfw:comment><wfw:commentRss>http://minux.cn/feed.asp?cmt=374</wfw:commentRss><trackback:ping>http://minux.cn/cmd.asp?act=tb&amp;id=374&amp;key=94de6eac</trackback:ping></item><item><title>快递订单查询|速递状态查询|包裹查询|快递(速递)资费查询</title><author>icoody@gmail.com (minux)</author><link>http://minux.cn/post/337.html</link><pubDate>Tue, 23 Jan 2007 17:04:41 +0800</pubDate><guid>http://minux.cn/post/337.html</guid><description><![CDATA[<p>经常发送快递，而找每个公司的快递订单查询入口非常麻烦，所以Minux制作了一个便捷的快递查询接入口，可以方便的按照快递单号查询到国内大部分快递公司发送的包裹响应情况。 <img style="margin: 0px 0px -2px" border="0" alt="" src="/image/smilies/icon_lol.gif" /> <br /><br />地址：<a href="http://minux.cn/sd/">http://minux.cn/sd/</a> <br /><br /><blockquote><div class="quote">可以查询到的公司名单：申通快递查询，圆通速递查询，顺风快递查询，天天快递查询，邮政EMS，联邦快递，全一快运，闻达快递，亚风快递，汇通快递，中诚快递，韵达货运，龙邦物流，顺丰速递，中通速递等。</div></blockquote></p>]]></description><category>≮Minux's 网页设计≯</category><comments>http://minux.cn/post/337.html#comment</comments><wfw:comment>http://minux.cn/</wfw:comment><wfw:commentRss>http://minux.cn/feed.asp?cmt=337</wfw:commentRss><trackback:ping>http://minux.cn/cmd.asp?act=tb&amp;id=337&amp;key=e9d08557</trackback:ping></item><item><title>CSS中Float和Clear属性的使用</title><author>icoody@gmail.com (minux)</author><link>http://minux.cn/post/313.html</link><pubDate>Mon, 30 Oct 2006 17:44:16 +0800</pubDate><guid>http://minux.cn/post/313.html</guid><description><![CDATA[<p>大家肯定会经常用到float这个属性<br />因为用div布局的时候 特别是两分栏或者三分栏结构的网站<br />我们都需要在一个大的div下构建2或者3个布局的div<br />这几个div的分布就需要用float属性来实现水平排列（当然也可以不用float属性改用绝对布局）<br />大家通常用到的float属性一般有left和right<br />举个例子：<br /><br />在上面这段代码中大家通常会把id为left_content和right_content的float属性设为left或者right<br />这样两个主分栏就实现了水平排列<br />这里没有什么特殊的 我要说的是 大部分人会忘记给bottom加上clear（clear:both）属性<br />当然在IE里面这样做并没有什么不好 相对&ldquo;智能&rdquo;的IE会自动把bottom排列在上面两个div的下面<br />但是在firefox就没这么好说话了 它会严格按照float的属性来工作<br />因为right_content的float属性设为left或者right<br />所以作为溢出的bottom会被排列在上述两个分栏的左边或者右边<br />这样就严重影响了计划的布局 <br /><br />所以希望以后大家在做这种布局的时候不要忘记在水平分栏之外的div里加上clear的属性<br />并顺便介绍一下clear属性<br /><br /><blockquote><div class="quote">clear属性：<br />left：清除左边浮动对象<br />right：清除右边浮动对象<br />both：两边都不允许有浮动对象<br />none：两边都可以有浮动对象</div></blockquote><br /><br />[img=border]upload/2009/12/200912222245478821.gif[/img]</p>]]></description><category>≮Minux's 网页设计≯</category><comments>http://minux.cn/post/313.html#comment</comments><wfw:comment>http://minux.cn/</wfw:comment><wfw:commentRss>http://minux.cn/feed.asp?cmt=313</wfw:commentRss><trackback:ping>http://minux.cn/cmd.asp?act=tb&amp;id=313&amp;key=1b0658e2</trackback:ping></item></channel></rss>
