Bootstrap

CSS选择器 三大特性 背景

后代选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css简介</title>
    <style>
        h1 {
            color: #333;
            text-align: left;
        }
        p {
            text-indent: 2em;
            color: #444;
            font-size: 14px;
            line-height: 30px;
        }
        a {
            color: #0069c2;
        }
        li {
            font-size: 14px;
            color: #444;
            line-height: 30px;
        }
    </style>
</head>
<body>
    <h1>CSS（层叠样式表）</h1>
    <p>质叠样表(Casading Style Sheets，缩写为CSS)，是一种<a href="#">样式表</a>语言，
        用来播述 HTML XM(包 SVG、MathMLXHTML 之樊的XML 分支语言)文档的呈现。
        CSS 捕述了在屏幕、质、音等其它媒休上的元素应该如何被潼染的问题.</p>
    <p><strong>CSS是开放网络的核心诞言之一</strong>，由 W3C 规范 实现浏览器的准化。
        CSS 节省了大量的工作。样式可以通过定义保存在外部,CSS 文件中，同控制多个网页的布局，
        这意味着开发者不必经历在所有网页上编布局的烦，CSS 被分为不同等汲:CS1 现已废弃，
        CSS2.1 是推荐标准，CSS3分成多个小模块且正在标准化中。</p>
    <ul>
        <li>cSS介绍如果你是Web 开发的斯手
            请务必回读我们的CSS 基础文章以学习 CSS 的含义和用法</li>
        <li>CSS 教程 我们的CSS 学习区 包含了丰富的款程，它们盖了金部基础知识，
            能使你在CSS 之路上从初出茅声到游刃有余</li>
        <li>CSS 参考 针对资深 Web 开发者的<a href="#">详细参考手册</a> ，播述了 CSS 的个属性与概念</li>
    </ul>
</body>
</html>

子代选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>子代选择器</title>
    <style>
        div > span {
            color: red;
        }
    </style>
</head>
<body>
    <h3>子代选择器</h3>
    用div > span来定义作为子代选择器<br>
    <div>
    <span>这是 div 里面的 span</span>
        <p>
            <span>这是 div 里面的 p 里面的 span</span>
        </p>
    </div>
</div>
</body>
</html>

并集选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>并集选择器</title>
    <style>
        div ,
        p ,
        span {
            color: rebeccapurple;
        }
    </style>
</head>
<body>
    <h3>并集选择器</h3>
    并集选择器:选中多组标签设置相同的样式<br>
    选择器写法：选择器1, 选择器2,..., 选择器N（CSS属性），选择器之间用，隔开<br><br>
    <div>这是div标签</div>
    <p>这是p标签</p>
    <span>这是span标签</span>
</div>
</body>
</html>

交集选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>交集选择器</title>
    <style>
        p.box {
            color: rebeccapurple;
        }
    </style>
</head>
<body>
    <h3>交集选择器</h3>
    交集选择器 - 了解<br>
    <strong>交集选择器:</strong> 选中同时满足多个条件的元素<br>
    <strong>选择器写法：</strong>选择器1选择器2{CSS 属性}，选择器之间连写，没有任何符号<br>
    <p class="box">p 标签，使用了类选择器 box</p>
    <p>p 标签</p>
    <div class="box">div 标签，使用了类选择器 box</div>
</body>
</html>

伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪类选择器</title>
    <style>
        a:hover {
            color: red;
            font-size: 100px;
        }
        div:hover {
            color: red;
        }
        .box:hover {
            color: red;
        }
    </style>
</head>
<body>
    <h3>伪类选择器</h3>
    <strong>伪类选择器：</strong>伪类表示元素状态，选中元素的某个状态设置样式。<br>
    <strong>鼠标悬停状态：</strong>选择器：hover{CSS属性} <br>
    <img src="./img/伪类选择器.png" alt=""><br><br>

    <a href="#">这是a标签,超链接</a>
    <div class="box">这是div标签</div>
