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的效果