列表的使用

作者: 蝌蚪1573 | 来源:发表于2017-10-12 02:20 被阅读0次

Python:操作列表
python 列表
Python基础(5) - 列表的操作
HTML：列表实现
列表的使用
列表的使用
Python学习基础知识之列表的介绍以及常见操作
HTML学习笔记（二）
前端学习(九)
HTML5列表的使用

实验三列表的使用

任务一、新闻列表的实现

创建页面3-1用列表实现一个新闻显示版块，要求利用列表方法，适当运用字体、字号间距等的修饰完成新闻列表的定义。显示结果如下

实验三-列表的使用85.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新闻列表的实现</title>
    <style>
        li{
            margin-bottom: 10px;
        }
    </style>
</head>
<body >
<div style="background-color: #E6E7D5;height: 360px;width: 360px">
    <div style="margin-bottom: 30px;">
        <h2 style="font-size: 20px;font-family: 'Microsoft YaHei UI';">暴雪：商业 艺术与技术的平衡之道</h2>
    </div>
    <ul>
        <li>点选名将 抢礼包《千军破》 首服开启</li>
        <li>战国新游《王者天下》开启 抢礼包</li>
        <li>快来玩 《德州扑克》 与人斗其乐无穷</li>
        <li>《十年一剑》真武侠一区开启 抢礼包</li>
        <li>可买卖游戏代码 传魔兽大灾变过审批</li>
        <li>儿时游戏50年变迁 00后迷动画爱网游</li>
        <li>监狱强迫犯人打网游 徐州禁少年进网吧</li>
        <li>ipad成为最赚钱的移动游戏平台</li>
    </ul>
</div>
</body>
</html>

任务二、有序列表的type属性

创建页面3-2.html，利用有序列表的type属性的不同取值，实现下面页面的效果：

实验三-列表的使用148.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>有序列表的type属性</title>
</head>
<body>
    <h2 style="font-size: 16px;font-family: 'Microsoft YaHei UI';">数字列表：</h2>
    <ol type="1">
        <li>苹果</li>
        <li>香蕉</li>
        <li>柠檬</li>
        <li>桔子</li>
    </ol>

    <h4 style="font-size: 16px;font-family: 'Microsoft YaHei UI';">字母列表：</h4>
    <ol type="A">
        <li>苹果</li>
        <li>香蕉</li>
        <li>柠檬</li>
        <li>桔子</li>
    </ol>
    <h2 style="font-size: 16px;font-family: 'Microsoft YaHei UI';">小写字母列表：</h2>
    <ol type="a">
        <li>苹果</li>
        <li>香蕉</li>
        <li>柠檬</li>
        <li>桔子</li>
    </ol>
    <h2 style="font-size: 16px;font-family: 'Microsoft YaHei UI';">罗马字母列表：</h2>
    <ol type="I">
        <li>苹果</li>
        <li>香蕉</li>
        <li>柠檬</li>
        <li>桔子</li>
    </ol>
    <h2 style="font-size: 16px;font-family: 'Microsoft YaHei UI';">小写罗马字母列表：</h2>
    <ol type="i">
        <li>苹果</li>
        <li>香蕉</li>
        <li>柠檬</li>
        <li>桔子</li>
    </ol>
</body>
</html>

任务三、无序列表的嵌套

创建页面3-3.html，实现无序列表的嵌套。达到如下显示效果

实验三-列表的使用195.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>无序列表的嵌套</title>
</head>
<body>
    <h2 style="font-size: 16px;font-family: 'Microsoft YaHei UI';">一个嵌套列表</h2>
    <ul>
        <li>咖啡</li>
        <li>茶
            <ul>
                <li>红茶</li>
                <li>绿茶
                    <ul>
                        <li>中国茶</li>
                        <li>非洲茶</li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>牛奶</li>
    </ul>
</body>
</html>

任务四：创建网页3-4.html，使用有序列表中相关标记格式将下面文本以下图方式显示

文本：

2.3.2有序列表

页面列表可分为：

无序列表

有序列表

定义列表

有序列表的序号类型有：

"1"（阿拉伯数字）

"A"（大写英文字母）

"a"（小写英文字母）

"I"（大写罗马字母）

"i"（小写罗马字母）

显示结果：

实验三-列表的使用357.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>有序列表</title>
</head>
<body>
    <h2 style="font-size: 20px;font-family: 'Microsoft YaHei UI';">2.3.2 有序列表</h2>
    <p>页面列表可分为：</p>
    <ol type="1">
        <li>无序列表</li>
        <li>有序列表</li>
        <li>定义列表</li>
    </ol>
    <p>有序列表的序号类型有：</p>
    <ol type="i">
        <li>"1"（阿拉伯数字）</li>
        <li>"A"（大写英文字母）</li>
        <li>"a"（小写英文字母）</li>
        <li>"I"（大写罗马字母）</li>
        <li>"i"（小写罗马字母）</li>
    </ol>
</body>
</html>

任务五：创建网页3-5.html，应用列表的嵌套使用的相关知识将下面文本以下图方式显示

文本：

2.3.4列表的嵌套使用

当网页中需要复合层次的列表效果时，就可以通过对已有的列表标记进行适当的嵌套使用来实现。

比如，用嵌套列表来表示各种HTML列表：

无序列表

每个列表项前有特定的项目符号，项目符号有：

disc（实心圆点●）

circle（空心圆点○）

sqaure（方块■）