【海码学院】web前端基础入门CSS之列表样式和背景样式课堂学习笔记

励志的程序员

于 2019-07-08 15:14:16 发布

阅读量185

点赞数

分类专栏： HTML 文章标签： HTML

本文链接：https://blog.csdn.net/weixin_45282338/article/details/95049785

版权

本文是【海码学院】的前端学习笔记，主要介绍CSS中的列表样式和背景样式。内容包括：如何用list-style去除或定制无序列表的标记，设置背景颜色、图片、平铺方式、大小及位置。通过实例讲解各项属性的用法，帮助初学者掌握基本的CSS技巧。

摘要由CSDN通过智能技术生成

一、列表样式

1、无序列表和无序列表的相关样式

无序列表
<ul>
	<li>a</li>
	<li>b</li>
	<li>c</li>
</ul>

有序列表
<ol>
	<li>内容（一）</li>
	<li>内容（二）</li>
	<li>内容（三）</li>
</ol>

①、list-style：none；去除无序列表前的点或者序号

<style>
	ul{
		list-style: none;
	}
    ol{
      list-style: none;  
    }
</style>


<body>
	<ul>
		<li>a</li>
		<li>b</li>
		<li>c</li>
	</ul>
    <ol>
		<li>a</li>
		<li>b</li>
		<li>c</li>
	</ol>
</body>

②、list-style-type 规定点或者序号的类型

circle：空心圆

desc：实心圆

square：实心矩形

decimal：数字1、2、3、4、5...

decimal-leading-zero：以0打头的数字，01、02、03、04、05...

lower-alpha：小写英文字母，a、b、c、d、e...

upper-alpha：大写英文字母，A、B、C、D、E...

lower-roman：小写罗马数字ÿ

最低0.47元/天解锁文章

励志的程序员

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【海码学院】web前端基础入门CSS之列表样式和背景样式课堂学习笔记

一、列表样式1、无序列表和无序列表的相关样式无序列表<ul> <li>a</li> <li>b</li> <li>c</li></ul>有序列表<ol> <li>内容（一）</li> <li>内容（二）</li>...
复制链接

扫一扫

专栏目录