仓酷云

标题: html5教程之ul列表标志计划网页多列结构 [打印本页]

作者: 爱飞    时间: 2015-1-15 23:29
标题: html5教程之ul列表标志计划网页多列结构
使用HTML5也是断断续续的有些历史了,但是没有系统的总结过,最近发现公司的图书馆有不少藏书,几天在用CSS写三列结构的时分俄然想到的如许一个办法,这个设法本人都以为有些猖狂,假如个中有甚么不合错误的中央请列位不吝珠玉。  当必要写一个三列结构的时分,一样平常情形下我会选择利用以下的DIV结构体例:

html5教程之ul列表标志计划网页多列结构
登录/注册后可看大图

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

html5教程之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&Prime;/>
<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&Prime;>
<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
这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时,就要多花时间对其产生初步的印象。此外,多操作也是非常重要的。
作者: 谁可相欹    时间: 2015-1-21 10:15
不管老师做怎样的解释,而我却对它感到很是吃力,诸如里面有许多不知道的功能。
作者: 小妖女    时间: 2015-1-30 14:53
由CS4 版本开始,则转用WebKit 排版引擎(亦即Google Chrome和Apple Safari浏览器所用的排版引擎)作为网页预览。
作者: 简单生活    时间: 2015-2-6 13:36
Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。
作者: 飘灵儿    时间: 2015-2-16 08:55
时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上
作者: 冷月葬花魂    时间: 2015-3-5 03:42
我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中,我总结了四大定律:兴趣、恒心、虚心、时间。
作者: 深爱那片海    时间: 2015-3-11 23:12
经过两天的学习,总算对Dreamweaver有进一步的了解了,心中不免有些激动。今天和其他几位老师交流了一下,感觉受益匪浅.
作者: 活着的死人    时间: 2015-3-19 16:06
您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别,但它同时也存在着致命的弱点。
作者: 分手快乐    时间: 2015-3-29 12:50
布局表格、绘制层、制作CSS样式表等,这些内容迷糊了我的视线,真是没想到制作一个精巧别致的网页是如此的困难,可是心有不甘。




欢迎光临 仓酷云 (http://www.ckuyun.com/) Powered by Discuz! X3.2