05 CSS通用样式--列表

最新推荐文章于 2024-03-08 14:14:04 发布

「已注销」

最新推荐文章于 2024-03-08 14:14:04 发布

阅读量218

点赞数

文章标签： Bootstrap HTML

本文链接：https://blog.csdn.net/qq_45240749/article/details/102843704

版权

CSS通用样式--列表

普通列表
定义列表

普通列表

HTML列表结构可分为两种类型：有序列表和无序列表。无序列表使用项目符号来表示列表，而有序列表则使用编号来标识列表的项目顺序。具体使用标签如下：

ul：标识无序列表
ol：标识有序列表
li：标识列表项目

列表样式在默认状态下，呈现缩进显示，并带有列表项目符号。Bootstrap3.0定义了list-unstyled类样式，使用它可以移除默认的list-style样式，清理左侧填充，并允许对直接子节点列表项呈现默认样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清除列表</title>
    <link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css">
</head>
<body>
    <ul class="list-unstyled">
        <li>首页</li>
        <li>二手市场
            <ul>
                <li>二手电脑/配件、笔记本</li>
                <li>数码产品、数码相机</li>
            </ul>
        </li>

    </ul>
</body>
</html>

如果让列表项目水平分布，则需要定义行内列表，使用display:inline-block; 让列表水平排列成一行，为此，Bootstrap3.0定义了list-inline类，同时设置每项都有少量的内补。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行内列表</title>
    <link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css">
</head>
<body>
    <ul class="list-inline">
        <li>首页</li>
        <li>二手车</li>
        <li>二手市场</li>
    </ul>
</body>
</html>

定义列表

定义列表是一种特殊的结构，它包括词条和解释两块内容。包含的标签如下：

dl：标识定义列表
dt：标识词条
dd：标识解释

Bootstrap3.0优化了定义列表样式，加粗显示词条（dt），重设了定义列表缩进和间距。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定义列表</title>
    <link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css">
</head>
<body>
    <dl>
        <dt>知无不言、言无不尽</dt>
        <dd>知道的就说，要说就毫不保留</dd>
        <dt>智者千虑，必有一失</dt>
        <dd>不管多聪明的人，在很多次的考虑中，也一定会出现个别错误</dd>
    </dl>
</body>
</html>

可以通过dl-horizontal类样式让解释与词条并列显示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>并列显示</title>
    <link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css">
</head>
<body>
    <dl class="dl-horizontal">
        <dt>知无不言、言无不尽</dt>
        <dd>知道的就说，要说就毫不保留</dd>
        <dt>智者千虑，必有一失</dt>
        <dd>不管多聪明的人，在很多次的考虑中，也一定会出现个别错误</dd>
    </dl>
</body>
</html>

通过引入text-overflow类样式，将会对水平定义列表过长而无法在左栏中完全显示的列名截断一部分。而在较窄的视口（宽度）中，会改变成垂直形式来显示，以便适应当前屏幕。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>溢出显示</title>
    <link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css">
</head>
<body>
    <dl class="dl-horizontal text-overflow">
        <dt>知无不言、言无不尽qqqqqqqqqqqqqqqqqqqqqqq</dt>
        <dd>知道的就说，要说就毫不保留</dd>
        <dt>智者千虑，必有一失</dt>
        <dd>不管多聪明的人，在很多次的考虑中，也一定会出现个别错误</dd>
    </dl>
</body>
</html>

参考代码：代码

「已注销」

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
05 CSS通用样式--列表

CSS通用样式--列表普通列表定义列表普通列表 HTML列表结构可分为两种类型：有序列表和无序列表。无序列表使用项目符号来表示列表，而有序列表则使用编号来标识列表的项目顺序。具体使用标签如下：ul：标识无序列表ol：标识有序列表li：标识列表项目列表样式在默认状态下，呈现缩进显示，并带有列表项目符号。Bootstrap3.0定义了list-unstyled类样式，使用它可以移...
复制链接

扫一扫