今天来学习第六天　html列表

只看该作者 · 发表于 2015-1-16 10:33:57

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

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

x

在原来的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代码，拔出历程就不再截图了，假如不会的话请进修前边章节
[quote]<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的认同和投入要大一些。

只看该作者 · 发表于 2015-1-16 20:00:02

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

只看该作者 · 发表于 2015-1-18 23:02:09

运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环

只看该作者 · 发表于 2015-1-27 22:13:02

直接用代码建立链接，如：可以直接输入 <a herf = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页 12、插入标签法建立链接，可以再选中文字后在代码中插入html标签，页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。

只看该作者 · 发表于 2015-2-5 15:44:30

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

只看该作者 · 发表于 2015-2-12 22:04:53

每天上网看着那样多的网页，于是我才下定决心选择了网页制作这一门课程，目的就是希望以后能够做出一个完美的网页来。

只看该作者 · 发表于 2015-3-3 11:04:51

滚动条)层属性--溢出(visible/hidden/scroll/auto)

只看该作者 · 发表于 2015-3-11 10:45:10

每天上网看着那样多的网页，于是我才下定决心选择了网页制作这一门课程，目的就是希望以后能够做出一个完美的网页来。

只看该作者 · 发表于 2015-3-18 12:47:31

Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。

只看该作者 · 发表于 2015-3-26 05:44:09

难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心，坚持不懈的决心。在自己无法解决某些问题时，就需要虚心请教别人.

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

[DIV+CSS] 今天来学习第六天　html列表

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

相关帖子