Rumah >hujung hadapan web >tutorial css >css 如何设置带有正方形项目的列表
css 如何设置带有正方形项目的列表
- 藏色散人asal
- 2021-01-25 09:44:205790semak imbas
css设置带有正方形项目的列表的方法：首先创建一个HTML示例文件；然后使用ul无序列表标签，并指定“list-style-type”为“square”即可设置带有正方形项目的列表。
本教程操作环境：Windows7系统、HTML5&&CSS3版，DELL G3电脑。
推荐：css视频教程
css如何设置带有正方形项目的列表？
设置正方形项目的列表我们需要使用ul无序列表标签，并指定list-style-type为square。
例子：
// css
ul.square {
list-style-type:square; /* 每一项前都是正方形 */
}
// html
<ul class="square">
<li>eight</li>
<li>glasses</li>
<li>of</li>
<li>water</li>
</ul>效果：
下面是一些常用的列表样式：（推荐学习：CSS视频教程）
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
ul.circle {
list-style-type:circle; /* 每一项前都是圆圈 */
}
ul.square {
list-style-type:square; /* 每一项前都是正方形 */
}
ol.upper-roman {
list-style-type:upper-roman; /* 每一项前面都是大写罗马数字 */
}
ol.lower-alpha {
list-style-type:lower-alpha; /* 每一项前都是小写字母 */
}
</style>
</head>
<body>
<ul class="circle">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<ul class="square">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<ol class="upper-roman">
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
<ol class="lower-alpha">
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
</body>
</html>效果：
Atas ialah kandungan terperinci css 如何设置带有正方形项目的列表. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：apache不加载css文件怎么办Artikel seterusnya：css怎么设置文字加粗