当前位置
首页 > 迪奥学院 > 迪奥实验室 >

试着写了一个div+css开发框架

时间:03/02/2014来源: 作者: 点击:

TAG:

首先说一下对div+css的一些看法,很多公司,个人都开始使用div+css了,这种方法绝对是一种进步,但是有很多人都在说div+css不好,写着太麻烦,不好控制布局等等. 这种说法其实并没错,如果用不好是会这样的,最终的结果就是div+css还不如Table.简单的说如果想要真正驾御它,就是四个字"柔性控制".

测试通过:
Pc下面的IE6,IE7,FireFox
Mac下面的Safari,Opera,FireFox


下面是这个框架的基本结构图:

下面是详细页面:
1.Layout 结构部分
http://www.diaor.com/mod/Layout.htm

2.Module模型部分
http://www.diaor.com/mod/Module.htm

3.Css样式部分
http://www.diaor.com/mod/Style.css

4使用方法:
#Left,#right 可以直接设置宽度.#Middle是自动伸缩的,它的左右Marign值为#Left,#Right的宽度值.
例如 #Left { width:200px;} #Right { width:160px;} 那么#Middle { margin:0 160px 0 200px;}

三分栏时 #Left #Right #Middle
两分栏时 #Left #Middle
通栏时   #Middle

直接把Module中的模块放到 相应的 #Left #Right #Middle中就可以,不用设置宽度,全部自动伸缩.
Body中的宽度是控制整体宽度的;

5Module结构规范,通过外部class控制内部标签,特殊部分可以在内部加class
A,B对应Module.htm的左,右部分.上部分为C
A盒子模型
<div class="mod1">
    <div class="title">product</div>
    <div class="content"><p>this my company .</p></div>
</div>
B列表模型
<div class="list1"><ul>
<li><img /><span>Name</span></li>
</ul></div>
B文字列表模型
<div class="list3"><ul>
    <li><span>time</span><a href="#">title</a></li>
</ul></div>

C导航模型
<div class="nav1"><ul>
<li><a href="#">news</a></li>
<li><a href="#">product</a></li>
</ul></div>
 

咨询QQ:122388150 | 唐山网站建设,广告设计,动漫原创人设,网站重构,专注网站UI设计,创意设计,产品周边包装设计,标志设计 | 迪奥创意设计

Copyright 2006-2015 diaor.com © all right co,.Ltd