本文摘自PHP中文网,作者藏色散人,侵删。
css设置带有正方形项目的列表的方法:首先创建一个HTML示例文件;然后使用ul无序列表标签,并指定“list-style-type”为“square”即可设置带有正方形项目的列表。
本教程操作环境:Windows7系统、HTML5&&CSS3版,DELL G3电脑。
推荐:css视频教程
css如何设置带有正方形项目的列表?
设置正方形项目的列表我们需要使用ul无序列表标签,并指定list-style-type为square。
例子:
1 2 3 4 5 6 7 8 9 10 11 | ul.square {
list-style-type:square;
}
<ul class = "square" >
<li>eight</li>
<li>glasses</li>
<li>of</li>
<li>water</li>
</ul>
|
效果:
下面是一些常用的列表样式:(推荐学习:CSS视频教程)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | <!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>
|
效果:
以上就是css 如何设置带有正方形项目的列表的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
css如何设置字体位置
css first-child 和nth-child 区别是什么
纯css实现小箭头或三角形标志
css怎么实现英文不换行
css中skew是什么意思
css如何设置圆角
css中伪类和伪元素有什么区别
css怎么设置边框的宽度
css设置背景透明度有什么方式
css class和id选择器的区别是什么
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » css 如何设置带有正方形项目的列表