今天来学习第六天 html列表
在原来的table基础上进行改版,几乎必须改变所有的内容注入渠道，实在是太过于麻烦。[*]
[*]
明天我们入手下手进修《十天学会web尺度(div+css)》的html列表，包括以下内容和常识点：
[*]ul无序和ol有序列表
[*]改动项目标记款式或用图片界说项目标记
[*]横向图文列表
[*]浮动后父容器高度自顺应
[*]IE6的双倍边距bug
1、ul无序和ol有序列表
无序列表是web尺度结构中最经常使用的款式，代码以下：
<divid="layout">
<ul>
<li><atitle="第五天超链接伪类"href="/div_css/906.shtml"target="_blank">第五天超链接伪类</a></li>
<li><atitle="第四天纵导游航菜单"href="/div_css/905.shtml"target="_blank">第四天纵导游航菜单</a></li>
<li><atitle="第三天二列和三列结构"href="/div_css/904.shtml"target="_blank">第三天二列和三列结构</a></li>
<li><atitle="第二天一列结构"href="/div_css/903.shtml"target="_blank">第二天一列结构</a></li>
<li><atitle="第一天 XHTMLCSS基本常识"href="/div_css/902.shtml"target="_blank">第一天 XHTMLCSS基本常识</a></li>
</ul>
</div>
这就是有没有序列表，是以ul包括li的情势，默许每行前的标记是圆点，能够经由过程款式表改成无、方块，空心圆等。有序列表是以ol包括li的情势，是以数字为项目标记的，无序列表也能够用css界说显现成有序列表，代码及显现效果以下：
<divid="layout">
<ol>
<li><atitle="第五天超链接伪类"href="/div_css/906.shtml"target="_blank">第五天超链接伪类</a></li>
<li><atitle="第四天纵导游航菜单"href="/div_css/905.shtml"target="_blank">第四天纵导游航菜单</a></li>
<li><atitle="第三天二列和三列结构"href="/div_css/904.shtml"target="_blank">第三天二列和三列结构</a></li>
<li><atitle="第二天一列结构"href="/div_css/903.shtml"target="_blank">第二天一列结构</a></li>
<li><atitle="第一天 XHTMLCSS基本常识"href="/div_css/902.shtml"target="_blank">第一天 XHTMLCSS基本常识</a></li>
</ol>
</div>
2、改动项目标记款式或用图片界说项目标记
方才说了项目标记默许是圆点，能够经由过程款式表改成别的情势，上面实践操纵一下：
从款式表编纂器中能够看到，有很多多少种情势，包含改成ol默许那样以数字有序列表显现。别的项目标记还能够以图象情势，以下图：
这类情势对图象把持不是很天真，以是实践使用傍边一样平常用背景图片来完成，在上例基本大将项目标记设置为list-style:none;，然后
<!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=gb2312"/><styletype="text/css">#layoutul{list-style:none;}#layoutulli{background:url(/upload/2010-08/17/icon.gif)no-repeat0px4px;padding-left:20px;}</style></head><body><divid="layout"><ul><li><atitle="第五天超链接伪类"href="/div_css/906.shtml"target="_blank">第五天超链接伪类</a></li><li><atitle="第四天纵导游航菜单"href="/div_css/905.shtml"target="_blank">第四天纵导游航菜单</a></li><li><atitle="第三天二列和三列结构"href="/div_css/904.shtml"target="_blank">第三天二列和三列结构</a></li><li><atitle="第二天一列结构"href="/div_css/903.shtml"target="_blank">第二天一列结构</a></li><li><atitle="第一天 XHTMLCSS基本常识"href="/div_css/902.shtml"target="_blank">第一天 XHTMLCSS基本常识</a></li></ul></div></body></html>
尺度之路www.ckuyun.com提醒：能够先修正部分代码后再运转
3、横向图文列表
横向图文列表是在上一步的基本上增添图片并让列表横向分列，终极完成效果以下：
先拔出以下的html代码，拔出历程就不再截图了，假如不会的话请进修前边章节
<divid="layout">
<ul>
<li><ahref="#"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><styletype="text/css">body{margin:0auto;font-size:12px;font-family:Verdana;line-height:1.5;}ul,dl,dt,dd,h1,h2,h3,h4,h5,h6,form{padding:0;margin:0;}ul{list-style:none;}img{border:0px;}a{color:#05a;text-decoration:none;}a:hover{color:#f00;}#layoutulli{width:72px;float:left;margin:20px00px20px;display:inline;text-align:center;}#layoutullia{display:block;}#layoutulliaimg{padding:1px;border:1pxsolid#e1e1e1;margin-bottom:3px;}#layoutullia:hoverimg{padding:0px;border:2pxsolid#f98510;}</style></head><body><divid="layout"><ul><li><ahref="#"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><styletype="text/css">body{margin:0auto;font-size:12px;font-family:Verdana;line-height:1.5;}ul,dl,dt,dd,h1,h2,h3,h4,h5,h6,form{padding:0;margin:0;}ul{list-style:none;}img{border:0px;}a{color:#05a;text-decoration:none;}a:hover{color:#f00;}#layout{width:390px;border:2pxsolid#ccc;padding-bottom:20px;overflow:auto;zoom:1;}#layoutulli{width:72px;float:left;margin:20px00px20px;display:inline;text-align:center;}#layoutullia{display:block;}#layoutulliaimg{padding:1px;border:1pxsolid#e1e1e1;margin-bottom:3px;display:block;}#layoutullia:hoverimg{padding:0px;border:2pxsolid#f98510;}</style></head><body><divid="layout"><ul><li><ahref="#">三亚</a></li></ul></div></body></html>
尺度之路www.ckuyun.com提醒：能够先修正部分代码后再运转
使用Div+css所费功夫与收入不成正比，利用table可以大大减少工作量。而上市公司的期望目标不同对Div+css的认同和投入要大一些。
今天来学习第六天 html列表
您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点。 运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环 直接用代码建立链接，如：可以直接输入 <a herf = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页 12、插入标签法建立链接，可以再选中文字后在代码中插入html标签，页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。 Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。 每天上网看着那样多的网页，于是我才下定决心选择了网页制作这一门课程，目的就是希望以后能够做出一个完美的网页来。 滚动条)层属性--溢出(visible/hidden/scroll/auto) 每天上网看着那样多的网页，于是我才下定决心选择了网页制作这一门课程，目的就是希望以后能够做出一个完美的网页来。 Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。 难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心，坚持不懈的决心。在自己无法解决某些问题时，就需要虚心请教别人.
页:
[1]