【 html+css 绚丽Loading 】000037 六合归一心

于 2024-09-05 09:00:00 发布
阅读量653 收藏 7
点赞数 12
分类专栏： # html+css 绚丽Loading 文章标签： html css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33650655/article/details/141907984
版权

前言：哈喽，大家好，今天给大家分享html+css 绚丽Loading！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕

共同探索软件研发！敬请关注【宝码香车】
csdngif标识

目录

📚💡📝🗂️✍️🛠️💻🚀🎉🏗️🌐🖼️🔗📊👉🔖⚠️🌟🔐⬇️·正文开始⬇️·🎥😊🎓📩😺🌈🤝🤖📜📖📋🔍✅🧰❓📄📢📈 🙋1️⃣2️⃣3️⃣

📚一、效果

描述

📚二、信息

💡1.简介：

六合归一心，一款源自修真界的神秘兵器，由一个圆形组成，象征着宇宙中的六合之道，蕴含着东、南、西、北、上、下的六合之力。这款兵器的独特之处在于其运行方式，会从原先的一个圆形自动生成五个大小不一样的圆形，这六个圆形顺时针依次绕同一个不在圆上的圆心旋转，当运行到180度的位置的时候，各个圆形之间的间距最大，当运行360度的时候，各个圆形重叠在一起，如此循环往复，象征着六合之道的归一与分散。

💡2.外观描述：

外观描述：六合归一心的圆形由纯净的灵石雕刻而成，表面镶嵌着象征东、南、西、北、上、下的神秘符文，这些符文蕴含着修真者对六合之道的理解。在使用时，从原先的一个圆形自动生成五个大小不一样的圆形，这六个圆形顺时针依次绕同一个不在圆上的圆心旋转，当运行到180度的位置的时候，各个圆形之间的间距最大，当运行360度的时候，各个圆形重叠在一起，如此循环往复，如同六合之道的归一与分散，形成一种神秘的归一模式。

💡3.使用方式：

使用方式：在使用六合归一心时，使用者需将归一心握在手中，集中精神，与归一心中的灵力产生共鸣。当共鸣达到一定程度时，从原先的一个圆形自动生成五个大小不一样的圆形，这六个圆形顺时针依次绕同一个不在圆上的圆心旋转，当运行到180度的位置的时候，各个圆形之间的间距最大，当运行360度的时候，各个圆形重叠在一起，如此循环往复，形成一种神秘的归一模式，象征着六合之道的归一与分散。

💡4.战斗方式：

战斗方式：在战斗中，六合归一心可以释放出六合之道的力量，形成各种攻击方式。例如，当圆形间距最大时，可以释放出分散的力量，攻击敌人；当圆形重叠在一起时，可以释放出归一的力量，稳固自身。同时，六合归一心的循环往复过程，也可以让使用者在战斗中保持灵力的平衡，避免过度消耗，从而达到持续战斗的效果。

此外，六合归一心还具有强大的防御能力。在使用者遭受攻击时，六合归一心会自动运转，形成一个由六合之道力量组成的护盾，抵挡敌人的攻击。这种护盾不仅能够抵挡物理攻击，还能够抵挡灵力攻击，甚至能够抵挡一些特殊攻击，如灵魂攻击、诅咒攻击等。

💡5.提升：

六合归一心的提升：六合归一心不仅是一件强大的兵器，更是一件修炼的法宝。使用者可以通过修炼与归一心的共鸣，提升自身的修为。在修炼过程中，六合归一心会以六合之道归一的方式，引导使用者吸收和转化六合之道的力量，提升自身的灵力和元素掌控能力。同时，这种六合之道归一方式也能够引导使用者理解六合之道的归一与分散，提升自身的智慧和境界。

💡6.传说：

六合归一心的传说：据传，六合归一心是由修真界的大能者所创，融合了六合之道的力量和修真者的智慧，是一件极其珍贵的法宝。拥有六合归一心的修真者，不仅能够获得强大的力量，还能够获得宇宙万物的祝福，成为修真界的大能者。但是，六合归一心也有其危险性，如果使用者的修为不足，或者心性不纯，就有可能被归一心中的灵力反噬，甚至被归一心的六合之道归一过程所控制，成为归一心的奴隶。

