CSS3学习教程，从入门到精通，CSS3 列表样式语法知识点及案例代码（8）
CSS3 列表样式语法知识点及案例代码
一、列表样式类型
1. list-style-type 属性
用于指定列表项标记的样式类型。
语法格式：
list-style-type: <值>;
取值说明：
- 对于无序列表（
disc：实心圆（默认值）。circle：空心圆。square：实心方块。none：无标记。
- 对于有序列表（
decimal：数字（默认值）。lower-roman：小写罗马数字。upper-roman：大写罗马数字。lower-alpha：小写英文字母。upper-alpha：大写英文字母。none：无标记。
2. list-style-image 属性
使用图像作为列表项标记。
语法格式：
list-style-image: url(<图像路径>);
3. list-style-position 属性
指定列表项标记的位置。
语法格式：
list-style-position: <值>;
取值说明：
inside：标记在列表项文本框内。outside：标记在列表项文本框外（默认值）。
4. list-style 属性
综合设置列表项标记的类型、图像和位置。
语法格式：
list-style: <类型> <图像> <位置>;
二、案例代码
案例一：基本列表样式设置
DOCTYPE html>
<html>
<head>
<style>
/* 无序列表样式 */
ul {
list-style-type: square; /* 设置无序列表项标记为实心方块 */
}
/* 有序列表样式 */
ol {
list-style-type: upper-roman; /* 设置有序列表项标记为大写罗马数字 */
}
style>
head>
<body>
<h2>无序列表h2>
<ul>
<li>苹果li>
<li>香蕉li>
<li>橙子li>
ul>
<h2>有序列表h2>
<ol>
<li>第一步li>
<li>第二步li>
<li>第三步li>
ol>
body>
html>
说明：此案例展示了如何使用list-style-type属性为无序列表和有序列表设置不同的标记样式。
案例二：使用图像作为列表项标记
DOCTYPE html>
<html>
<head>
<style>
/* 使用图像作为无序列表项标记 */
ul {
list-style-image: url('bullet.png'); /* 使用bullet.png作为列表项标记图像 */
}
style>
head>
<body>
<h2>使用图像作为列表项标记h2>
<ul>
<li>项目一li>
<li>项目二li>
<li>项目三li>
ul>
body>
html>
说明：此案例展示了如何使用list-style-image属性将自定义图像设置为列表项标记。请确保bullet.png图像文件与HTML文件在同一目录下，或者提供正确的图像路径。
案例三：设置列表项标记的位置
DOCTYPE html>
<html>
<head>
<style>
/* 设置列表项标记的位置为inside */
ul {
list-style-position: inside; /* 标记在列表项文本框内 */
width: 200px;
border: 1px solid #ccc;
padding: 10px;
}
style>
head>
<body>
<h2>列表项标记位置设置h2>
<ul>
<li>列表项一li>
<li>列表项二li>
<li>列表项三li>
ul>
body>
html>
说明：此案例展示了如何使用list-style-position属性将列表项标记的位置设置为在文本框内。
案例四：综合设置列表样式
DOCTYPE html>
<html>
<head>
<style>
/* 综合设置列表样式 */
ul {
list-style: square inside url('bullet.png'); /* 同时设置标记类型、位置和图像 */
width: 200px;
border: 1px solid #ccc;
padding: 10px;
}
style>
head>
<body>
<h2>综合设置列表样式h2>
<ul>
<li>综合设置的列表项一li>
<li>综合设置的列表项二li>
<li>综合设置的列表项三li>
ul>
body>
html>
说明：此案例展示了如何使用list-style属性综合设置列表项标记的类型、图像和位置。
案例五：嵌套列表样式
DOCTYPE html>
<html>
<head>
<style>
/* 外层无序列表样式 */
ul.outer {
list-style-type: disc; /* 外层列表项标记为实心圆 */
}
/* 内层无序列表样式 */
ul.inner {
list-style-type: circle; /* 内层列表项标记为空心圆 */
}
style>
head>
<body>
<h2>嵌套列表样式h2>
<ul class="outer">
<li>外层列表项一
<ul class="inner">
<li>内层列表项一li>
<li>内层列表项二li>
ul>
li>
<li>外层列表项二
<ul class="inner">
<li>内层列表项三li>
<li>内层列表项四li>
ul>
li>
ul>
body>
html>
说明：此案例展示了如何为嵌套的列表设置不同的样式，通过为外层和内层列表分别指定不同的list-style-type值，实现层次分明的列表样式。
以上案例涵盖了 CSS3 列表样式的主要语法知识点及应用，通过这些示例可以更好地理解和掌握如何使用 CSS3 自定义列表的外观。
案例六：导航菜单
DOCTYPE html>
<html>
<head>
<style>
/* 导航菜单容器样式 */
.navbar {
background-color: #333;
padding: 10px 0;
}
/* 导航列表样式 */
.navbar ul {
list-style-type: none; /* 去掉默认列表标记 */
margin: 0;
padding: 0;
display: flex; /* 使用弹性布局排列导航项 */
}
/* 导航列表项样式 */
.navbar li {
margin: 0 15px;
}
/* 导航链接样式 */
.navbar a {
color: white;
text-decoration: none;
font-family: Arial, sans-serif;
font-size: 18px;
transition: color 0.3s;
}
/* 鼠标悬停时的链接效果 */
.navbar a:hover {
color: #4CAF50;
}
style>
head>
<body>
<nav class="navbar">
<ul>
<li><a href="#home">首页a>li>
<li><a href="#about">关于我们a>li>
<li><a href="#services">服务a>li>
<li><a href="#contact">联系我们a>li>
ul>
nav>
body>
html>
说明：此案例展示了如何使用 CSS3 列表样式创建一个水平导航菜单，通过设置list-style-type: none去掉默认的列表标记，并使用弹性布局（display: flex）来排列导航项。
案例七：产品特性列表
DOCTYPE html>
<html>
<head>
<style>
/* 产品特性列表容器 */
.features {
width: 80%;
margin: 20px auto;
padding: 20px;
border: 1px solid #ddd;
border-radius: 5px;
}
/* 产品特性列表样式 */
.features ul {
list-style-type: none; /* 去掉默认列表标记 */
padding: 0;
}
/* 使用自定义图像作为列表项标记 */
.features li {
padding: 10px 0;
border-top: 1px dashed #ddd;
}
.features li:first-child {
border-top: none;
}
.features li:before {
content: url('check.png'); /* 使用check.png作为自定义标记 */
margin-right: 10px;
color: #4CAF50;
}
style>
head>
<body>
<div class="features">
<h2>产品特性h2>
<ul>
<li>特性一：高性能处理器li>
<li>特性二：超长续航电池li>
<li>特性三：高清摄像头li>
<li>特性四：轻薄机身设计li>
ul>
div>
body>
html>
说明：此案例展示了如何为产品特性列表设置自定义的图像标记，通过使用list-style-type: none去掉默认标记，并利用伪元素::before添加自定义的图像标记。
案例八：FAQ 列表
DOCTYPE html>
<html>
<head>
<style>
/* FAQ 容器样式 */
.faq {
width: 80%;
margin: 20px auto;
padding: 20px;
border: 1px solid #ddd;
border-radius: 5px;
}
/* FAQ 列表样式 */
.faq ol {
list-style-type: decimal; /* 使用数字作为有序列表标记 */
padding-left: 30px;
}
/* FAQ 项样式 */
.faq li {
margin-bottom: 15px;
padding-bottom: 15px;
border-bottom: 1px solid #eee;
}
.faq li:last-child {
border-bottom: none;
}
/* FAQ 项标题样式 */
.faq h3 {
margin: 0;
color: #3498db;
cursor: pointer;
}
/* FAQ 项内容样式 */
.faq p {
margin: 10px 0 0;
display: none;
line-height: 1.6;
}
/* 当 FAQ 项被激活时显示内容 */
.faq li.active p {
display: block;
}
style>
head>
<body>
<div class="faq">
<h2>常见问题解答h2>
<ol>
<li class="active">
<h3>问题一：如何购买产品？h3>
<p>您可以通过我们的官方网站、手机应用或线下门店购买我们的产品。支持多种支付方式，包括信用卡、支付宝和微信支付。p>
li>
<li>
<h3>问题二：产品保修政策是什么？h3>
<p>我们的产品提供一年免费保修服务，保修期内如出现非人为质量问题，我们将免费为您维修或更换。p>
li>
<li>
<h3>问题三：如何联系客服？h3>
<p>您可以通过网站的在线客服、客服电话或电子邮件与我们联系。客服团队将及时为您解答问题。p>
li>
ol>
div>
body>
html>
说明：此案例展示了如何使用有序列表创建一个 FAQ（常见问题解答）列表，并通过 CSS 控制问题内容的显示与隐藏，结合 JavaScript 可以实现交互式的 FAQ 列表。
案例九：响应式菜单
DOCTYPE html>
<html>
<head>
<style>
/* 导航菜单容器样式 */
.navbar {
background-color: #333;
padding: 10px 0;
}
/* 导航列表样式 */
.navbar ul {
list-style-type: none; /* 去掉默认列表标记 */
margin: 0;
padding: 0;
display: flex; /* 默认使用弹性布局排列导航项 */
}
/* 导航列表项样式 */
.navbar li {
margin: 0 15px;
}
/* 导航链接样式 */
.navbar a {
color: white;
text-decoration: none;
font-family: Arial, sans-serif;
font-size: 18px;
transition: color 0.3s;
}
/* 鼠标悬停时的链接效果 */
.navbar a:hover {
color: #4CAF50;
}
/* 响应式设计：屏幕宽度小于 768px 时的样式 */
@media screen and (max-width: 768px) {
.navbar ul {
display: block; /* 改为块级元素 */
text-align: center;
}
.navbar li {
display: inline-block;
margin: 0 10px;
padding: 10px 0;
border-bottom: 1px solid #444;
}
.navbar li:last-child {
border-bottom: none;
}
}
style>
head>
<body>
<nav class="navbar">
<ul>
<li><a href="#home">首页a>li>
<li><a href="#about">关于我们a>li>
<li><a href="#services">服务a>li>
<li><a href="#contact">联系我们a>li>
ul>
nav>
body>
html>
说明：此案例展示了如何使用 CSS3 列表样式创建一个响应式的导航菜单，在屏幕宽度较小时自动调整布局，以适应移动设备的显示。
以上案例展示了 CSS3 列表样式在实际开发中的多种应用场景，通过合理运用列表样式属性可以创建出美观且功能丰富的列表元素。