近期在重温css内容,记录一些笔记,证明我有在认真温故,没有敷衍,哈哈哈!
一、默认列表
1、li、summary 默认display:list-item
li的父元素只能是ol、ul、menu
<ul>
<li>无序列表项目一</li>
<li>无序列表项目二</li>
<li>无序列表项目三</li>
</ul>
<ol>
<li>有序列表项目一</li>
<li>有序列表项目二</li>
<li>有序列表项目三</li>
</ol>
<menu>
<li>菜单一</li>
<li>菜单二</li>
<li>菜单三</li>
</menu>
<details>
<summary>这是一个概要</summary>
<p>这是一个概要详情内容!</p>
</details>
二、自定义列表
1、声明display:item
2、list-style-position默认值为outside,项目符号显示不出来,将值修改为inside,或者定义margin值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表元素</title>
<style>
body{
font-size:1.5em;
}
.defineList{
/* list-style-type这个属性是可继承的,可以设置在父元素上,如下 */
list-style-type: square;
}
.defineList p{
display: list-item;
/* margin-left:40px; */
list-style-position: inside;
/* list-style-type: square; */
}
</style>
</head>
<body>
<div class="defineList">
<p>自定义列表项目一</p>
<p>自定义列表项目二</p>
<p>自定义列表项目三</p>
</div>
</body>
</html>