HTMLday6

最新推荐文章于 2024-08-13 14:09:09 发布

有在学习了

最新推荐文章于 2024-08-13 14:09:09 发布

阅读量127

点赞数

分类专栏：微信小程序文章标签： html

本文链接：https://blog.csdn.net/qq_51213025/article/details/112795112

版权

微信小程序专栏收录该内容

33 篇文章 1 订阅

订阅专栏

盒子背景图片

    <style>
        div {
        height:1300px;
        width:1300px;   
        background-color: pink;                 /*背景颜色*/
        background-image: url(1.png);             /*背景图片*/
        background-repeat: no-repeat;             /*背景不平铺*/

        /* background-position: 30px 23px;          背景图片移动位置 */
        /* background-position: bottom right        方位不分前后 */
        /* background-position: 10px center         混搭*/
        background-position: center;
        }

    </style>

在这里插入图片描述

并集选择器

    <style>
        div, p, span{
            color: blue;
            font-size:20px ;
        }
        .qian{
            font-size: 60px;
            color:yellow;
        }
    </style>
</head>
<body>
    <div>皮卡丘</div>
    <p>杰尼龟</p>
    <span>喷火龙</span>
    <h1>姜云升</h1>
    <h1>姜赚钱</h1>
    <h1 class="qian">姜振乾</h1>

</body>

在这里插入图片描述

后代选择器

    <style>
        div p{
            color: orange;
        }
        p{
            color: blue;
        }
        .liubei p{
            color: red;
        }
    </style>
</head>
<body>
    <p>刘备</p>
    <div>
        <p>刘禅</p>
    </div>
    <div class="liubei">
        <p>刘邦</p>
    </div>

</body>

在这里插入图片描述

交集选择器

    <style>
        .red{
            color: red;
        }
        p.red{
            font-size: 50px;
        }
        div.red{
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div class="red">熊大</div> 
    <div>熊二</div>
    <div>奇奇国王</div>
    <p class="red">抖音</p>
    <p>快手</p>
    <p>火山</p>
</body>

在这里插入图片描述

属性选择器

    <style>
        a[title]{
            color: rgb(77, 209, 36);
        }
        input[type=submit]{
            color: rgb(255, 0, 0);
        }
        input[type=text]{
            color: rgb(104, 207, 255);
        }

    </style>
</head>
<body>
    <a href="#"  title="我是百度">百度</a>
    <a href="#"  title="我是优酷">优酷</a>
    <a href="#">爱奇艺</a>
    <input type="text" value="输入">
    <input type="text" >
    <input type="text">
    <input type="submit">
</body>

伪类选择器

    <style>
    p::first-letter {               /*第一个字*/
        font-size: 30px;
        color: red;
    }
    p::first-line {                 /*第一行*/
        color: blue;



    }p::selection {                 /*选择的文字可以变化的样式*/
        color: pink;
    }


    div.aaa::before {                   /*在盒子内部前面插入内容*/
        content: "wo";
    }
    .aaa {
        border: 1px solid red;
        display: inline-block;
        width: 500px;
        height: 500px;
    }
    div.aaa::after {                   /*在盒子内部后面插入内容*/
        /* content: "wo"; */
        content:url(../day10/黑马图片/11.jpg);
        /* content: url(D:\微信小程序\day10\黑马图片\15.jpg); */
        width: 300px;
    }
    
    </style>
</head>
<body>
    <p>HTML5 是下一代 HTML 标准。
        HTML , HTML 4.01的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。
        HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。</p>
        <div class="aaa">
            <div>今年</div>
        </div>
        <div>cjsd</div>
</body>

在这里插入图片描述

子元素选择器

    <style>
        .yi li{
            color: red;
        }
        .er li{
            color: rgb(151, 151, 9);
        }
    </style>
</head>
<body>
    <ul class="yi">
        <li>一级菜单
            <ul class="er">
                <li>二级菜单</li>
                <li></li>
                <li></li>
            </ul>
        </li>
    </ul>
    <ul class="yi">
        <li>一级菜单
            <ul class="er">
                <li>二级菜单</li>
                <li></li>
                <li></li>
            </ul>
        </li>
    </ul>
    <ul class="yi">
        <li>一级菜单
            <ul class="er">
                <li>二级菜单</li>
                <li></li>
                <li></li>
            </ul>
        </li>
    </ul>

</body>

在这里插入图片描述

选择器案例

    <style>
        .denglu a{
            color: red;
        }
        .nav ul li a{
            color: rgb(243, 160, 122);
        }
        .nav, .ce{
            font-size: 26px;
        }
        .nav > ul > li > a{
            color: rgb(169, 255, 147);
        }
    </style>
</head>
<body>
    <div class="nav">
        <ul>
            <li><a href="#">公司首页</a></li>
            <li><a href="#">公司简介</a></li>
            <li><a href="#">公司产品</a></li>
            <li><a href="#">联系我们</a>
                <ul>
                    <li><a href="#">公司邮箱</a></li>
                    <li><a href="#">公司电话</a></li>
                </ul>
            </li>
        </ul>
    </div>
    <div class="ce">
        <div class="lan">左侧导航栏</div>
        <div class="denglu"><a href="#">登录</a></div>
    </div>

在这里插入图片描述

css内部样式表

    <style>
        div{
            background-color: red;
            height: 200px;
            width: 100px;
            padding-left: 50%;
            border: rgb(0, 0, 0);
            margin: initial;
            display: initial;         /*块级转行内*/
        }
        span{
            background-color: red;
            height: 200px;
            width: 100px;
            display:block           /*行内转块级*/
        }
        a{
            background-color: rgb(255, 122, 226);
            height: 200px;
            width: 100px;   
            display: inline-block;      /*行内标签转块*/
        }
    </style>
</head>
<body>
    <div>123</div>
    <p>454</p>
    <div>789</div><br>
    <span>123456</span>
    <span>16</span>
    <a>行内标签转块</a>



</body>

在这里插入图片描述

有在学习了

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTMLday6

盒子背景图片 <style> div { height:1300px; width:1300px; background-color: pink; /*背景颜色*/ background-image: url(1.png); /*背景图片*/ background-repeat: no-repeat; /*背
复制链接

扫一扫