css列表样式类型示例：list-style-type
<!DOCTYPE html>
<title>Example</title>
<style>
ul {
font-size: 1.5em;
list-style-type: circle;
}
</style>
<ul>
<li>列表项一</li>
<li>清单项目二</li>
<li>清单项目三</li>
</ul>css列表样式-图像示例：list-style-image
<!DOCTYPE html>
<title>Example</title>
<style>
ul {
font-size: 22px;
list-style-image: url("/pix/samples/bullet1.png");
}
</style>
<ul>
<li>列出项目1</li>
<li>列出项目2</li>
<li>列出项目3</li>
</ul>css列表样式位置示例：list-style-position
<!DOCTYPE html>
<title>Example</title>
<style>
ul {
font-size: 1.5em;
}
.inside {
list-style-position: inside;
}
.outside {
list-style-position: outside;
}
</style>
<ul class="inside">
<li>列表项一</li>
<li>清单项目二</li>
<li>清单项目三</li>
</ul>
<ul class="outside">
<li>列表项一</li>
<li>清单项目二</li>
<li>清单项目三</li>
</ul>CSS列表样式速记示例：list-style_shorthand
<!DOCTYPE html>
<title>Example</title>
<style>
ul {
font-size: 1.5em;
list-style: square inside;
}
</style>
<ul>
<li>列表项一</li>
<li>清单项目二</li>
<li>清单项目三</li>
</ul>CSS列表非样式示例：list_unstyled
<!DOCTYPE html>
<title>Example</title>
<style>
ul {
font-size: 22px;
margin: 0;
padding-left: 0;
list-style: none;
}
</style>
<ul>
<li>苹果</li>
<li>橘子</li>
<li>西瓜</li>
</ul>CSS列表无样式内联示例：list_unstyled_inline
<!DOCTYPE html>
<title>Example</title>
<style>
ul {
font-size: 22px;
margin: 0;
padding-left: 0;
list-style: none;
}
ul > li {
display: inline-block;
}
</style>
<ul>
<li>苹果</li>
<li>橘子</li>
<li>西瓜</li>
</ul>文章源自你的网络首码项目网-https://www.youranweb.com/273.html相关文章
你的网络首码项目网站长
本站旨在为广大网友提供一个免费、公开且和谐的互联网项目交流平台，所有文章均来自网络和网友投稿，不代表本站任何立场，请勿盲目下载注册参与，以免为您带来不必要的损失。
评论