【论文】Div CSS网页布局用class组合实现.pdfVIP

Div+CSS网页布局：用class组合实现 疯狂代码 http://CrazyC/ ĵ http:/CrazyC/HtmlJiaoCheng/Article19559.html 现在编写xhtml我们强烈不推荐此种思路方法应该是id综合应用此文章只是讲述种思维并非建站过程中思路方法 ！ 用标准件方式来组装网页DIV布局我把分为2种:布局；风格 布局是骨架风格是衣服 举个例子:比如布局中左栏首先它属性有:是左栏宽度背景颜色字体颜色等 1、首先会定义个,比如:.layout,主要用来控制页面整个大小 .layout{width:98%;margin:0 ;auto;text-align:left;} 2、然后会定义3个基本布局Class(l,m,r) .l{float:left} .m{width:auto} .r{float:right} 我把2栏布局也归类于3栏布局3栏布局中左右栏宽度分别为0时候3栏就变成了2栏． 我们写基本布局代码时候最好还是写成3栏格式． 3、对应布局Class定义需要风格Class比如宽度高度背景颜色等等这些都属于风格元素 ._l{background:#ff0;margin-right: ;-150px;width:150px;} ._m{background:#f00;margin:0 ;140px ;0 ;150px;} ._r{background:#00f;margin-left: ;-140px;width:140px;} 布局只有套风格可以定义很多比如要中栏里面在做个小2栏布局就可以再定义个风格 .mid_l{background:#ff0;margin-right: ;-100px;width:100px;} .mid_m{background:#f00;margin:0 ;0 ;0 ;100px;} 4、将布局和风格结合起来在代码这样引用 div ;=\l ;＿l\/div div ;=\l ;mid_l\/div 将2个都引用中间用空格隔开,前面是布局,后面是风格,后面还可以继续空格引用如果需要再特殊定义你可以给这 个div取个id来定义 其他些常用风格也可以写成通用比如隐含可以定义为 .hide{display:none} ;然后需要时候=\xxx ;hide\来引用 ; \ style=\margin:0px 2px -3px 0px\ alt=\div css xhtml xml Source Code to Run\ Source Code to Run [] 52 - 组合CLASS body, html { background:#fff; color: #000; font-size:12px; margin:0; line-height:150%;padding:0px; text-align:center; } /*布局大框架,用来控制整体页面大小,尺寸由自己控 制*/ #layout{width:98%;margin:0 auto;text-align:left;} /*页面左,中,右布局*/ .l{float:left} .r{float:right} .m{width:auto} /*页面左,中,右布局*/ .l{background:#ff0;margin-right: -150px;width:150px;} .m{background:#f00;margin:0 140px 0 150px;} .r{background:#00f;margin-left: -140px;width:140px;} .l1{background:#dd0;margin-right: -200px;width:200px;} .m1{background:#ee0;margin:0 0 0 200px;} .l2{background:#dd0;margin-right: -50px;width:50px;} .m2{background:#ee0;margin:0 0 0 50px;} Left Here There Right Middle Here1 There