</body>
</html>

伪类超链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪类超链接（拓展）</title>
    <style>
        a:link {
            color: red;
        }

        a:visited {
            color: green;
        }

        a:hover {
            color: blue;
        }

        a:active {
            color: orange;
        }
    </style>
</head>
<body>
    <h3>伪类超链接（拓展）</h3>
    超链接一共四个状态：<br>
    <ul>
        <li>:link：访问前</li>
        <li>:visited：访问后</li>
        <li><strong>:hover：鼠标悬停</strong></li>
        <li>:active：点击时（激活）</li>
    </ul>
    <img src="./img/伪类选择器-超链接.png"><br><br>

    <a href="#">这是a标签</a><br><br>
    这里访问前红色<br>
    这里访问后绿色<br>
    这里鼠标悬停蓝色<br>
    这里鼠标点击橙色<br>
</body>
</html>

CSS特性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS特性</title>
</head>
<body>
    <h3>CSS特性</h3>
    <strong>CSS特性:化简代码 /定位问题，并解决问题<br></strong>
    <ul>
        <li>继承性</li>
        <li>层叠性</li>
        <li>优先级</li>
    </ul><br>
    
</body>
</html>

CSS继承性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS继承性</title>
    <style>
        body {
            font: 30px/1.5 Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB," 5B8B 4F53",sans-serif;
            color: #777;
        }
    </style>
</head>
<body>
    <h3>CSS继承性</h3>
    <strong>继承性：</strong>子级默认继承父级的文字控制属性<br>
    <h4>如果标签自己有样式则生效自己的样式，不继承</h4>
    <img src="./img/继承性.png"><br><br>
    <strong>在这里全文除了a有自己的，其他的继承这个标签<br></strong>
    font: 12px/1.5 Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB," 5B8B 4F53",sans-serif;<br>
    color: #666;<br>
    <br>
    <div>div 标签</div>
    <p>p 标签</p>
    <span>span 标签</span><br><br>

    <a href="#">这是a标签</a>
</body>
</html>

CSS层叠性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS层叠性</title>
    <style>
        div{
            color: red;
            font-weight: 700;
        }      
        
        div {
            color: green;
            font-size: 30px;
        }
    </style>    ·
</head>
<body>
    <h3>CSS层叠性</h3>
    <strong>特点：</strong><br>

    <ul>
        <li>相同的属性会覆盖:后面的 CSS 属性覆盖前面的 CSS 属性</li>
        <li>不同的属性会叠加:不同的 CSS 属性都生效</li>
    </ul>

    相同的属性会覆盖，这里会变成绿色<br>
    不同的属性会叠加，这里30px并且粗细700 <br>
    <img src="./img/层叠性.png"><br>
    <div>这是div标签，将被覆盖为绿色。</div>

</body>
</html>

CSS优先级

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS优先级</title>
    <style>
        strong {
            color: red ;
        }
        * {
            color: black /* !important */;
        }
        div {
            color: green;
        }
        .box {
            color: blue;
        }
        #id {
            color: orange;
        }
    </style>
</head>
<body>
    <h3>CSS优先级</h3>
    <strong>优先级：</strong>权重，一个标签有多幢选择器，基于不同种类选择器的匹配规则<br>
    <strong>规则:</strong>选择器优先级高的样式生效<br>
    <strong>公式：</strong>通配符择器示，签选择器，类选择器，id选择器，行内样式，!important <br>
    <strong>（选中标签的范围越大，优先级越低）</strong>
    <br><br>
    <div>这是div标签，将被覆盖为绿色。因为div范围比*小</div>
    <div class="box">这是div标签，将被覆盖为蓝色。因为div范围比.box大</div>
    <div class="box" id="id">这是div标签，将被覆盖为橙色。因为id小于类选择器小于标签选择器小于通配符选择器</div>
    <div class="box" id="id" style="color: purple;">这是div标签，将被覆盖为紫色。因为行内样式选择器小于id小于类选择器小于标签选择器小于通配符选择器</div>
    <div class="box" id="id" style="color: purple;">这是div标签，将被覆盖为黑色。因为现在*里有！important小于行内样式选择器小于id小于类选择器小于标签选择器小于通配符选择器</div>
