萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> DivCSS教程 >> 重溫兩道頁面重構面試題

重溫兩道頁面重構面試題

最近一直在研習JavaScript,CSS方面的知識關注的甚少.偶然間又看到這兩道頁面重構面試題,心血來潮,重溫一下,呵.其實這兩道題之前就做過,挺有意思.
題一:分別用2個DIV,3個DIV,5個DIV實現水平垂直均居中顯示一個寬50px,高200px的正十字架.
思路:水平垂直均居中的實現,當然非absolute加外邊距負值結合莫屬.閒話略去,看代碼及演示吧.
2個DIV實現的核心CSS代碼:

.div_a{width:50px; height:200px; background:#a40000; position:absolute; left:50%; top:50%; margin:-100px 0 0 -25px}
.div_b{width:200px; height:50px; background:#a40000; position:absolute; left:50%; top:50%; margin:-25px 0 0 -100px}

3個DIV實現的核心CSS代碼:

.div_a{width:200px; height:50px; background:#a40000; magin-top:75px}
.div_b{width:50px; height:200px; background:#a40000; margin:-125px 0 0 75px}
.div_c{width:200px; width:200px; position:absolute; left:50%; top:50%; margin:-100px 0 0 -100px}

5個DIV實現的核心CSS代碼:

.div_a{width:200px; width:200px; position:absolute; background:#a40000; left:50%; top:50%; margin:-100px 0 0 -100px}
.div_b,.div_c,.div_d,.div_e{width:75px; height:75px; background:#fff}
.div_b,.div_d{float:left}
.div_c,.div_e{float:right}
.div_b,.div_c{margin-bottom:50px}

題二:這是一道很費腦筋,但很有意思的一道題.這道題也能讓你領略到CSS的博大精深.原題要求是,讓某一圖形水平垂直居中於當前可視頁面,且圖形是一個無限縮小的,就是四個角的正方形依次縮小,在用戶體驗上要滿足盡最多用戶.
思路:既然要求圖形水平垂直居中,那最終它占的肯定是一個正方圖形;從用戶體驗上,滿足最多用戶,主要是受限於用戶的浏覽器窗口大小.目前主流的顯示器分辨率是1024*768,拿大陸用戶量最大的IE來計算,其不安裝插件的情況下可視高度約為590px,所以我們要實現的正方圖形必須限制在590px*590px裡面(分辨率寬大於高,所以以高為底線計算).按最中間的圖形大小為200px*200px計算,200+100*2+50*2+25*2+12.5*2+6.25*2~=590.
題二思路借簽自網絡,原作者已無從考證,謹此感謝.
核心CSS代碼:

.div_center{width:200px;height:200px;left:50%;top:50%;position:absolute;margin:-100px 0 0 -100px;background:#a40000}
.div_a,.div_b,.div_c,.div_d{width:50%;height:50%;position:absolute;background:#a40000;}
.div_a{left:-50%;top:-50%}
.div_b{right:-50%;top:-50%}
.div_c{left:-50%; bottom:-50%;}
.div_d{right:-50%; bottom:-50%;}

html部分:

  1. <div class="div_center">
  2.   <div class="div_a">
  3.     <div class="div_a">
  4.       <div class="div_a">
  5.         <div class="div_a">
  6.           <div class="div_a">
  7.             <div class="div_a"></div>
  8.           </div>
  9.         </div>
  10.       </div>
  11.     </div>
  12.   </div>
  13.   <div class="div_b">
  14.     <div class="div_b">
  15.       <div class="div_b">
  16.         <div class="div_b">
  17.           <div class="div_b">
  18.             <div class="div_b"></div>
  19.           </div>
  20.         </div>
  21.       </div>
  22.     </div>
  23.   </div>
  24.   <div class="div_c">
  25.     <div class="div_c">
  26.       <div class="div_c">
  27.         <div class="div_c">
  28.           <div class="div_c">
  29.             <div class="div_c"></div>
  30.           </div>
  31.         </div>
  32.       </div>
  33.     </div>
  34.   </div>
  35.   <div class="div_d">
  36.     <div class="div_d">
  37.       <div class="div_d">
  38.         <div class="div_d">
  39.           <div class="div_d">
  40.             <div class="div_d"></div>
  41.           </div>
  42.         </div>
  43.       </div>
  44.     </div>
  45.   </div>
  46. </div>

個人覺得題一有一定的實用價值,題二只是對思維的一個考驗,可能並不會在實際應用中用到.題二還可以用JS來實現,略過.

copyright © 萬盛學電腦網 all rights reserved