一個簡單又不簡單的Css設(shè)計實例_網(wǎng)站重構(gòu)教程
首先給出結(jié)構(gòu)，請注重，是結(jié)構(gòu)固定在先，表現(xiàn)設(shè)計在后。
1 <body>
2 <div id="PopPage">
3 <h3>新增聯(lián)系人</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>
下面是設(shè)計師提供的設(shè)計稿：
說明：有幾個限制。
1、不能在body上定義背景圖片。
2、結(jié)構(gòu)不答應(yīng)改變，也就是增加額外標(biāo)簽。
3、要求適應(yīng)分辨率，因為此類頁面不僅僅作為寬度固定的彈出頁面，同時也要作為寬度不固定的內(nèi)頁。（表單內(nèi)容會改變）
算了，不列了，要說限制可能還能寫一些出來，但沒意思了，干脆這樣說：如何僅依靠css實現(xiàn)容度更高的整體布局。大家有愛好可以試試看，三天后周日再給出我的Css和思路。當(dāng)然不是標(biāo)準(zhǔn)答案，看看誰的容度最大。^_^
- 網(wǎng)站重構(gòu)CSS的優(yōu)化技巧
- 無延遲翻滾的圖形/CSS混合風(fēng)格的按鈕
- 用CSS floats創(chuàng)建三欄頁布局
- 相冊的自動播放效果SlideShow
- 深入CSS結(jié)構(gòu)：合理運用div和span
- 深入CSS結(jié)構(gòu)：div再議以及對span的迷惑
- 談?wù)剎html的結(jié)構(gòu)標(biāo)簽
- CSS中expression使用簡介
- 從GMail認識的W3C網(wǎng)頁標(biāo)準(zhǔn)和Ajax
- 符合WEB標(biāo)準(zhǔn)的導(dǎo)航菜單
- 用UL實現(xiàn)非Table四行三列布局
- 不用float實現(xiàn)模塊居中布局
- 相關(guān)鏈接：
- 教程說明：
網(wǎng)站重構(gòu)教程-一個簡單又不簡單的Css設(shè)計實例
。