</body>
</html>

优先级权重叠加

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>优先级权重叠加</title>
    <style>
        /* 行内0，id0，类2，标签1 */
        .c1 .c2 div {
            color: blue;
        }
        /* 行内0，id1，类0，标签1 */
        div #box3 {
            color: green;
        }
        /* 行内0，id1，类1，标签0 */
        #box1 .c3 {
            color: orange;
        }
    </style>
</head>
<body>
    <h3>优先级权重叠加</h3>
    <img src="./img/优先级叠加计算.png" alt=""><br>
    <strong>叠加计算:</strong>如果是复合选择器，则需要权重叠加计算<br>
    <strong>公式:</strong> (每一级之间不存在进位)(行内样式，id选择器个数，类选择器个数，标签选择器个数) <br>
    <strong>规则:</strong>
    <ul>
        <li>从左向右依次比较选个数，同一级个数多的优先级高，如果个数相同，则向后比较</li>
        <li>继承权重最低</li>
        <li>!important权重最高</li>
    </ul>
    <br>
    <div id="box1" class="c1">
        <div id="box2" class="c2">
            <div id="box3" class="c3">
                这行文本神魔颜色
            </div>
        </div>
    </div><br>
    <strong>对比发现橙色<br></strong>
    <img src="./img/优先级叠加计算2.png">
</body>
</html>

emmet写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>emmet写法</title>
    <style>
        div {
            height: 10px;
            width: 500px;
            background-color: #fff;
            width: 500px;
            height: 500px;
            background-color: red;
            
        }
    </style>
</head>
<body>
    <h3>emmet写法</h3>
    Emmet写法:代码的简写方式，输入缩写 VS Code 会自动生成对应的代码<br>
    <ul>
        <li>HTML <br> <img src="./img/Emmett写法HTML.png" alt=""></li>
        <li>CSS:大多数简写方式为属性单词的首字母</li>
    </ul><br>
    <div></div>
    <p class="box">这是p标签</p>
    <div class="box">div</div>
    <p id="box">p</p>
    <div></div>
    <p></p>
    <div>
        <p></p>
    </div>
    <div></div>
    <div></div>
    <div></div>
    <div>123</div>
</body>
</html>

背景图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景图</title>
    <style>
        div {
            width: 400px;
            height: 400px;
            background-image: url(./img/背景图1.png);
        }
    </style>
</head>
<body>
    <h3>背景图</h3>
    网页中，使用背景图实现装饰效果<br>
    <strong>属性名：</strong>background-image: url();<br>
    默认平铺效果<br>
    <div>这是div</div>
</body>
</html>

背景图平铺方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景图平铺方式</title>
    <style>
        .div1 {
            width: 400px;
            height: 400px;
            background-color: red;
            background-image: url(./img/背景图1.png);
            background-repeat: no-repeat;
        }
        .div2 {
            width: 400px;
            height: 400px;
            background-color: red;
            background-image: url(./img/背景图1.png);
            background-repeat: repeat;
        }
        .div3 {
            width: 400px;
            height: 400px;
            background-color: red;
            background-image: url(./img/背景图1.png);
            background-repeat: repeat-x;
        }
        .div4 {
            width: 400px;
            height: 400px;
            background-color: red;
            background-image: url(./img/背景图1.png);
            background-repeat: repeat-y;
        }
    </style>