总的来说，六合归一心是一款强大的修真界兵器，它不仅具有强大的攻击和防御能力，更具有独特的六合之道归一机制，让使用者在战斗和修炼中保持灵力的平衡，是一款极其珍贵的法宝。同时，六合归一心的六合之道归一过程也象征着六合之道的归一与分散，让使用者在修炼中理解宇宙的奥秘，提升自身的智慧和境界。

因环境变化，修真界已不在，只留下残影存世，望各位道友笑纳，代码如下

📚三、源代码，上代码，可以直接复制使用

🎥效果

描述

🗂️目录

描述

✍️html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <link rel="stylesheet" type="text/css" href="./style.css"/>
    <title>000037</title>

</head>
<body>
<div class="container">
    <h1 style="text-align: center;color:#fff;margin-bottom: 20px;padding-top: 100px; text-shadow: 0 3px 3px #4c6ed3;">
        【 html+css 绚丽Loading 】
        <br>
        000037 六合归一心
    </h1>

    <div class="wrapper">
        <div class="load000037"></div>
    </div>






</div>
</body>
</html>

✍️css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.container {
    min-height: 100vh;
    background-color: #0e1538;
}

.wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 40px;
    margin-top: 50px;
    margin-bottom: 50px;
}

/*main loading*/
.load000037 {

    font-size: 40px;  /*控制大小*/

    text-indent: -9999em;

    overflow: hidden;

    width: 1em;

    height: 1em;

    border-radius: 50%;


    position: relative;

    -webkit-animation: load000037Ani 1.7s infinite ease;

    animation: load000037Ani 1.7s infinite ease;

}

@-webkit-keyframes load000037Ani {

    0% {

        -webkit-transform: rotate(0deg);

        transform: rotate(0deg);

        box-shadow: -0.11em -0.83em 0 -0.4em #ffffff, -0.11em -0.83em 0 -0.42em #ffffff, -0.11em -0.83em 0 -0.44em #ffffff, -0.11em -0.83em 0 -0.46em #ffffff, -0.11em -0.83em 0 -0.477em #ffffff;

    }

    5%,

    95% {

        box-shadow: -0.11em -0.83em 0 -0.4em #ffffff, -0.11em -0.83em 0 -0.42em #ffffff, -0.11em -0.83em 0 -0.44em #ffffff, -0.11em -0.83em 0 -0.46em #ffffff, -0.11em -0.83em 0 -0.477em #ffffff;

    }

    30% {

        box-shadow: -0.11em -0.83em 0 -0.4em #ffffff, -0.51em -0.66em 0 -0.42em #ffffff, -0.75em -0.36em 0 -0.44em #ffffff, -0.83em -0.03em 0 -0.46em #ffffff, -0.81em 0.21em 0 -0.477em #ffffff;

    }

    55% {

        box-shadow: -0.11em -0.83em 0 -0.4em #ffffff, -0.29em -0.78em 0 -0.42em #ffffff, -0.43em -0.72em 0 -0.44em #ffffff, -0.52em -0.65em 0 -0.46em #ffffff, -0.57em -0.61em 0 -0.477em #ffffff;

    }

    100% {

        -webkit-transform: rotate(360deg);

        transform: rotate(360deg);

        box-shadow: -0.11em -0.83em 0 -0.4em #ffffff, -0.11em -0.83em 0 -0.42em #ffffff, -0.11em -0.83em 0 -0.44em #ffffff, -0.11em -0.83em 0 -0.46em #ffffff, -0.11em -0.83em 0 -0.477em #ffffff;

    }

}

