使用CSS,我们可以用不同的方式来设计它们。
您可以使用 list-style-type
属性来设置列表的标记样式。
此属性的允许值如下所示。
下面显示了正在使用的list-style-type属性。
<html>
<head>
<style rel="stylesheet" type="text/css">
li.a {
list-style-type: none;
}
li.b {
list-style-type: disc;
}
li.c {
list-style-type: circle;
}
li.d {
list-style-type: square;
}
li.e {
list-style-type: decimal;
}
li.f {
list-style-type: lower-alpha;
}
li.g {
list-style-type: upper-alpha;
}
li.h {
list-style-type: lower-roman;
}
li.i {
list-style-type: upper-roman;
}
</style>
</head>
<body>
<ul>
<li class="a">Point one</li>
<li class="b">Point two</li>
<li class="c">Point three</li>
<li class="d">Point four</li>
<li class="e">Point five</li>
<li class="f">Point six</li>
<li class="g">Point seven</li>
<li class="h">Point eight</li>
<li class="i">Point nine</li>
</ul>
</body>
</html>
您可以将此属性应用于整个列表或单个列表项。
您可以通过list-style-image属性使用图像作为标记。
以下代码使用图像作为列表标记。
<!DOCTYPE HTML>
<html>
<head>
<style>
ul {
list-style-image: url("https://www..cn/style/download.png");
}
</style>
</head>
<body>
<ul>
<li>XML</li>
<li>CSS</li>
<li>Javascript</li>
<li>Java</li>
<li>SQL</li>
<li>HTML</li>
</ul>
</body>
</html>
您可以使用list-style-position属性指定标记相对于li元素的内容框的位置。
允许的值在内部(标记在内容框内)和外部(标记在内容框外部)。
以下代码显示了list-style-position属性及其使用的值。
<!DOCTYPE HTML>
<html>
<head>
<style>
li.inside {
list-style-position: inside;
}
li.outside {
list-style-position: outside;
}
li {
background-color: lightgray;
}
</style>
</head>
<body>
<ul>
These are the inside items:
<li class="inside">A</li>
<li class="inside">B</li>
<li class="inside">C</li>
These are the outside items:
<li class="outside">D</li>
<li class="outside">E</li>
<li class="outside">F</li>
</ul>
</body>
</html>
list-style是设置所有列表特性的简写属性。
列表样式简写属性的格式如下:
list-style: <list-style-type> <list-style-position> <list-style-image>
以下代码显示如何使用简写列表样式属性。
<html>
<head>
<style type="text/css">
li {
background: mistyrose;
}
li#arrow {
list-style: square url("arrow.png") outside;
}
li#arrow-inside {
list-style: url("arrow.png") inside;
}
li#marker-inside {
list-style: square inside;
}
li#marker-image {
list-style: square url("arrow.png");
}
li#arrow-only {
list-style: url("arrow.png");
}
li#marker {
list-style: circle;
}
li#position {
list-style: inside;
}
</style>
</head>
<body>
<ul>
<li id="arrow">All three styles can be provided.</li>
<li id="arrow-inside">The image and the position.</li>
<li id="marker-inside">The marker and the position.</li>
<li id="marker-image">The marker and the image.</li>
<li id="arrow-only">Just the image.</li>
<li id="marker">Just the marker.</li>
<li id="position">Just the position.</li>
</ul>
</body>
</html>
属性 | 描述 | CSS |
---|---|---|
line-height | 设置行高 | 1 |
list-style-image | 将图像设置为列表项目标记 | 1 |
list-style-position | 将列表项目标记设置为内部或外部 | 1 |
list-style-type | 设置列表项目标记的类型 | 1 |
list-style | 在一个声明中设置列表属性 | 1 |
CSS概述1. Cascading Style Sheets 层叠样式表,它可以控制多重网页的样式和布局;2. 需具备的基础知识:HTML、XHTML;3. 主要实...
CSS 下拉菜单使用 CSS 创建一个鼠标移动上去后显示下拉菜单的效果。基本下拉菜单当鼠标移动到指定元素上时,会出现下拉菜单。 实...
CSS 导航栏 导航栏熟练使用导航栏,对于任何网站都非常重要。使用 CSS 你可以转换成好看的导航栏而不是枯燥的 HTML 菜单。 导航...
如今,淘宝撑起了中国电商的半边天,淘宝店铺多如麻,淘宝竞争越来越激烈,除了大打价格战就是靠精美的店铺装修来吸引浏览者的驻...
CSS 背景CSS 背景属性用于定义 HTML 元素的背景。CSS 属性定义背景效果:background-colorbackground-imagebackground-repeatbac...