一个简单又不简单的Css设计实例

发布时间:2007-10-07 21-0-15 作者:河南新华电脑学院

首先给出结构，请注意，是结构固定在先，表现设计在后。

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和思路。当然不是标准答案，看看谁的容度最大。^_^

编辑: 点击次数: