几日再用CSS写三列合理布局的情况下忽然想起的那样一个方式,这一念头自身都感觉一些瘋狂,假如在其中有哪些错误的地区请诸位不吝赐教。
当必须写一个三列合理布局的情况下,一般状况下我能挑选应用以下的DIV合理布局方法:
图1 DIV合理布局
应用那样的嵌套循环方法毫无疑问可使编码错误的几率降低许多,但同时那样的合理布局也稍显繁杂,针对中后期的维护保养也稍显麻烦。大家在合理布局导航栏时常常会应用到一个方式,那么就是应用〈ul〉目录来开展合理布局,而导航栏能够描述为两列式的合理布局,即然这般,那麼大家也便可令其用〈ul〉来开展网页页面的两列合理布局。
图2 DIV合理布局
它是一个固定不动总宽的合理布局,换句话说流动性性较弱,流动性性的合理布局现阶段还没有有实验过,等有时候间了再实验一下,下边贴上这一合理布局的编码:
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
html xmlns=
head
meta http-equiv= Content-Type content= text/html; charset=utf-8 /
title 应用UL开展两列合理布局 /title
style type= text/css
* {margin:0; padding:0;}
body {
width:100%;
height:100%;
background:#ddedfb;
}
#mainContent {
width:600px;
margin:10px auto;
}
#header,#footer {
background:#8AC7FA;
height:80px;
clear:both;
}
#footer {
clear:both;
padding-top:10px;
}
#content {
height:300px;
margin:10px auto;
}
#content ul {
list-style:none;
height:100%;
}
#content ul li {
width:150px;
height:100%;
background:#8AC7FA;
float:left;
}
#content ul li#li2 {
width:280px;
margin:0 10px;
}
#content ul li#li2 ul li {
width:270px;
height:140px;
margin:5px;
background:#0581F0;
}
/style
/head
body
div id= mainContent
div id= header 它是头顶部 /div
div id= content
ul
li 它是左侧 /li
li id= li2
ul
li 它是正中间的上部 /li
li 它是正中间的下边 /li
/ul
/li
li 它是右侧 /li
/ul
/div
div id= footer 它是底端 /div
/div
/body
/html
这一段编码在IE7及FF3下都能一切正常显示信息,别的访问器未做检测,假如给你更强的方式何不明确提出来。
大量有关强烈推荐
HTML报表标识实例教程(6):暗外框色特性BORDERCOLORDARK
blockquote标识运用留意
标识語言——学好HTML后该学习什么?
【文中题目和网站地址】ul目录标识设计方案网页页面两列合理布局:fujian/