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

2008-02-23 08:33:14来源:互联网 阅读 ()

新老客户大回馈,云服务器低至5折

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

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

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:详解CSS布局设计块元素和内联元素

下一篇:深入CSS结构:合理运用div和span