网站推广.NET

网站推广.NET

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

来源:互联网

本教程操作环境:Windows7系统、HTML5&&CSS3版,DELL G3电脑。

推荐:css视频教程

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

设置正方形项目的列表我们需要使用ul无序列表标签,并指定list-style-type为square。

立即学习“前端免费学习笔记(深入)”;

例子:

// cssul.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>

效果:

css教程