html5教程之ul列表标志计划网页多列结构

显示全部楼层 · 发表于 2015-1-15 23:29:40

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

使用HTML5也是断断续续的有些历史了，但是没有系统的总结过，最近发现公司的图书馆有不少藏书，几天在用CSS写三列结构的时分俄然想到的如许一个办法，这个设法本人都以为有些猖狂，假如个中有甚么不合错误的中央请列位不吝珠玉。　　当必要写一个三列结构的时分，一样平常情形下我会选择利用以下的DIV结构体例：

登录/注册后可看大图

DIV结构
　　利用如许的嵌套体例无疑可使代码堕落的几率削减良多，但同时如许的结构也略显庞大，关于前期的保护也略显方便。我们在结构导航时常常会利用到一个办法，那就是利用〈ul〉列表来举行结构，而导航能够描述为多列式的结构，既然云云，那末我们也就能够利用〈ul〉来举行页面的多列结构。

登录/注册后可看大图

DIV结构
这是一个流动宽度的结构，也就是说活动性不强，活动性的结构今朝还没有实验过，等偶然间了再实验一下，上面贴上这个结构的代码：

<!DOCTYPEhtmlPUBLIC“-//W3C//DTDXHTML1.0Transitional//EN”“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<htmlxmlns=”http://www.w3.org/1999/xhtml”>
<head>
<metahttp-equiv=”Content-Type”content=”text/html;charset=utf-8″/>
<title>利用UL举行多列结构</title>
<styletype=”text/css”>
*{margin:0;padding:0;}
body{
width:100%;
height:100%;
background:#ddedfb;
}
#mainContent{
width:600px;
margin:10pxauto;
}
#header,#footer{
background:#8AC7FA;
height:80px;
clear:both;
}
#footer{
clear:both;
padding-top:10px;
}
#content{
height:300px;
margin:10pxauto;
}
#contentul{
list-style:none;
height:100%;
}
#contentulli{
width:150px;
height:100%;
background:#8AC7FA;
float:left;
}
#contentulli#li2{
width:280px;
margin:010px;
}
#contentulli#li2ulli{
width:270px;
height:140px;
margin:5px;
background:#0581F0;
}
</style>
</head>
<body>
<divid=”mainContent”>
<divid=”header”>这是头部</div>
<divid=”content”>
<ul>
<li>这是右边</li>
<liid=”li2″>
<ul>
<li>这是两头的上部</li>
<li>这是两头的下部</li>
</ul>
</li>
<li>这是右侧</li>
</ul>
</div>
<divid=”footer”>这是底部</div>
</div>
</body>
</html>

这段代码在IE7及FF3下都能一般显现，其他扫瞄器未做测试，假如你有更好的办法无妨提出来。
</p>
最近群里面很多人在问html5应该怎么学，这个问题其实没有标准答案。我开这个帖子，目的是为了收集大家每天的学习心得，欢迎大家来回复。

		自动登录	找回密码
密码			立即注册

[HTML5] html5教程之ul列表标志计划网页多列结构

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

相关帖子