用于响应式设计的9个CSS技巧

逃离我推掉我的手 2022-03-18 01:53 233阅读 0赞

摘要: 本文将介绍一些简单的CSS设计技巧，包括取消下划线、设计响应式视频、背景图片的设置以及相对值等。这些技巧可以适用于各种类型的网站，而且对于后期的网站维护也十分方便。 ... ... ... ...

<table style="word-wrap:break-word; empty-cells:show; border-collapse:collapse; table-layout:fixed; width:698px"> 
 <tbody style="word-wrap:break-word"> 
  <tr style="word-wrap:break-word"> 
   <td style="word-wrap:break-word"> 
    <div style="word-wrap:break-word"> 
     <span style="font-size:14px; word-wrap:break-word">&nbsp; &nbsp; &nbsp;CSS已成为Web发展不可或缺的部分，开发人员可以使用它来改变网页元素的样式。而随着响应式设计越来越流行，CSS在响应式设计中已扮演着举足轻重的角色，在进行响应式设计时，倘若你能掌握一些CSS技巧，将大大提高你的工作效率。</span> 
    </div> 
    <div style="word-wrap:break-word"> 
     <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span> 
    </div> 
    <div style="word-wrap:break-word"> 
     <span style="font-size:14px; word-wrap:break-word">本文将介绍一些简单的CSS设计技巧，包括取消下划线、设计响应式<a href="http://www.html5cn.org/portal.php?mod=list&amp;catid=18" style="word-wrap:break-word; color:rgb(68,68,68)!important; text-decoration:none!important; border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:blue" rel="nofollow">视频</a>、背景图片的设置以及相对值等。</span> 
    </div> 
    <div style="word-wrap:break-word"> 
     <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span> 
    </div> 
    <div style="word-wrap:break-word"> 
     <span style="word-wrap:break-word"><span style="font-size:14px; word-wrap:break-word">1.取消下划线</span></span> 
    </div> 
    <div style="word-wrap:break-word"> 
     <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span> 
    </div> 
    <div style="word-wrap:break-word"> 
     <span style="font-size:14px; word-wrap:break-word">现在越来越多的<a href="http://www.html5cn.org/" style="word-wrap:break-word; color:rgb(68,68,68)!important; text-decoration:none!important; border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:blue" rel="nofollow">网站</a>文本链接已取消下划线，而这已成为一种Web设计趋势，尤其是在做响应式网站时。下面提供一段简单的CSS代码，可以轻松取消文本链接下划线：</span> 
    </div> 
    <div style="word-wrap:break-word"> 
     <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span> 
    </div> 
    <div style="word-wrap:break-word"> 
     <div style="word-wrap:break-word"></div> 
    </div> 
    <div style="word-wrap:break-word"> 
     <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span> 
    </div> 
    <div style="word-wrap:break-word"> 
     <div style="word-wrap:break-word"> 
      <span style="word-wrap:break-word"><span style="font-size:14px; word-wrap:break-word">2.响应式视频</span></span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word">在网页中嵌入视频，这里介绍 tjkdesign.com给大家，里面提供了许多CSS技巧，帮助你在页面中嵌入响应式视频（<a href="http://www.tjkdesign.com/articles/video-resizing/video.html" style="word-wrap:break-word; color:rgb(51,51,51); text-decoration:none" rel="nofollow">&nbsp;DEMO</a>）。</span> 
     </div> 
    </div> 
    <div style="word-wrap:break-word"> 
     <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span> 
    </div> 
    <div style="word-wrap:break-word"> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word">.video { </span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word">position: relative;</span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word">padding-bottom: 56.25%;</span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word">height: 0;</span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word">overflow: hidden;</span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word">}</span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word">&nbsp;</span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word">.video iframe,</span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word">.video object,</span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word">.video embed { </span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word">position: absolute;</span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word">top: 0;</span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word">left: 0;</span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word">width: 100%;</span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word">height: 100%;</span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word">}</span> 
     </div> 
    </div> 
    <div style="word-wrap:break-word"> 
     <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span> 
    </div> 
    <div style="word-wrap:break-word"> 
     <div style="word-wrap:break-word"> 
      <span style="word-wrap:break-word"><span style="font-size:14px; word-wrap:break-word">3.Rollover文本链接</span></span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word">越来越多的人喜欢在手机上浏览网页，这使得Rollover链接变得越来越流行。想要实现该效果一点都不难，代码也非常简单。&nbsp;</span> 
     </div> 
    </div> 
    <div style="word-wrap:break-word"> 
     <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span> 
    </div> 
    <div style="word-wrap:break-word"> 
     <div style="word-wrap:break-word"></div> 
    </div> 
    <div style="word-wrap:break-word"> 
     <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span> 
    </div> 
    <div style="word-wrap:break-word"> 
     <div style="word-wrap:break-word"> 
      <span style="word-wrap:break-word"><span style="font-size:14px; word-wrap:break-word">4.最大、最小宽度</span></span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word">最大最小宽度可以帮助页面元素设置边界线，其最基本的目的是使所有页面元素都能在边界范围之内。下面提供一段代码，你也可以根据需要进行修改：</span> 
     </div> 
    </div> 
    <div style="word-wrap:break-word"> 
     <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span> 
    </div> 
    <div style="word-wrap:break-word"> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word">.container { </span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word">&nbsp;</span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word">width: 800px;</span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word">max-width: 90%;</span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word">}</span> 
     </div> 
    </div> 
    <div style="word-wrap:break-word"> 
     <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span> 
    </div> 
    <div style="word-wrap:break-word"> 
     <span style="font-size:14px; word-wrap:break-word"><span style="word-wrap:break-word; color:rgb(51,51,51); font-family:Helvetica,Tahoma,Arial,sans-serif; line-height:24px">下面这段代码将会根据边界线自动调整图片大小：</span></span> 
    </div> 
    <div style="word-wrap:break-word"> 
     <span style="word-wrap:break-word; color:rgb(51,51,51); font-family:Helvetica,Tahoma,Arial,sans-serif; line-height:24px"><span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span></span> 
    </div> 
    <div style="word-wrap:break-word"> 
     <span style="word-wrap:break-word"></span> 
     <div style="word-wrap:break-word; color:rgb(51,51,51); font-family:Helvetica,Tahoma,Arial,sans-serif; line-height:24px"> 
      <span style="font-size:14px; word-wrap:break-word">img { </span> 
     </div> 
     <div style="word-wrap:break-word; color:rgb(51,51,51); font-family:Helvetica,Tahoma,Arial,sans-serif; line-height:24px"> 
      <span style="font-size:14px; word-wrap:break-word">max-width: 100%;</span> 
     </div> 
     <div style="word-wrap:break-word; color:rgb(51,51,51); font-family:Helvetica,Tahoma,Arial,sans-serif; line-height:24px"> 
      <span style="font-size:14px; word-wrap:break-word">height: auto;</span> 
     </div> 
     <div style="word-wrap:break-word; color:rgb(51,51,51); font-family:Helvetica,Tahoma,Arial,sans-serif; line-height:24px"> 
      <span style="font-size:14px; word-wrap:break-word">}</span> 
     </div> 
     <div style="word-wrap:break-word; color:rgb(51,51,51); font-family:Helvetica,Tahoma,Arial,sans-serif; line-height:24px"> 
      <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-family:Helvetica,Tahoma,Arial,sans-serif; font-size:14px; color:#333333; word-wrap:break-word"><span style="word-wrap:break-word; line-height:24px">上面这段代码仅适用于IE 7和9，对于IE 8需要作出以下修改：</span></span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-family:Helvetica,Tahoma,Arial,sans-serif; font-size:14px; color:#333333; word-wrap:break-word"><span style="word-wrap:break-word; line-height:24px"><br style="word-wrap:break-word"> </span></span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-family:Helvetica,Tahoma,Arial,sans-serif; color:#333333; word-wrap:break-word"></span> 
      <div style="word-wrap:break-word; line-height:24px"> 
       <span style="font-size:14px; word-wrap:break-word">@media \0screen { </span> 
      </div> 
      <div style="word-wrap:break-word; line-height:24px"> 
       <span style="font-size:14px; word-wrap:break-word">img { </span> 
      </div> 
      <div style="word-wrap:break-word; line-height:24px"> 
       <span style="font-size:14px; word-wrap:break-word">width: auto;</span> 
      </div> 
      <div style="word-wrap:break-word; line-height:24px"> 
       <span style="font-size:14px; word-wrap:break-word">/* for ie 8 */</span> 
      </div> 
      <div style="word-wrap:break-word; line-height:24px"> 
       <span style="font-size:14px; word-wrap:break-word">}</span> 
      </div> 
      <div style="word-wrap:break-word; line-height:24px"> 
       <span style="font-size:14px; word-wrap:break-word">}</span> 
      </div> 
      <div style="word-wrap:break-word; line-height:24px"> 
       <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span> 
      </div> 
      <div style="word-wrap:break-word"> 
       <span style="word-wrap:break-word; line-height:24px"><span style="font-size:14px; word-wrap:break-word">最小宽度设定</span></span> 
      </div> 
      <div style="word-wrap:break-word"> 
       <span style="word-wrap:break-word; line-height:24px"><span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span></span> 
      </div> 
      <div style="word-wrap:break-word"> 
       <p style="word-wrap:break-word; margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> <a href="http://www.html5cn.org/data/attachment/portal/201304/03/101141yvvfvvyoy2h2yd2o.jpg" style="word-wrap:break-word; color:rgb(51,51,51); text-decoration:none" rel="nofollow"><span style="font-size:14px; word-wrap:break-word"><img src="http://www.html5cn.org/data/attachment/portal/201304/03/101141yvvfvvyoy2h2yd2o.jpg" alt="" style="word-wrap:break-word; border:none; max-width:620px"></span></a></p> 
       <p style="word-wrap:break-word; margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span></p> 
       <p style="word-wrap:break-word; margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> </p> 
       <p style="word-wrap:break-word; margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> <span style="word-wrap:break-word"><span style="font-size:14px; word-wrap:break-word">5.背景图片</span></span></p> 
       <p style="word-wrap:break-word; margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span></p> 
       <p style="word-wrap:break-word; margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> <span style="font-size:14px; word-wrap:break-word">一些开发人员喜欢给table或者block设置背景图片，CSS有一段代码是专门设置背景图片的：</span></p> 
       <p style="word-wrap:break-word; margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span></p> 
       <p style="word-wrap:break-word; margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> </p> 
       <p style="word-wrap:break-word; margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> </p> 
       <div style="word-wrap:break-word; height:200px; width:400px; border:1px solid black"> 
        <span style="font-size:14px; word-wrap:break-word">Example of a DIV element with a background image:</span> 
       </div> 
       <p style="word-wrap:break-word; margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> </p> 
       <p style="word-wrap:break-word; margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> </p> 
       <div style="word-wrap:break-word; height:200px; width:400px; border:1px solid black"> 
       </div> 
       <p style="word-wrap:break-word; margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> </p> 
       <p style="word-wrap:break-word; margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span></p> 
       <p style="word-wrap:break-word; margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> </p> 
       <p style="word-wrap:break-word; margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> <span style="word-wrap:break-word"><span style="font-size:14px; word-wrap:break-word">6.相对值</span></span></p> 
       <p style="word-wrap:break-word; margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> <span style="font-size:14px; word-wrap:break-word">相对值是响应式设计中非常重要的部分，如果你想要获得最佳效果，你就应该知道如何使用这些值，这对网站的布局是非常重要的。</span></p> 
       <p style="word-wrap:break-word; margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span></p> 
       <p style="word-wrap:break-word; margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> </p> 
       <p style="word-wrap:break-word; margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> <a href="http://www.html5cn.org/data/attachment/portal/201304/03/1011447cv1gg0gzbvi1mxv.jpg" style="word-wrap:break-word; color:rgb(51,51,51); text-decoration:none" rel="nofollow"><span style="font-size:14px; word-wrap:break-word"><img src="http://www.html5cn.org/data/attachment/portal/201304/03/1011447cv1gg0gzbvi1mxv.jpg" alt="" style="word-wrap:break-word; border:none; max-width:620px"></span></a></p> 
       <p style="word-wrap:break-word; margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span></p> 
       <p style="word-wrap:break-word; margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> </p> 
       <p style="word-wrap:break-word; margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> <span style="font-size:14px; word-wrap:break-word">Relative Font Size&nbsp;</span></p> 
       <p style="word-wrap:break-word; margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> <span style="font-size:14px; word-wrap:break-word">在设置字体相对大小时，需要根据父元素进行设置：</span></p> 
       <p style="word-wrap:break-word; margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span></p> 
       <p style="word-wrap:break-word; margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> </p> 
       <p style="word-wrap:break-word; margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> <a href="http://www.html5cn.org/data/attachment/portal/201304/03/101146h55ssv88zzf91559.jpg" style="word-wrap:break-word; color:rgb(51,51,51); text-decoration:none" rel="nofollow"><span style="font-size:14px; word-wrap:break-word"><img src="http://www.html5cn.org/data/attachment/portal/201304/03/101146h55ssv88zzf91559.jpg" alt="" style="word-wrap:break-word; border:none; max-width:620px"></span></a></p> 
       <p style="word-wrap:break-word; margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> <span style="font-size:14px; word-wrap:break-word">相对比例填充</span></p> 
       <p style="word-wrap:break-word; margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span></p> 
       <p style="word-wrap:break-word; margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> </p> 
       <p style="word-wrap:break-word; margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> <a href="http://www.html5cn.org/data/attachment/portal/201304/03/101148xygz4xzyt1097o4w.jpg" style="word-wrap:break-word; color:rgb(51,51,51); text-decoration:none" rel="nofollow"><span style="font-size:14px; word-wrap:break-word"><img src="http://www.html5cn.org/data/attachment/portal/201304/03/101148xygz4xzyt1097o4w.jpg" alt="" style="word-wrap:break-word; border:none; max-width:620px"></span></a></p> 
       <p style="word-wrap:break-word; margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span></p> 
       <p style="word-wrap:break-word; margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> <span style="word-wrap:break-word"><span style="font-size:14px; word-wrap:break-word">7.突出边界</span></span></p> 
       <p style="word-wrap:break-word; margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> <span style="font-size:14px; word-wrap:break-word">border-bottom: 2px solid #427AA8;</span></p> 
       <p style="word-wrap:break-word; margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> </p> 
       <p style="word-wrap:break-word; margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> <span style="word-wrap:break-word"><span style="font-size:14px; word-wrap:break-word">8. Word Break</span></span></p> 
       <p style="word-wrap:break-word; margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> <span style="font-size:14px; word-wrap:break-word">&nbsp;<a href="http://www.html5cn.org/data/attachment/portal/201304/03/101150vvk2r1l2kktncrcv.jpg" style="word-wrap:break-word; color:rgb(51,51,51); text-decoration:none" rel="nofollow"><img src="http://www.html5cn.org/data/attachment/portal/201304/03/101150vvk2r1l2kktncrcv.jpg" alt="" style="word-wrap:break-word; border:none; max-width:620px"></a></span></p> 
       <p style="word-wrap:break-word; margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> <span style="font-size:14px; word-wrap:break-word">下面这段代码可以很好的实现文本换行：</span></p> 
       <p style="word-wrap:break-word; margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> <span style="font-size:14px; word-wrap:break-word">.break-word { </span></p> 
       <p style="word-wrap:break-word; margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> <span style="font-size:14px; word-wrap:break-word">word-wrap:break-word;</span></p> 
       <p style="word-wrap:break-word; margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> <span style="font-size:14px; word-wrap:break-word">}</span></p> 
       <p style="word-wrap:break-word; margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> <span style="word-wrap:break-word"><span style="font-size:14px; word-wrap:break-word">9.CSS溢出：隐藏技巧</span></span></p> 
       <p style="word-wrap:break-word; margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> <span style="font-size:14px; word-wrap:break-word">visible的相对值默认情况下是隐藏的，如下图所示，超出box部分的内容就被隐藏起来了。&nbsp;</span></p> 
       <p style="word-wrap:break-word; margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> <span style="font-size:14px; word-wrap:break-word">&nbsp;&nbsp;<a href="http://www.html5cn.org/data/attachment/portal/201304/03/101154pkebpkpzs3jpuzuc.jpg" style="word-wrap:break-word; color:rgb(51,51,51); text-decoration:none" rel="nofollow"><img src="http://www.html5cn.org/data/attachment/portal/201304/03/101154pkebpkpzs3jpuzuc.jpg" alt="" style="word-wrap:break-word; border:none; max-width:620px"></a></span></p> 
       <p style="word-wrap:break-word; margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> <span style="word-wrap:break-word"><span style="font-size:14px; word-wrap:break-word">总结</span></span></p> 
       <p style="word-wrap:break-word; margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span></p> 
       <p style="word-wrap:break-word; margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> <span style="font-size:14px; word-wrap:break-word">以上都是用于响应式设计的最简单技巧，并且可以被普遍使用于各种网站上，对于后期的网站维护也十分方便。</span></p> 
       <p style="word-wrap:break-word; margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> </p> 
       <p style="word-wrap:break-word; margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> </p> 
       <p style="word-wrap:break-word; margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> </p> 
       <p style="word-wrap:break-word; margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> </p> 
       <p style="word-wrap:break-word; margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> </p> 
       <p style="word-wrap:break-word; margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> </p> 
       <p style="word-wrap:break-word; margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> </p> 
       <p style="word-wrap:break-word; margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> </p> 
      </div> 
      <div style="word-wrap:break-word; line-height:24px"> 
       <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span> 
      </div> 
      <div style="word-wrap:break-word; line-height:24px"> 
       <span style="font-size:14px; word-wrap:break-word">原文链接：&nbsp;<a href="http://smashinghub.com/9-valuable-css-tricks-for-responsive-design.htm" style="word-wrap:break-word; color:rgb(0,102,204); text-decoration:none" rel="nofollow">SMASHINGHUB</a></span> 
      </div> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

本站资讯均由 [HTML5中国][HTML5] 编辑从其他媒体精选[HTML5][]相关资讯转载，以供网友参阅，投稿： news@html5cn.org

[HTML5]: http://www.html5cn.org/