网站制作教程:如何使用 CSS 设置列表样式

你的网络首码项目网 网站建设来源:你的网络首码项目网评论293字数 1540阅读模式

HTML列表可以使用CSS应用许多不同的样式。以下是一些常用的。

列表样式类型

确定项目符号的外观。有关可能值的信息,请参阅列表样式类型页面。文章源自你的网络首码项目网-https://www.youranweb.com/269.html

<!DOCTYPE html>
<title>Example</title>
<style>
  ul {
    font-size: 1.5em;
    list-style-type: circle;
  }
</style>

<ul>
  <li>列表项一</li>
  <li>清单项目二</li>
  <li>清单项目三</li>
</ul>

列表样式图像

有关将图像用于项目符号点的详细信息,请参阅列表样式图像。文章源自你的网络首码项目网-https://www.youranweb.com/269.html

<!DOCTYPE html>
<title>Example</title>
<style>
  ul {
    font-size: 22px;
    list-style-image: url("/pix/samples/bullet1.png");
  }
</style>

<ul> 
  <li>列表项一</li> 
  <li>清单项目二</li> 
  <li>清单项目三</li> 
</ul>

列表样式位置

确定项目符号是位于列表的包含框内还是位于列表的包含框外部。有关详细信息,请参阅列表样式位置。文章源自你的网络首码项目网-https://www.youranweb.com/269.html

<!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>

列表样式

列表样式属性是设置列表属性的简写。文章源自你的网络首码项目网-https://www.youranweb.com/269.html

<!DOCTYPE html>
<title>Example</title>
<style>
  ul {
    font-size: 1.5em;
    list-style: square inside;
  }
</style>

<ul>
  <li>列表项一</li>
  <li>清单项目二</li>
  <li>清单项目三</li>
</ul>

无样式列表

默认情况下,大多数浏览器都以某种方式设置列表样式。例如,大多数列表的每个项目都有一个项目符号点或其他列表标记。列表通常还应用了填充和边距。文章源自你的网络首码项目网-https://www.youranweb.com/269.html

但是,您可能并不总是希望列表以这种方式显示。实际上,开发人员使用无样式列表是很常见的。无样式列表是指已删除任何填充、边距和列表标记的列表。文章源自你的网络首码项目网-https://www.youranweb.com/269.html

无样式列表通常用于网站导航,以及任何列表标记,填充和边距都会妨碍的其他位置。文章源自你的网络首码项目网-https://www.youranweb.com/269.html

下面是无样式列表的示例:文章源自你的网络首码项目网-https://www.youranweb.com/269.html

<!DOCTYPE html>
<title>Example</title>
<style>
  ul {
    font-size: 22px;
    margin: 0;
    padding-left: 0;
    list-style: none;
  }
</style>

<ul>
  <li>Apples</li>
  <li>Oranges</li>
  <li>Watermelons</li>
</ul>

内联列表

您可以更进一步,将无样式列表转换为内联列表。文章源自你的网络首码项目网-https://www.youranweb.com/269.html

您可以通过针对li元素进行设置来执行此操作。display: inline-block;文章源自你的网络首码项目网-https://www.youranweb.com/269.html

<!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>Apples</li>
  <li>Oranges</li>
  <li>Watermelons</li>
</ul>

 文章源自你的网络首码项目网-https://www.youranweb.com/269.html 文章源自你的网络首码项目网-https://www.youranweb.com/269.html

相关文章
weinxin
你的网络首码项目网站长
本站旨在为广大网友提供一个免费、公开且和谐的互联网项目交流平台,所有文章均来自网络和网友投稿,不代表本站任何立场,请勿盲目下载注册参与,以免为您带来不必要的损失。
你的网络首码项目网

发表评论