慕课网 Web 1元体验课(下)

acc8226

发布于 2022-05-17 18:06:26

6340

发布于 2022-05-17 18:06:26

文章被收录于专栏：叽叽西

块级元素: 会单独占一行, 例如<h1>~<h6>

内联元素: 又称行内元素, 多个内联元素占一行, 例如<a>标签

行内块级元素: 行内块级元素显示会与其他相邻元素出现在同一行, 并且两个相邻元素之间存在空白空间. 例如<Button>标签

css 的display 属性

block 块级元素 inline 内联元素 inline-block 块级内联元素

背景图片

background-image: url("abc.png") 默认会铺满

定义图片的排列方式 background-repeat: no-repeat / repeat / repeat-x / repeat-y

初始位置 background-position: center

background-size: 像素值/ 100% 表示充满

案例: 社交账号注册按钮效果

展示效果

行内块级元素对齐方式的一个做法是外层套一个div, 然后设置text-align: center;即可.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行内块级元素对齐方式</title>
    <style>
        div {
            margin: 0 auto;
            text-align: center;
        }

        a {
            display: inline-block;
            /* 设置为行内块级元素 */
            /* 行内块级元素允许设置宽度和高度 */
            width: 161px;
            height: 40px;

            background-repeat: no-repeat;
            background-size: 100%;
        }

        .btn1 {
            background-image: url("imgs/btn1.png");
        }

        .btn2 {
            background-image: url("imgs/btn2.png");
        }

        .btn3 {
            background-image: url("imgs/btn3.png");
        }

        .btn4 {
            background-image: url("imgs/btn4.png");
        }
    </style>
</head>

<body>
    <div>
        <a class="btn1" href="#"></a>
        <a class="btn2" href="#"></a>
        <a class="btn3" href="#"></a>
        <a class="btn4" href="#"></a>
    </div>
</body>
</html>

定位

positon: relative, absolute, 定位中的偏移量 left, top, right, bottom

fixed 固定定位相对于浏览器窗口定位

absolute 绝对定位相对于父元素

relative相对定位相对于原来的标签

其他的一些选择器

伪类选择器 h1: hover {color: red}

层级选择器

案例: 二维码动态效果

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

<head>
    <meta charset="UTF-8">
    <title>二维码的动态效果</title>
    <style>
    body {
        margin: 0px;
    }

    #box {
        width: 100%;
        height: 100px;
        background-color: black;

        position: fixed;
        bottom: 0px;
    }

    #wechat {
        width: 44px;
        height: 44px;

        background-image: url("imgs/wechat.png");
        background-repeat: no-repeat;
        background-size: 100%;

        margin: 28px auto;

        position: relative;
    }

    #code {
        display: none;

        width: 180px;
        height: 180px;
        background-color: white;

        background-image: url("imgs/code_wps.jpg");
        background-repeat: no-repeat;
        background-size: 100%;
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='male.png', sizingMethod='scale');
        position: absolute;
        left: -66px;
        bottom: 70px;
    }

    #wechat:hover {
        background-image: url("imgs/wechatH.png");
    }

    #wechat:hover>#code {
        display: block;
    }
    </style>
</head>

<body>
    <!-- 用于包含二维码所有的内容，显示在页面中的底部 -->
    <div id="box">
        <!-- 用于显示微信图标 -->
        <div id="wechat">
            <!-- 用于显示/隐藏二维码图片 -->
            <div id="code"></div>
        </div>
    </div>
</body>
</html>

底部的黑条用的是固定定位, 然后宽度100%, 高度100像素, 距离底部0像素

    #box {
        width: 100%;
        height: 100px;
        background-color: black;

        position: fixed;
        bottom: 0px;
    }

微信图标居中显示采用相对定位. margin: 28px auto; 表示上下各间隔(100-44) /2 = 28像素, 左右则是auto间隔. 然后鼠标放上去的效果则是 #wechat:hover { background-image: url("imgs/wechatH.png"); }

    #wechat {
        width: 44px;
        height: 44px;

        background-image: url("imgs/wechat.png");
        background-repeat: no-repeat;
        background-size: 100%;

        margin: 28px auto;

        position: relative;
    }

然后是二维码的展示采用绝对定位, 相对于父容器. bottom为70像素. 44 + 28 = 72更为合理些, 给我的感觉是距离父容器底部坐标的距离 left 为-66px. 大概是(180-44) / 2 = 68 的样子, 给我的感觉是距离父容器左边的距离. 默认display: node, 但是方式去就是指定的block的效果

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022-05-17，如有侵权请联系 cloudcommunity@tencent.com 删除

容器