核心提示：HTML基础学习-7- 列表学习3!DOCTYPE html!--有序列表无序列表list-stylenone无标记样式disc 默认样式 标记实心圆circle 空心圆square 实心方块deci...
HTML基础学习-7- 列表学习3
<!DOCTYPE html>
<!--
有序列表 无序列表
list-style
none 无标记样式
disc 默认样式 标记实心圆
circle 空心圆
square 实心方块
decimal 数字
decimal-leading-zero 0开头的数字标记
lower-roman 小写罗马
upper-roman 大写罗马
lower-alpha 小写英文
upper-alpha 大写英文
lower-greek 小写希腊
lower-latin 小写拉丁
upper-latin 大写拉丁
hebrew 传统希伯来
armenian 亚美尼亚
cjk-ideographic 简单表意数字
georgian 乔治亚
hiragana 日文片假名
katakana
hiragana-iroha
katakana-iroha
list-style-position 标记位置
inside 列表项目标记放置在 文本以内，且环绕文本根据 标记对齐
outside 默认值，保持标记位于文本的左侧，列表项目标记位置位于 文本以外
且环绕文本不根据标记对齐
inherit 继承父类元素list-style-position 属性
list-style-image 设置图像列表标记 与第一个属性 互斥关系，显示其中一个
URL 图像路径
none
inherit
list-style-position:inside;
list-style-position:outside;
list-style:square inside url(img/scenery.jpg); 当图片不存在情况就会用 square属性来代替
-->
<head>
<title>列表相关属性</title>
<meta charset="utf-8">
<style type="text/css"
>
/*
ul{
width:10px;
height:10px;
}
ul.inside{
list-style-position:inside;
list-style-image:url(img/scenery.jpg);
}
ol.outside{
list-style-image:url(img/scenery.jpg);
list-style-position:outside;
}
*/
ul{
list-style:square inside url(img/scenery.jpg);
}
</style>
</head>
<body>
<p>无序列表</p>
<ul class="inside">
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
<ul>
<li> 嵌套列表1</li>
<li> 嵌套列表2</li>
<li> 嵌套列表3</li>
<li> 嵌套列表4</li>
</ul>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
</ul>
<p>有序列表</p>
<ol class="outside">
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
</ol>
</body>
</html>