</head>
<body>
    <h3>背景图平铺方式</h3>
    网页中，使用背景图实现装饰效果<br>
    <strong>属性名：</strong>background-repeat: （简称bgr）<br>
    属性值：
    <ul>
        <li>no-repeat 不平铺</li>
        <li>repeat 平铺</li>
        <li>repeat-x x方向平铺</li>
        <li>repeat-y y方向平铺</li>
    </ul>
    <strong>不平铺</strong>
    <div class="div1">这是div</div><br>
    <strong>平铺</strong>
    <div class="div2">这是div</div><br>
    <strong>x方向平铺</strong>
    <div class="div3">这是div</div><br>
    <strong>y方向平铺</strong>
    <div class="div4">这是div</div><br>
</body>
</html>

背景图位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景图位置</title>
    <style>
        .div1 {
            width: 400px;
            height: 400px;
            background-color: red;
            background-image: url(./img/背景图1.png);
            background-position: left;
            background-repeat: no-repeat;
        }
        .div2 {
            width: 400px;
            height: 400px;
            background-color: red;
            background-image: url(./img/背景图1.png);
            background-repeat: no-repeat;
            background-position: right;
        }
        .div3 {
            width: 400px;
            height: 400px;
            background-color: red;
            background-image: url(./img/背景图1.png);
            background-repeat: no-repeat;
            background-position: center;
        }
        .div4 {
            width: 400px;
            height: 400px;
            background-color: red;
            background-image: url(./img/背景图1.png);
            background-repeat: no-repeat;
            background-position: top;
        }
        .div5 {
            width: 400px;
            height: 400px;
            background-color: red;
            background-image: url(./img/背景图1.png);
            background-repeat: no-repeat;
            background-position: bottom;
        }
        .div6 {
            width: 400px;
            height: 400px;
            background-color: red;
            background-image: url(./img/背景图1.png);
            background-repeat: no-repeat;
            background-position: 0 20px;
        }
    </style>
</head>
<body>
    <h3>背景图位置</h3>
    <strong>属性名：</strong>background-position: （简称bgp）<br>
    <img src="img/背景图位置.png" alt="">
    属性值：
    <ul>
        <li>left 左侧</li>
        <li>right 右侧</li>
        <li>center 居中</li>
        <li>top 顶部</li>
        <li>bottom 底部</li>
        <li>直接坐标</li>
    </ul>
    <strong>提示：</strong>
    <ul>
        <li>关键字取值方式写法，可以颠倒取值顺序</li>
        <li>可以只写一个关键字，另一个方向默认为居中;数字只写一个值表示水平方向，垂直方向为居中
            <ul><li>水平：正数向右，负数向左</li>
                <li>竖直：正数向下，负数向上</li></ul>
        </li>
    </ul>
    <h4>这是都是平铺</h4>
    <strong>左侧</strong>
    <div class="div1">这是div</div><br>
    <strong>右侧</strong>
    <div class="div2">这是div</div><br>
    <strong>居中</strong>
    <div class="div3">这是div</div><br>
    <strong>顶部</strong>
    <div class="div4">这是div</div><br>
    <strong>底部</strong>
    <div class="div5">这是div</div><br>
    <strong>坐标</strong>
    <div class="div6">这是div</div><br>
</body>
</html>

背景图缩放

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景图缩放</title>
    <style>
        .div1 {
            width: 400px;
            height: 400px;
            background-color: red;
            background-image: url(./img/背景图1.png);
            background-repeat: no-repeat;
            background-size: cover;
        }
        .div2 {
            width: 400px;
            height: 400px;
            background-color: red;
            background-image: url(./img/背景图1.png);
            background-repeat: no-repeat;
            background-size: contain;
        }
        .div3 {
            width: 400px;
            height: 400px;
            background-color: red;
            background-image: url(./img/背景图1.png);
            background-repeat: no-repeat;
            background-size: 20%;
        }
        .div4 {
            width: 400px;
            height: 400px;
            background-color: red;
            background-image: url(./img/背景图1.png);
            background-repeat: no-repeat;
            background-size: 200px;
        }
    </style>
</head>
<body>
    <h3>背景图缩放</h3>
    <strong>作用：</strong>设置背景图大小。<br>
    <strong>属性名：</strong>background-size（bgz）。<br>
    <strong>常用属性值</strong> <br>
    <ul>
        <li>关键字
            <ul>
                <li>cover：等比例缩放背景图片以完全装入背景区，可能背景图片部分看不见</li>
                <li>contain：等比例缩放背景图片以完全装入背景区，可能背景区部分空白</li>
            </ul>
        </li>
        <li>百分比：根据盒子尺寸计算图片大小</li>
        <li>数字+单位(例如: px)</li>
    </ul>
    <div>这是div</div>
    <strong>关键字cover：等比例缩放背景图片以完全装入背景区，可能背景图片部分看不见</strong>
    <div class="div1">这是div</div><br>
    <strong>关键字contain：等比例缩放背景图片以完全装入背景区，可能背景区部分空白</strong>
    <div class="div2">这是div</div><br>
    <strong>百分比（这里20%）：根据盒子尺寸计算图片大小</strong>
    <div class="div3">这是div</div><br>
    <strong>数字+单位（这里100px）</strong>
    <div class="div4">这是div</div><br>
</body>
</html>

背景图固定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景图固定</title>
    <style>
        .div1 {
            width: 4000px;
            height: 4000px;
            background-color: red;
            background-image: url(./img/背景图1.png);
            background-repeat: no-repeat;
            background-size: cover;
            background-attachment: fixed;

        }
        .div2 {
            width: 400px;
            height: 400px;
            background-color: red;
            background-image: url(./img/背景图1.png);
            background-repeat: no-repeat;
            background-size: cover;
        }
    </style>
</head>
<body>
    <h3>背景图固定</h3>
    <strong>作用：</strong>背景不随元素内容滚动。<br>
    <strong>属性名：</strong>background-attachment: fixed;<br>
    <strong>常用属性值</strong> fixed<br>
    <strong>正常</strong>
    <div class="div2">这是div</div><br>
    <strong>fixed</strong>
    <div class="div1">这是div</div><br>
    
</body>
</html>

背景图符合属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景复合属性</title>
    <style>
        div {
            width: 400px;
            height: 400px;
            /* background: pink url(./img/背景图1.png) no-repeat center/cover; */
            background: pink url(./img/背景图1.png) no-repeat center/contain ;
        }
    </style>
</head>
<body>
    <h3>背景复合属性</h3>
    <strong>属性名:</strong>background (bg) <br>
    <strong>属性值:</strong>背景色 背景图 背景图平铺方式 背景图位置/背景图缩放 背景图固定(空格隔开各个属性值，不区分顺序) <br>
    <img src="./img/背景复合属性.png" alt="" class=""><br>
    <br>
    <div>这是div</div>
</body>
</html>

