一個簡單又不簡單的Css設計實例_網站重構教程
      
編輯Tag賺U幣
      


      教程Tag：暫無Tag,歡迎添加,賺取U幣!
      


      

      首先給出結構，請注重，是結構固定在先，表現設計在后。
      


       1 <body>
       2     <div id="PopPage">
       3         <h3>新增聯系人</h3>
       4         <div>
       5             <label>姓名</label>
       6             <input type="text" />
       7         </div>
       8         <div>
       9             <label>姓名</label>
      10             <input type="text" />
      11         </div>
      12         <div>
      13             <label>姓名</label>
      14             <input type="text" />
      15         </div>
      16         <!-- 以次類推，我就不寫了 -->
      17         <div class="buttonarea">
      18             <input type="button" value="添加" />
      19             <input type="button" value="重填" />
      20         </div>
      21     </div>
      22 </body>
      


      下面是設計師提供的設計稿：
      


      


      　　說明：有幾個限制。
      


      　　1、不能在body上定義背景圖片。
      


      　　2、結構不答應改變，也就是增加額外標簽。
      


      　　3、要求適應分辨率，因為此類頁面不僅僅作為寬度固定的彈出頁面，同時也要作為寬度不固定的內頁。（表單內容會改變）
      


      　　算了，不列了，要說限制可能還能寫一些出來，但沒意思了，干脆這樣說：如何僅依靠css實現容度更高的整體布局。大家有愛好可以試試看，三天后周日再給出我的Css和思路。當然不是標準答案，看看誰的容度最大。^_^
      


      

      


      來源：http://yuntian.cnblogs.com//所屬分類：網站重構教程/更新時間：2006-05-12


      


      



      


      



      相關網站重構教程：