@keyframes load000037Ani {

    0% {

        -webkit-transform: rotate(0deg);

        transform: rotate(0deg);

        box-shadow: -0.11em -0.83em 0 -0.4em #ffffff, -0.11em -0.83em 0 -0.42em #ffffff, -0.11em -0.83em 0 -0.44em #ffffff, -0.11em -0.83em 0 -0.46em #ffffff, -0.11em -0.83em 0 -0.477em #ffffff;

    }

    5%,

    95% {

        box-shadow: -0.11em -0.83em 0 -0.4em #ffffff, -0.11em -0.83em 0 -0.42em #ffffff, -0.11em -0.83em 0 -0.44em #ffffff, -0.11em -0.83em 0 -0.46em #ffffff, -0.11em -0.83em 0 -0.477em #ffffff;

    }

    30% {

        box-shadow: -0.11em -0.83em 0 -0.4em #ffffff, -0.51em -0.66em 0 -0.42em #ffffff, -0.75em -0.36em 0 -0.44em #ffffff, -0.83em -0.03em 0 -0.46em #ffffff, -0.81em 0.21em 0 -0.477em #ffffff;

    }

    55% {

        box-shadow: -0.11em -0.83em 0 -0.4em #ffffff, -0.29em -0.78em 0 -0.42em #ffffff, -0.43em -0.72em 0 -0.44em #ffffff, -0.52em -0.65em 0 -0.46em #ffffff, -0.57em -0.61em 0 -0.477em #ffffff;

    }

    100% {

        -webkit-transform: rotate(360deg);

        transform: rotate(360deg);

        box-shadow: -0.11em -0.83em 0 -0.4em #ffffff, -0.11em -0.83em 0 -0.42em #ffffff, -0.11em -0.83em 0 -0.44em #ffffff, -0.11em -0.83em 0 -0.46em #ffffff, -0.11em -0.83em 0 -0.477em #ffffff;

    }

}

📚四、更多案例，上代码，可以直接复制使用

🎥效果

描述

🗂️目录

描述

✍️html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <link rel="stylesheet" type="text/css" href="./style.css"/>
    <title>000037</title>

</head>
<body>
<div class="container">
    <h1 style="text-align: center;color:#fff;margin-bottom: 20px;padding-top: 100px; text-shadow: 0 3px 3px #4c6ed3;">
        【 html+css 绚丽Loading 】
        <br>
        000037  六合归一心 更多案例
    </h1>

    <div class="loadType">
        <div class="loadCard">
            <div class="loadTop">
                <div class="load000037"></div>
                <div class="loadMsg">
                    加载中•••
                </div>
            </div>
            <div class="loadTitle">
                loading 在<span>上边</span>
            </div>
        </div>
        <!--            loading在下-->
        <div class="loadCard">
            <div class="loadBottom">
                <div class="load000037"></div>
                <div class="loadMsg">
                    加载中•••
                </div>
            </div>
            <div class="loadTitle">
                loading 在<span>下边</span>
            </div>
        </div>

        <!--            loading在左-->
        <div class="loadCard">
            <div class="loadLeft">
                <div class="load000037"></div>
                <div class="loadMsg">
                    加载中•••
                </div>
            </div>
            <div class="loadTitle">
                loading 在<span>左边</span>
            </div>
        </div>

        <!--            loading在右-->
        <div class="loadCard">
            <div class="loadRight">
                <div class="load000037"></div>
                <div class="loadMsg">
                    加载中•••
                </div>
            </div>
            <div class="loadTitle">
                loading 在<span>右边</span>
            </div>
        </div>

    </div>

    <div class="tip">
        若有大小、颜色、位置不太合适的，使用的时候调节一下即可
    </div>


</div>
</body>
</html>

✍️css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.container {
    min-height: 100vh;
    background-color: #0e1538;
}

/*demo*/
.loadType{
    display: flex;
    justify-content: center;
    gap:20px;
    color:#fff;
}

.loadType .loadCard{
    display: flex;
    flex-direction: column;
    align-items: center;
    background:#4c6ed3;
    padding:15px;
}

.loadCard>div:first-child{
    height:50px; /**/
}
.loadTitle{
    margin-top: 30px;
    padding:10px;
    background: #4fa7dd;

}
.loadTitle span{
    color: #bb4429;
    font-weight: 600;
}

/*loading在下*/
.loadTop,.loadBottom,.loadLeft,.loadRight{
    display: flex;
    align-items: center;
    gap:10px;
}
.tip {
    text-align: center;
    color: #fff;
    font-size: 20px;
    margin-top: 30px;
}
/*上*/
.loadTop{
    flex-direction: column;
}
/*下*/
.loadBottom{
    flex-direction: column-reverse;
}

/*左*/
.loadRight{
    flex-direction: row;
}
/*右*/
.loadRight{
    flex-direction: row-reverse;
}

/*加载文字*/
.loadMsg{
    width: fit-content;
    font-size: 16px;
    font-family: monospace;
    clip-path: inset(0 3ch 0 0);
    animation: loadMsgAni 1s steps(4) infinite;
}
/*加载文字动画*/
@keyframes loadMsgAni {to{clip-path: inset(0 -1ch 0 0)}}

/*main loading*/
.load000037 {

    font-size: 20px; /*控制大小*/

    text-indent: -9999em;

    overflow: hidden;

    width: 1em;

    height: 1em;

    border-radius: 50%;


    position: relative;

    -webkit-animation: load000037Ani 1.7s infinite ease;

    animation: load000037Ani 1.7s infinite ease;

}

@-webkit-keyframes load000037Ani {

    0% {

        -webkit-transform: rotate(0deg);

        transform: rotate(0deg);

        box-shadow: -0.11em -0.83em 0 -0.4em #ffffff, -0.11em -0.83em 0 -0.42em #ffffff, -0.11em -0.83em 0 -0.44em #ffffff, -0.11em -0.83em 0 -0.46em #ffffff, -0.11em -0.83em 0 -0.477em #ffffff;

    }

    5%,

    95% {

        box-shadow: -0.11em -0.83em 0 -0.4em #ffffff, -0.11em -0.83em 0 -0.42em #ffffff, -0.11em -0.83em 0 -0.44em #ffffff, -0.11em -0.83em 0 -0.46em #ffffff, -0.11em -0.83em 0 -0.477em #ffffff;

    }

    30% {

        box-shadow: -0.11em -0.83em 0 -0.4em #ffffff, -0.51em -0.66em 0 -0.42em #ffffff, -0.75em -0.36em 0 -0.44em #ffffff, -0.83em -0.03em 0 -0.46em #ffffff, -0.81em 0.21em 0 -0.477em #ffffff;

    }

    55% {

        box-shadow: -0.11em -0.83em 0 -0.4em #ffffff, -0.29em -0.78em 0 -0.42em #ffffff, -0.43em -0.72em 0 -0.44em #ffffff, -0.52em -0.65em 0 -0.46em #ffffff, -0.57em -0.61em 0 -0.477em #ffffff;

    }

    100% {

        -webkit-transform: rotate(360deg);

        transform: rotate(360deg);

        box-shadow: -0.11em -0.83em 0 -0.4em #ffffff, -0.11em -0.83em 0 -0.42em #ffffff, -0.11em -0.83em 0 -0.44em #ffffff, -0.11em -0.83em 0 -0.46em #ffffff, -0.11em -0.83em 0 -0.477em #ffffff;

    }

}

@keyframes load000037Ani {

    0% {

        -webkit-transform: rotate(0deg);

        transform: rotate(0deg);

        box-shadow: -0.11em -0.83em 0 -0.4em #ffffff, -0.11em -0.83em 0 -0.42em #ffffff, -0.11em -0.83em 0 -0.44em #ffffff, -0.11em -0.83em 0 -0.46em #ffffff, -0.11em -0.83em 0 -0.477em #ffffff;

    }

    5%,

    95% {

        box-shadow: -0.11em -0.83em 0 -0.4em #ffffff, -0.11em -0.83em 0 -0.42em #ffffff, -0.11em -0.83em 0 -0.44em #ffffff, -0.11em -0.83em 0 -0.46em #ffffff, -0.11em -0.83em 0 -0.477em #ffffff;

    }

    30% {

        box-shadow: -0.11em -0.83em 0 -0.4em #ffffff, -0.51em -0.66em 0 -0.42em #ffffff, -0.75em -0.36em 0 -0.44em #ffffff, -0.83em -0.03em 0 -0.46em #ffffff, -0.81em 0.21em 0 -0.477em #ffffff;

    }

    55% {

        box-shadow: -0.11em -0.83em 0 -0.4em #ffffff, -0.29em -0.78em 0 -0.42em #ffffff, -0.43em -0.72em 0 -0.44em #ffffff, -0.52em -0.65em 0 -0.46em #ffffff, -0.57em -0.61em 0 -0.477em #ffffff;

    }

    100% {

        -webkit-transform: rotate(360deg);

        transform: rotate(360deg);

        box-shadow: -0.11em -0.83em 0 -0.4em #ffffff, -0.11em -0.83em 0 -0.42em #ffffff, -0.11em -0.83em 0 -0.44em #ffffff, -0.11em -0.83em 0 -0.46em #ffffff, -0.11em -0.83em 0 -0.477em #ffffff;

    }

}

