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应该怎么学，这个问题其实没有标准答案。我开这个帖子，目的是为了收集大家每天的学习心得，欢迎大家来回复。

只看该作者 · 发表于 2015-1-17 18:05:34

这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时，就要多花时间对其产生初步的印象。此外，多操作也是非常重要的。

只看该作者 · 发表于 2015-1-21 10:15:07

不管老师做怎样的解释，而我却对它感到很是吃力，诸如里面有许多不知道的功能。

只看该作者 · 发表于 2015-1-30 14:53:09

由CS4 版本开始，则转用WebKit 排版引擎（亦即Google Chrome和Apple Safari浏览器所用的排版引擎）作为网页预览。

只看该作者 · 发表于 2015-2-6 13:36:47

Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。

只看该作者 · 发表于 2015-2-16 08:55:04

时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上

只看该作者 · 发表于 2015-3-5 03:42:21

我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中，我总结了四大定律：兴趣、恒心、虚心、时间。

只看该作者 · 发表于 2015-3-11 23:12:11

经过两天的学习，总算对Dreamweaver有进一步的了解了，心中不免有些激动。今天和其他几位老师交流了一下，感觉受益匪浅.

只看该作者 · 发表于 2015-3-19 16:06:43

您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点。

只看该作者 · 发表于 2015-3-29 12:50:42

布局表格、绘制层、制作CSS样式表等，这些内容迷糊了我的视线，真是没想到制作一个精巧别致的网页是如此的困难，可是心有不甘。

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

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

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

相关帖子