效果如下图,为列表ol或者ul添加标识符
代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>为列表增加一些样式</title>
<!-- 列表的主要属性是
list-style-type,利用这个属性,可以控制列表中使用的项目符号(或者通常也叫做列表标记)
-->
<style type="text/css">
ul li {
/* list-style-type: disc; */
/* disc是默认的列表标记类型 */
/* list-style-type: circle; */
/* circle是一个空心圆形 */
/* list-style-type: square; */
/* 是实体的方形 */
/* list-style-type: none; */
/* 列表左侧没有符号 */
list-style-image: url(../../HelloHBuilder/img/HBuilder.png);
/* 允许为列表设置标记图像 */
padding-top: 100px;
margin-left: 200px;
}
/* 有序列表:支持十进制数据;罗马数字 字母表字符 */
ol li {
list-style-type: decimal;
/* 十进制是默认值 */
/* list-style-type: upper-alpha; */
/* 大写字母 */
/* list-style-type: lower-alpha; */
/* 小写字母 */
/* list-style-type: upper-roman; */
/* 大写罗马数字 */
/* list-style-type: lower-roman; */
/* 小写罗马数字 */
list-style-position: inside;
/* 该属性可以设置文本回绕,是在标记下回绕还是在文本下回绕 */
}
</style>
</head>
<body>
<h2>June 2, 2012</h2>
<p>
<img src="../../HelloHBuilder/img/HBuilder.png" alt="The first day of the trip">
</p>
<p>
My first day of the trip! I can not believe I finally got everything packed and ready to go;
Beacuse i am on a Segway, I wasn not able to bring a whole lot with me :
</p>
<ul>
<li>cellphone</li>
<li>ipod</li>
<li>digital camera </li>
<li> a protein bar</li>
</ul>
<ol>
<li>cellphone</li>
<li>ipod</li>
<li>digital camera </li>
<li> a protein bar a protein bara protein bara protein bara protein bara protein bara protein bara protein bara protein bara protein bara protein bara protein bara protein bara protein bara protein bara protein bara protein bara protein bara protein bara protein bara protein bara protein bara protein bara protein bara protein bara protein bara protein bara protein bara protein bara protein bara protein bara protein bara protein bara protein bara protein bara protein bara protein bara protein bara protein bara protein bara protein bara protein bara protein bara protein bara protein bara protein bara protein bara protein bara protein bara protein bara protein bara protein bara protein bara protein bara protein bara protein bara protein bara protein bara protein bara protein bara protein bara protein bara protein bara protein bara protein bara protein bara protein bara protein bara protein bara protein bara protein bara protein bara protein bara protein bara protein bar</li>
</ol>
<p>
Just the essentials As lao Tzu would hava said , <q>
A journey of a thousand miles begins with one Segway
</q>
</p>
</body>
</html>