css设置带有正方形项目的列表的方法：首先创建一个HT ML 示例文件；然后使用ul无序列表标签，并指定“list -s tyle -t y PE ”为“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> ei ght</li>
<li>glasses</li>
<li>of</li>
<li>water</li>
</ul>效果：
下面是一些常用的列表样式：（推荐学习：CSS视频教程）
<!DOCTYPE html>
<html >
<head>
< ;m eta charset="UTF-8">
<t IT le>Document</title>
<style>
ul.circle {
list-style-type:circle; /* 每一项前都是 圆 圈 */
}
ul.square {
list-style-type:square; /* 每一项前都是正方形 */
}
ol.upper- rom an {
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 如何设置带有正方形项目的列表 所遇到的问题。
如果觉得 网站内容还不错，欢迎将 推荐好友。
查看更多关于css 如何设置带有正方形项目的列表的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did199279