CSS实例教程:应用ul开展网页页面的两列合理布局

日期:2021-03-17 类型:科技新闻 

关键词:如何创建网站,免费网站建站,网站建设文章,网站建设7个基本流程,自动建站


几日在用CSS写3列合理布局的情况下忽然想起的这样1个方式,这个念头自身都感觉一些瘋狂,假如在其中有甚么不对的地区请各位不吝指教。
当必须写1个3列合理布局的情况下,1般状况下我会挑选应用以下的DIV合理布局方法:

应用这样的嵌套循环方法无疑可使编码错误的几率降低许多,但另外这样的合理布局也略显繁杂,针对后期的维护保养也略显麻烦。大家在合理布局导航栏时常常会应用到1个方式,那便是应用<ul>目录来开展合理布局,而导航栏能够描述为两列式的合理布局,既然这般,那末大家也便可以应用<ul>来开展网页页面的两列合理布局。

这是1个固定不动宽度的合理布局,也便是说流动性性不强,流动性性的合理布局现阶段都还没实验过,等有時间了再实验1下,下面贴上这个合理布局的编码:

<!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⑻″ />
<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下都能一切正常显示信息,别的访问器未做检测,假如你有更好的方式何不提出来。