为列表增加一些样式

最新推荐文章于 2024-06-11 16:06:12 发布

原创最新推荐文章于 2024-06-11 16:06:12 发布 · 575 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Html css 列表添加样式

前端同时被 3 个专栏收录

80 篇文章

订阅专栏

css

47 篇文章

订阅专栏

html

28 篇文章

订阅专栏

本文介绍如何使用CSS定制列表样式，包括列表标记类型、位置及图片替换。通过具体代码实例展示了如何为无序列表和有序列表设置不同的样式，如使用自定义图片作为列表标记，以及改变列表标记的位置。

效果如下图,为列表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>