css 如何设置带有正方形项目的列表_CSS

上一篇: css怎么设置文字加粗下一篇:apache不加载css文件怎么办

css 如何设置带有正方形项目的列表

发布时间：2022-05-17 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了css 如何设置带有正方形项目的列表，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

css设置带有正方形项目的列表的方法：首先创建一个HTML示例文件；然后使用ul无序列表标签，并指定“list-style-tyPE”为“square”即可设置带有正方形项目的列表。

css 如何设置带有正方形项目的列表

本教程操作环境：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 如何设置带有正方形项目的列表

下面是一些常用的列表样式：（推荐学习：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>

效果：

css 如何设置带有正方形项目的列表

以上就是css 如何设置带有正方形项目的列表的详细内容，更多请关注脚本宝典其它相关文章！

脚本宝典总结

以上是脚本宝典为你收集整理的css 如何设置带有正方形项目的列表全部内容，希望文章能够帮你解决css 如何设置带有正方形项目的列表所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

标签：

上一篇: css怎么设置文字加粗下一篇:apache不加载css文件怎么办

猜你在找的CSS相关文章