DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> CSS div 自適應不同分辨率的方法+代碼
CSS div 自適應不同分辨率的方法+代碼
編輯:CSS詳解     
  • 讓CSS自適應屏幕分辨率,這是比較常用的方法,多見於一些博客或用來顯示圖片的時候,圖片的背景一般都平鋪。讓CSS的Div適應分辨率,可以有多種方法,我們可配合JavaScript來實現,下面說下這幾種方法如何實現:

    無滾動條的情況下:

    01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xHtml1-transitional.dtd"> 02 <Html XMLns="http://www.w3.org/1999/xHtml"> 03 <head> 04 <meta http-equiv="Content-Type" content="text/Html; charset=utf-8" /> 05 <title>左右兩列自適應屏幕寬度</title> 06 <style> 07 *{margin:0px; padding:0px;} 08 div{height:300px;} 09 .left{width:50%; float:left; background-color:#FF0000;} 10 .right{width:50%; float:left; background-color:#0000FF;} 11 </style> 12 </head> 13 <body scroll="no"> 14 <div class="left"></div> 15 <div class="right"></div> 16 </body> 17 </Html>

    有滾動條的情況下:

    vIEw source print? 01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHtml 1.0 Transitional//EN" 02 "http://www.w3.org/TR/xhtml1/DTD/xHtml1-transitional.dtd"> 03 <Html XMLns="http://www.w3.org/1999/xHtml"> 04 <head> 05 <meta http-equiv="Content-Type" content="text/Html; charset=utf-8" /> 06 <title>CSS自適應屏幕</title> 07 <style> 08 *{margin:0px; padding:0px;} 09 div{height:300px;} 10 .left{width:50%; float:left; background-color:#FF0000;} 11 .right{width:50%; float:left; background-color:#0000FF;margin-right:-20px;} 12 </style> 13 </head> 14 <div class="left"></div> 15 <div class="right"></div> 16 </body> 17 </Html>
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved