web第四周笔记

列表

1.无序列表

(1)默认修饰符disc

<ul>
			<li>苹果</li>
			<li>橙子</li>
		</ul>

(2)圆圈修饰符circle

.circle{
				list-style-type: circle;
			}
<ul class="circle">
			<li>苹果</li>
			<li>橙子</li>
		</ul>

(3)方形修饰符square

.square{
				list-style-type: square;
			}
<ul class="square">
			<li>苹果</li>
			<li>橙子</li>
		</ul>

(4)自定义无序列表的修饰符

.fruit{
				list-style-image: url(../img/strawberry.png);
			}
<ul class="square">
			<li>苹果</li>
			<li>橙子</li>
		</ul>

2.有序列表

<ol>
			<li>洗漱</li>
			<li>吃饭</li>
		</ol>

修改成小写罗马字符

.lower-roman{
				list-style-type: lower-roman;
			}
<ol class="lower-roman">
			<li>洗漱</li>
			<li>吃饭</li>
		</ol>