显示模式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>显示模式</title>
    <style>
        div {
            width: 100px;
            height: 100px;
        }
        .div1 {
            background-color: red;
        }
        .div2 {
            background-color: blue;
        }
        span {
            height: 200px;
            width: 200px;
        }
        .span1 {
            background-color: red;
        }
        .span2 {
            background-color: blue;
        }
        img {
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <h3>显示模式</h3>
    <strong>显示模式：</strong>标签元素的显示方式<br>
    <strong>作用：</strong>布局网页的时候，根据标签的显示模式选择合适的标签摆放内容。<br>
    <ul>
        <li>块级元素
            <ul><li>独占一行</li>
                <li>宽度默认是父级的100%</li>
                <li>增加宽度属性生效</li>
            </ul>
        </li>
        <li>
            行内元素：
            <ul>
                <li>一行共存多个</li>
                <li>内容决定尺寸</li>
                <li>加行宽高无效</li>
            </ul>
        </li>
        <li>行内块元素：
            <ul>
                <li>一行共存多个</li>
                <li>内容决定尺寸</li>
                <li>加行宽高有效</li>
            </ul>
        </li>
    </ul><br><br>
    <!-- 块级元素 -->
    <div class="div1">这是div标签</div>
    <div class="div2">这是div标签</div>
    <!-- 行内元素 -->
    <span class="span1">这是span标签</span>
    <span class="span2">这是span标签</span>
    <!-- 内容块元素 --> <br>
    <img src="./img/背景图1.png" alt="">
    <img src="./img/背景图1.png" alt="">
</body>
</html>

显示模式转换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>转换显示模式</title>、
    <style>
        div {
            width: 100px;
            height: 100px;
        }
        .div1 {
            background-color: red;
            display: inline-block;
        }
        .div2 {
            display: inline;
            background-color: blue;
        }
        span {
            height: 200px;
            width: 200px;
        }
        .span1 {
            display: block;
            background-color: red;
        }
        .span2 {
            display: inline-block;
            background-color: blue;
        }
        img {
            width: 200px;
            height: 200px;
            display: block;
        }
    </style>
</head>
<body>
    <h3>转换显示模式</h3>
    <strong>属性名：</strong>disply <br>
    <strong>属性值：</strong>
    <ul>
        <li>block 块级</li>
        <li>inline 行内块</li>
        <li>inlin 行内</li>
    </ul><br><br>
    <!-- 块级元素 -->
    <div class="div1">这是div标签，转成行内块元素</div>
    <div class="div2">这是div标签，转成行内元素</div>
    <!-- 行内元素 -->
    <span class="span1">这是span标签，转成块元素</span>
    <span class="span2">这是span标签，转成行内块元素</span>
    <!-- 内容块元素 --> <br>
    <img src="./img/背景图1.png" alt="">转成块元素
    <img src="./img/背景图1.png" alt="">转成块元素
</body>
</html>

热词

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>案例热词</title>
    <style>
        a {
            display: block;
            width: 200px;
            height: 80px;
            background-color: #3064bb;
            color: #fff;
            text-decoration: none;
            text-align: center;
            line-height: 80px;
            font-size: 18px;
        }
        a:hover {
            background-color: #608dd9;
        }
    </style>
</head>
<body>
    <a href="#">HTML</a>
    <a href="#">CSS</a>
    <a href="#">Javascript</a>
    <a href="#">Vue</a>
    <a href="#">React</a>
</body>
</html>

banner效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>案例-banner效果</title>
    <style>
        .banner {
            height: 500px;
            background-color: #f3f3f4;
            background-image: url(./img/bk.png);
            background-repeat: no-repeat;
            background-position: left bottom;
            /* 文字控制属性 */
            text-align: right;
            color: #333;
            
        }
        .banner h2 {
            font-size: 36px;
            font-weight: 400px;
            line-height: 100px;
        }
        .banner p {
            font-size: 20px;
        }
        .banner a {
            width: 125px;
            height: 40px;
            background-color: #f06b1f;
            display: inline-block;
            text-align: center;
            line-height: 40px;
            text-decoration: none;
            font-size: 20px;
            color: #f3f3f4;
        }
    </style>
</head>
<body>
    <div class="banner">
        <h2>让创造产生价值</h2>
        <p>我们希想小游戏平台可以提供无限的可能性，让每一个创作者都可以将和创意传建给用户</p>
        <a href="#">我要报名</a>
    </div>
</body>
</html>

在这里插入图片描述

悦读

道可道，非常道；名可名，非常名。 无名，天地之始，有名，万物之母。 故常无欲，以观其妙，常有欲，以观其徼。 此两者，同出而异名，同谓之玄，玄之又玄，众妙之门。

最新收录
ES模块导入、导出学习笔记
基于JavaSpringboot个人博客系统
树形数据结构学习笔记2——堆与二叉堆
golang工程组件之分布式链路追踪OpenTelemetry
【C++】————string基础用法及部分函数底层实现
Maven教程超详细
三菱指令大全
自动控制原理笔记-二阶欠阻尼系统动态性能指标计算
三层交换机配置trunk命令_H3交换机的配置命令
4.tcp问题及进程
;