HTML基础二

最新推荐文章于 2024-07-12 20:49:16 发布

mikeyPlisetsky

最新推荐文章于 2024-07-12 20:49:16 发布

阅读量415

点赞数 1

文章标签： html 前端 css3

本文链接：https://blog.csdn.net/qq_52198285/article/details/121048132

版权

（以下内容要包含在body里）

1、预排版标记<pre></pre>,保留输入时的格式。怎么进去的，就怎么出来。（笑）

 <pre>
        快乐风男：温蒂，魈，万叶。
        璃玥三霸：钟离 ，魈，甘雨。
        出门不带钱系列：钟离，雷神。
        烹饪二倍系列：香菱，芭芭拉，迪奥娜。
    </pre>

2、列表标记（嵌套<li></li>使用）

（1）无序列表<ul></ul>。无序表前面的符号可以设置。

disc	实心圆
circle	空心圆
square	实心正方形

（2）有序列表<ol></ol>。order list的缩写。

1	按数字排序
a	小写字母排序
A	按大写字母排序
i	小写罗马数字排序
I	按大写罗马数字排序

【注：】有序和无序可以嵌套使用。

  <ul>
        <li>蒙德</li>
        <ul type="cricle">
            <li>温蒂</li>
            <li>迪卢克</li>
            <li>可莉</li>
            <li>阿贝多</li>
        </ul>
        <li>璃玥</li>
        <ol type="1">
            <li>钟离</li>
            <li>魈</li>
            <li>刻情</li>
            <li>重云</li>
        </ol>
        <li>稻妻</li>
        <ol type="i">
            <li>雷神</li>
            <li>八重神子</li>
            <li>托马</li>
            <li>枫原万叶</li>
        </ol>
        <li>整个嵌套的</li>
        <ol type="A">
            <li> 治愈系
                <ul type="squera">
                    <li>芭芭拉</li>
                    <li>点赞哥</li>
                    <li>七七</li>
                    <li>琴</li>
                </ul>
            </li>
            <li>套盾
                <ol type="I">
                    <li>迪奥娜</li>
                    <li>艾诺尔</li>
                    <li>钟离</li>
                    <li>托马</li>

                </ol>
            </li>
        </ol>
    </ul>

3、容器标记

div	span
块级元素，封装	行内元素
大块文档引用，实现结构和表现分离	在一行中想要突出显示几个字

简易写了个代码大致描述一下提瓦特大陆三个国度的分布情况，代码如下：

（不知道什么意思的单词直译就是它的功能，超便利！）

<html>
<head>
 <style>
        * {
            margin: 0;
            padding: 0;
        }

        html {
            width: 100%;
            height: 100%;
        }

        body {
            width: 100%;
            height: 100%;

        }


        .Meng {

            width: 400px;
            height: 200px;
            position: relative;
            background-color: aqua;
            text-align: center;
            font-size: 45px;
            color: red;
        }
        .Meng .Long
        {
            /* margin-top: 10px; */
            font-size: 20px;
            color: white;
            background-color: teal;
            width: 150px;
            height: 80px;
            position: absolute;
            left: 250px;

        }
        .Meng .Long .zi
        {
            margin-top: 20px;
        }

        .Meng .Li {
            width: 500px;
            height: 300px;
            position: absolute;
            margin-top: 80px;
            background-color: gold;
            text-align: center;
            font-size: 45px;
            color: black;
        }

        .Meng .Li .wen
        {
            margin-top: 50px;
        }

        .Dao {
            width: 400px;
            height: 200px;
            position: relative;
            left: 700px;
            margin-top: 300px;
            background-color: rgb(118, 12, 204);
            text-align: center;
            font-size: 45px;
            color: pink;
        }
    </style>

</head>

<body>
    <div class="Meng">
        这里是蒙德，愿风神忽悠你！<span style="color: seagreen;">欸嘿！</span>

        <div class="Li">
            <p class="wen">
                这里是璃玥，又是<span style="color: red;">不带钱</span>的一天啊，钟离大人······
            </p>
        </div>
        <div class="Long">
            <p class="zi">这里是龙脊雪山，冷得很！</p>

        </div>

    </div>
    <div class="Dao">
        这里是稻妻，想<span style="color: black;">雷神大人</span>赐你奶香的一刀吗？
    </div>
</body>
</html>

mikeyPlisetsky

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
HTML基础二

（以下内容要包含在body里）1、预排版标记<pre></pre>,保留输入时的格式。怎么进去的，就怎么出来。（笑） <pre> 快乐风男：温蒂，魈，万叶。璃玥三霸：钟离，魈，甘雨。出门不带钱系列：钟离，雷神。烹饪二倍系列：香菱，芭芭拉，迪奥娜。 </pre>2、列表标记（嵌套<li></li>使用）（1）无序列表<u...
复制链接

扫一扫