css之列表

最新推荐文章于 2024-04-07 22:39:40 发布

康康家的小闺女

最新推荐文章于 2024-04-07 22:39:40 发布

阅读量115

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/weixin_45713468/article/details/105844665

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

css之列表

ol有序列表，ul无序列表，li横向列表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>实验</title>
		<style>
			<!-在head中添加style设置字体背景,文字样式,文字居中等->
			body{background-color: lightblue};
			<!-ul无序列表,ol有序列表->
			ul.a {list-style-type:circle;}<!-圆形无序列表示例->
			ul.b {list-style-type:square;}<!-方形无序列表示例->
			ol.c {list-style-type:upper-roman;}<!-大写罗马数字有序列表示例->
			ol.d {list-style-type:lower-alpha;}<!-小写英文字母有序列表示例->
			
		</style>
	</head>
	<body>
		<ul class="a">
		    <li>Coffee</li><!-li标签横向排列->
			<li>Tee</li>
			<li>Coca Cola</li>
		</ul>
		<ul class="b">
		    <li>java</li>
			<li>python</li>
			<li>C#</li>
		</ul>
		<ol class="c">
		    <li>one</li>
			<li>two</li>
			<li>three</li>
		</ol>
		<ol class="d">
		    <li>one</li>
			<li>two</li>
			<li>three</li>
		</ol>
		
	</body>
</html>

运行结果为

属性	描述
list-style	简写属性。用于把所有用于列表的属性设置于一个声明中
list-style-image	将图像设置为列表项标志。
list-style-position	设置列表中列表项标志的位置。
list-style-type	设置列表项标志的类型。

list-style-position：outside、inside

康康家的小闺女

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css之列表

css之列表ol有序列表，ul无序列表，li横向列表<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>实验</title> <style> <!-在head中添加style设置字体背景,文字样式,文字居中...
复制链接

扫一扫

专栏目录