在线咨询
服务热线
服务热线:021-61554458
TOP
网站建设 崇左网站建设> 建站学堂 崇左网站建设哪家好?CSS写三列布局的时候突然想到的这样一个方法

崇左网站建设哪家好?CSS写三列布局的时候突然想到的这样一个方法

来源:网站建设 | 时间:2020-11-06 | 浏览:
几日再用CSS写三列布局的情况下忽然想起的那样一个方式,这一念头自身都感觉一些瘋狂,假如在其中有哪些错误的地区请诸位不吝指教。
  当必须写一个三列布局的情况下,一般状况下我能挑选应用以下的DIV布局方法:
图1 DIV布局
  应用那样的嵌套循环方法毫无疑问能够使编码错误的几率降低许多,但另外那样的布局也略显繁杂,针对中后期的维护保养也略显麻烦。我们在布局导航栏时常常会应用到一个方式,那便是应用〈ul〉目录来开展布局,而导航栏能够描述为多列式的布局,既然这样,那麼大家也就可以应用〈ul〉来开展网页页面的两列布局。
图2 DIV布局
这是一个固定不动总宽的布局,换句话说流动性不强,流动性的布局现阶段都还没实验过,等有时间了再实验一下,下边贴上这一布局的编码:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<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:601080x;
margin:10px auto;
}
#header,#footer {
background:#8AC7FA;
height:80px;
clear:both;
}
#footer {
clear:both;
padding-top:10px;
}
#content {
height:301080x;
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:281080x;
margin:0 10px;
}
#content ul li#li2 ul li {
width:271080x;
height:141080x;
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下都能一切正常显示信息,别的电脑浏览器未做检测,假如给你更强的方式何不明确提出来。