html -- 总结 4 （小白）

最新推荐文章于 2024-08-21 20:15:01 发布

柿子来了

最新推荐文章于 2024-08-21 20:15:01 发布

阅读量310

点赞数 2

文章标签： html css

本文链接：https://blog.csdn.net/2301_78949452/article/details/140569634

版权

复合选择器

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 交集选择器  在一个选择器的基础上 在增加一个选择器来增加条件*/
        /* 选择器之间不能有**空格**及其他符号 */
        div.a1#b1,#b7 {
            color: aquamarine;
        }
        
        /* 并集选择器 各个选择器通过**逗号**连接而成的 表示同时选择多个标签使用样式 */
        .a3,#b7 {
            color: blue;
        }

        /* 后代选择器  使用**空格**分隔 */
        /* 是选择所有的子孙后代  */
        table .box1 td {
        /* 文本居中 */
            text-align: center;
        }
        
        /* 子元素选择器  使用**>**分割 */
        /* 只选亲儿子 */
        table>tbody>.box1>td {
            text-align: center;
            background-color: #456;
        }
    </style>
</head>

<body>
    <div class="a1" id="b1">境内突发暴雨山洪div a1</div>
    <div class="a2" id="b3">已搜救发现坠河车辆div a2</div>
    <div class="a3" id="b5">陈某曾怕母亲担心暂时离家div a1</div>
    <p class="a1" id="b6">感叹环保的同时p a1</p>
    <p class="a2" id="b7">第一次见仙侠剧拍男主p a2</p>

    <table border="1" width="200" height="100">
        <tr class="box1">
            <td>123</td>
            <td>123</td>
            <td>123</td>
        </tr>
        <tr class="box1">
            <td>123</td>
            <td>123</td>
            <td>123</td>
        </tr>
        <tr>
            <td>456</td>
            <td>456</td>
            <td>456</td>
        </tr>
    </table>
</body>

</html>

标签显示模式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
        }
        
        span {
            width: 100px;
            height: 100px;
        }
        
        hr {
            width: 50px;
            height: 100px;
        }
        
        input {
            width: 9000px;
        }
        
        a {
            width: 500px;
            height: 500px;
        }
        
        .box {
            width: 100px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            display: inline-block;
            /* 设置标签的显示模式 */
            /* block  块级元素 */
            /* inline 行内元素 */
            /* inline-block 行内块元素 */
            /* none  隐藏元素 */
        }
    </style>
</head>

<body>
    <!-- 标签显示模式的区别 -->
    <!-- 1.块级元素 div p ul li dt dd dl ol h1 - h6   br  hr -->
    <!-- 1.1 默认大小都是一整行  占满一整行-->
    <!-- 1.2 可以设置宽度 高度 内边距 外边距 -->
    <!-- 1.3 块级元素可以容纳任意的内容或标签 -->
    <div>123</div>
    <div>123</div>
    <hr>

    <!-- 2.行内元素 span b i s u a -->
    <!-- 2.1  默认大小就是内容大小-->
    <!-- 2.2  不可以设置宽度 高度 内边距 外边距-->
    <!-- 2.3  行内元素只能容纳文本或图片 任意的行内元素 -->
    <span>
        <span>444</span>
    </span>
    <span>456</span>
    <img src="../images/bd_logo1.png" alt="" width="10">
    <input type="text">
    <a href="#">百度一下，你就知道</a>


    <!-- 3.行内块元素 input img -->
    <!-- 3.1 默认大小就是内容大小 -->
    <!-- 3.2 可以设置宽度 高度 内边距 外边距 -->
    <!-- 3.3 块级元素可以容纳任意的内容或标签 -->
    <div class="box">暑期清凉季</div>
    <div class="box">京东生鲜</div>
    <div class="box">企业会员</div>
    <div class="box">京东五金城</div>
    <div class="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>Document</title>

    <style>
        body {
            background-color: #0ff;
        }
        
        #box {
            width: 150px;
            height: 300px;

            /* 背景颜色 */
            background-color: rgba(255, 132, 220);

            /* 背景透明 */
            background: rgba(0,0,0,0);
            /* 背景图片 */
            background-image: url(./images/饭团.png);

            /* 背景重复方式   repeat xy轴全部重复*/
            /* no-repeat  不重复 */
            background-repeat: no-repeat;
            
            /* 图片位置
            background-position:水平位置、垂直位置; */
            /* background: red url(./images/饭团.png) no-repeat scroll 10px 10px; */
            /* color image  repeat attachment position */

            /* 背景缩放 */
            background-size: 100px;
            /* 可以设置长度单位(px)（img大小一样）或百分比（设置百分比时，参照盒子的宽高 */
            /* contain  自适应 保证图片始终完整显示在背景区域 */
            /* cover  会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏*/
        }
    
        .box_1 {
            /* 精灵图 */

            /* 背景图片定位 */
            /* background-position: 200px 100px; */

            /*  背景图随着页面内容滚动 */
             background-attachment: scroll;

            /* 背景图片固定 附着 */
            /* 背景图不会随着页面内容滚动 */
            background-attachment: fixed;
        
            /* 精灵图可以有效地减少服务器接受和发送请求的次数，提高页面的加载速度 */
            /* css精灵技术主要针对于背景图片，插入的图片img 是不需要这个技术的 */
            /* 1. 精确测量，每个小背景图片的大小和 位置 */
            /* 2. 给盒子指定小背景图片时， 背景定位基本都是负值 */
        }
        
        .obox {
            width: 27px;
            height: 240px;
            background-image: url(./images/index.jpg);
            background-repeat: no-repeat;
            /*  图片位置  （水平位置、垂直位置） */
            background-position: -155px -108px;
        }
    </style>
</head>

<body>
    <div id="box"></div>
    <div class="box_1"></div>
    <div class="obox"></div>

</body>

</html>