到此这篇文章就介绍到这了,更多精彩内容请关注本人以前的文章或继续浏览下面的文章，创作不易，如果能帮助到大家,希望大家多多支持宝码香车~💕

整理不易，点赞关注宝码香车

更多专栏订阅推荐：
👍 html+css+js 绚丽效果
💕 vue
✈️ Electron
⭐️ js
📝 字符串
✍️ 时间对象（Date()）操作

宝码香车
关注
  • 12
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
CSS常用特效
Lee的博客
07-17 1万+
本文是笔者写CSS时常用的套路。不论效果再怎么华丽，万变不离其宗。 1、交错动画 有时候，我们需要给多个元素添加同一个动画，播放后，不难发现它们会一起运动，一起结束，这样就会显得很平淡无奇。那么如何将动画变得稍微有趣一点呢？很简单，既然它们都是同一时刻开始运动的，那么让它们不在同一时刻运动不就可以了吗。如何让它们不在同一时刻运动呢？注意到CSS动画有延迟（delay）这一属性。举个栗子，比如有十个元素播放十个动画，将第二个元素的动画播放时间设定为比第一个元素晚0.5秒（也就是将延迟设为0.5秒），其
css权重
LIANG_XJT的博客
06-08 2602
css权重 css权重指的是样式的优先级，有两条或多条样式作用于一个元素，权重高的那条样式对元素起作用，也就是说同一个元素设置多条样式，谁的权重越高那么就那一条对元素起作用，如果权重相同，那么后写的元素就会覆盖前面的写的样式。 下面我们把样式的应用分为几个等级，按照等级来计算权重 1、（！important） 通过图片我们可以发现，原本是蓝色背景的div被它前面设置的样式覆盖掉了，这是因为我在样式属性值后加上了！impor...
CSS入门学习笔记+案例
热门推荐
itboy
06-16 30万+
CSS入门学习 一、CSS简介 1、什么是CSS CSS：Cascading Style Sheet 层叠样式表 是一组样式设置的规则，用于控制页面的外观样式 2、为什么使用CSS 实现内容与样式的分离，便于团队开发 样式复用，便于网站的后期维护 页面的精确控制，让页面更精美 3、CSS作用 页面外观美化 布局和定位 二、基本用法 1、CSS语法 <head> <style> 选择器{ 属性名：属性值; 属性名：属性值; } </style> &l
CSS遮罩层
weixin_44282093的博客
07-19 9477
css遮罩层
css reset
Ada_lake的博客
10-19 2731
什么是 css reset 为什么需要css reset 怎么使用css reset 1. 什么是css reset css Reset 就是用来重置（复位）元素在不同核心浏览器下的默认值，尽量保证元素在不同浏览器下的同一“起跑线” 2. 为什么需要 css reset 不同核心的浏览器对css的解析效果各异，导致所期望的效果跟浏览器的“理解”效果有偏差。 3. 怎么使用css reset 如...
CSS介绍
阳young的博客
03-03 3776
一. css概述 css:层叠样式表, 用来美化html页面的, 比如html为盖房子,css则为装修. css增强了网页的显示能力，并且css代码可以和html代码完全分离. 二. 在html页面引入css 2.1.通过标签上的style属性引入 绝大部分标签都提供style属性，可以通过style属性设置当前标签的css样式这种引入方式不推荐大量使用，会造成页面的混乱. 2.2.通过style标签引入 在head中，可以提供一个style标签，标签内部可以写入css样式 初步实现了css代
css分散对齐
qq_44766377的博客
05-20 2333
在开发过程中一般会遇到表单之类的东西 但是表单的提示文字一般要对齐 （如下图） 使用text-align-last:justify; width: 200px; border: 1px solid red; text-align-last: justify;
CSS定位
weixin_61789925的博客
10-16 4482
定位，即position，css的基本属性之一，分为相对定位relative，绝对定位absolute，固定定位fixed以及粘性定位sticky，现在来一一介绍。
css链接样式
m0_57774967的博客
04-24 2981
不同的链接可以有不同的样式 链接样式 链接样式，可以用任何css属性（如颜色，字体，背景等） 特别的链接，可以有不同的样式，这取决于它们是什么状态 以下四个链接状态： a:link 正常，未访问过的链接 a:visited 用户已访问过的链接 a:hover 当用户鼠标放在链接上时 a:active 链接被点击的那一刻 当设置为若干链路状态的样式，也有一些顺序规则： a:hover必须跟在a:link和a:visited后面 a:active必须跟在a:hover后面 h..
CSS样式
cn_luan的博客
12-20 2533
一、CSS 样式 1、内部样式表（内嵌样式表） 是写到html页面内部，是将所有css代码抽出，单独放到一个<style>标签中 <style> div { color:red; font-size:12px; } </style> style标签理论上可以放在html文档任何地方，但一般会放文档的head标签中 这种方式可以方便控制当前这个页面中的元素样式设置 代码结构清晰，但没有实现结构与样式完全分离 使用内部样式表设定css，通常也被称为嵌入式引入
css3.0参考手册 css3.0参考手册
06-16
css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css...
网页设计期末大作业+html+css
05-25
9个网页布局，学校让做的网站作业，虽然是比较基础的网页静态页面，不过我也希望你能做的规范一些，我们专业制作学生网页作业，div css js 等通过dreamwear的工具实现规范化，比如文件夹的规范，代码写作的规范，...
HTML5+CSS3 精美登陆界面源码
01-19
CSS3引入了许多新功能，如选择器的扩展（如:nth-child()、:hover、:focus等），使得更精细的样式控制成为可能；多列布局（column-count, column-gap等），让创建杂志风格的布局变得轻松；以及最重要的，动画和过渡...
postcss-windicss:Windi CSS的PostCSS集成
04-01
postcss-windicss :test_tube: 过期的。 :warning: 不鼓励使用此软件包，因为PostCSS的API存在一些限制。 将我们用于每个专用框架/构建工具，以获取最佳的开发经验和性能。 该插件应该是使用Windi CSS的最后选择...
CSS新世界1
08-04
【CSS新世界1】这本书是关于CSS3的深入探索，主要介绍了CSS3的模块化发展以及新特性。书中首先回顾了CSS3出现的历史背景，强调了模块化带来的灵活性和扩展性，让读者对CSS3有一个整体的认识。接着，作者详细讲解了...
Qt将数据库中的数据导出为html
qq_15181569的博客
09-04 448
【代码】Qt将数据库中的数据导出为html。
巧用 HTML 列表：＜ul＞、＜ol＞、＜dl＞的实用指南
前端基地
08-30 900
本文深入阐释 HTML 列表，涵盖无序列表、容豁级标签、有序列表、定义列表及多级列表等。丰富讲解与实际案例紧密结合，助力新手快速上手，让经验丰富者也能收获实用知识与技巧。为网页创作之路注入新活力，快来开启精彩的学习之旅。
HTML笔记4(1)
最新发布
2401_85195615的博客
09-04 323
标记用于标识表格某行中的一个单元格开始用于标识表格某行中的一个单元格结束一对标记定义一列标记书写在内，一对标记内含有多少对标记，就表示该行有多少单元格123一二三我们可以看到这样写出来的表格第一没有边框，其次长宽没法调节，这些标记没有属性，那么我们如何美化呢，不必担心，CSS样式搞定😀。
前端基础面试题·第一篇——HTML
2301_76380626的博客
09-04 879
前端基础面试题·第一篇——HTML
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

宝码香车

你的鼓励将是我创作的最大动力！

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值