一個簡單又不簡單的Css設計執行個體

來源:互聯網
上載者:User
css|設計

首先給出結構,請注意,是結構固定在先,表現設計在後。

 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和思路。當然不是標準答案,看看誰的容度最大。^_^



相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

Starter Package

SSD Cloud server and data transfer for only $2.50 a month

Get Started >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。