一、ul无序列表定义
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
无序列表始于 <ul> 标签。每个列表项始于 <li>。
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
二、无序列表项目符号
type="disc" 实心圆
type="circle" 空心圆
type="square" 方块符
三、无序列表的嵌套 (li 放内容，标签 ，图片，链接)
<ul>
<li>咖啡</li>
<li>茶
<ul>
<li>红茶</li>
<li>绿茶</li>
</ul>
</li>
</ul>
一、ol有序列表定义
有序列表也是一列项目，列表项目使用数字进行标记。
有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
二、有序列表项目符号 <ol type="A"></ol>
type="A" A B C...序列号
type="a" a b c ...序列号
type="I" I II III...序列号
三、有序列表的嵌套
<ol>
<li>咖啡</li>
<li>茶
<ul>
<li>红茶</li>
<li>绿茶</li>
</ul>
</li>
</ol>
一、dl定义列有的含义
自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
结构:
<dl>
<dt>苹果手机</dt>
<dd>这是一种用来装逼的通讯工具... ...</dd>
<dt>58同城</dt>
<dd>这是一个神奇的网站 ... ...</dd>
</dl>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
<!--声明当前页面的编码集charset=gbk中文编码gb2312,charset=utf-8 国际编码-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--当前页面的三要素-->
<title>标题</title>
<meta name="Keywords" content="关键词,关键词">
<meta name="description" content="描述">
<!-- css js -->
<style type="text/css">
*{margin:0px;padding:0px;}
ul.news li{height:30px; width:200px; line-height:30px; color:#666;font-size:12px;
border-bottom:1px solid #555;}
</style>
</head>
<body>
<!--无序列表:是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记
无序列表始于<ul>标签。每个列表项始于<li>-->
<ul>
<li type="circle">列表项一</li>
<li type="square">列表项二</li>
<li>列表项三</li>
</ul>
<ul>
<li>茶
<ul>
<li>红茶</li>
<li>绿茶</li>
<li>列表项三</li>
</ul>
</li>
</ul>
<!--ol有序列表 type="A" A B C...序列号
type="a" a b c ...序列号
type="I" I II III...序列号-->
<ol type="a">
<li>列表项一</li>
<li>列表项二</li>
<li>列表项三</li>
</ol>
<ol>
<li>茶
<ul>
<li>红茶</li>
<li>绿茶</li>
<li>列表项三</li>
</ul>
</li>
</ol>
<!--dl 自定义列表 自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始-->
<dl>
<dt>苹果手机</dt>
<dd>一种装逼的通讯工具</dd> <!--默认自动比dt缩进两个字符，用于对dt内容的解释说明-->
</dl>
<!--ul案例-->
<ul class="news">
<li>大众自造磁悬球形车</li>
<li>传林心如领证</li>
<li>穆加贝当众跌倒</li>
<li>空难现场比剪刀手</li>
<ul>
<!--dl定义标签-->
<dl>
<dt><img src="1.jpg"/></dt>
<dd>这是一个美女。。。</dd>
</dl>
</body>
</html>
JAVA技术交流群 532101200
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
