HTML5+CSS3基础（day8）

最新推荐文章于 2024-10-02 07:15:00 发布

澈如冬雪^

最新推荐文章于 2024-10-02 07:15:00 发布

阅读量66

点赞数 1

文章标签： css3 html5 css

本文链接：https://blog.csdn.net/m0_52372037/article/details/128555841

版权

一、CSS的元素显示模式（续）

2.元素显示模式的分类

（3）行内块元素

在这里插入图片描述

示例

<title>显示模式之行内块元素（特殊情况）</title>
    <style>
        input {
            width: 249px;
            height: 35px;
        }
    </style>
</head>

<body>
    <input type="text">
    <input type="text">
</body>

3.元素显示模式总结

在这里插入图片描述

4.显示模式的转换

在这里插入图片描述

示例

 <title>元素显示模式的转换</title>
    <style>
        a {
            width: 150px;
            height: 50px;
            background-color: pink;
            /* 把行内元素a 转换为块级元素 */
            display: block;
        }

        div {
            width: 300px;
            height: 100px;
            background: purple;
            /* 把div 块级元素 转换为 行内元素 */
            display: inline;
        }

        span {
            width: 300px;
            height: 30px;
            background-color: pink;
            display: inline-block;

        }
    </style>
</head>

<body>
    <a href="#">至此流年各天涯</a>
    <a href="#">至此流年各天涯</a>
    <div>我是块级元素</div>
    <div>我是块级元素</div>
    <span>行内元素转换为行内块元素</span>
    <span>行内元素转换为行内块元素</span>
</body>

5.小工具snipaste的使用

在这里插入图片描述

6.简单版小米侧边栏案例

在这里插入图片描述

示例

<title>简单版小米侧边栏</title>
    <style>
        /* 1. 把a转换为块级元素 */
        a {
            display: block;
            width: 230px;
            height: 40px;
            background-color: #55585a;
            font-size: 14px;
            color: #fff;
            text-decoration: none;
            /* ti2em */
            text-indent: 2em;
            line-height: 40px;
        }

        /* 2. 鼠标经过链接变换背景颜色 */
        a:hover {
            background-color: #ff6700;
        }
    </style>
</head>

<body>
    <a href="#">手机 电话卡</a>
    <a href="#">电视 盒子</a>
    <a href="#">笔记本 平板</a>
    <a href="#">出行 穿戴</a>
    <a href="#">智能 路由器</a>
    <a href="#">健康 儿童</a>
    <a href="#">耳机 音响</a>
</body>

7.单行文字垂直居中的原理

在这里插入图片描述

示例

<title>单行文字垂直居中</title>
    <style>
        div {
            width: 200px;
            height: 40px;
            background-color: pink;
            line-height: 40px;
        }
    </style>
</head>

<body>
    <div>居中</div>
</body>

二、CSS的背景

在这里插入图片描述

1.背景颜色

在这里插入图片描述

示例

<title>背景颜色</title>
    <style>
        div {
            width: 100px;
            height: 120px;
            /* background-color: transparent;    透明的，清澈的 */
            background-color: pink;
        }
    </style>
</head>

<body>
    <div></div>
</body>

2.背景图片

在这里插入图片描述

3.背景平铺

在这里插入图片描述

示例

<title>背景图片/背景平铺</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            /* 页面元素既可以添加背景颜色也可以添加背景图片，只不过背景图片会压住背景颜色 */
            background-color: pink;
            /* bgi */
            background-image: url(../img/2.png);
            /* 1. 背景图片不平铺 */
            /* background-repeat: no-repeat; */
            /* 2. 默认的情况下，背景图片是平铺的 */
            /* background-repeat: repeat; */
            /* 3. 沿着x轴平铺 */
            /* background-repeat: repeat-x; */
            /* 4. 沿着y轴平铺 */
            background-repeat: repeat-y;
        }
    </style>
</head>

<body>
    <div></div>
</body>

4.背景位置-方位名词

在这里插入图片描述

示例

 <title>背景位置-方位名词</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: pink;
            background-image: url(../img/2.png);
            background-repeat: no-repeat;
            /* background-position：  方位名词 */
            /* background-position: center top; */
            /* background-position: right center; */
            /* 如果是方位名词 right center和center right效果是等价的 跟顺序没有关系 */
            background-position: center right;
            /* 此时水平方位一定是靠右侧对齐 因为第二个参数省略 所以默认是垂直方位居中的 */
            background-position: right;
            /* 此时垂直方位一定是靠顶部对齐 因为第二个参数省略 所以默认是水平方向居中的 */
            background-position: top;
        }
    </style>
</head>

<body>
    <div></div>
</body>

在这里插入图片描述

5.背景位置案例一

在这里插入图片描述

示例

 <title>背景位置方位名词应用一</title>
    <style>
        h3 {
            width: 118px;
            height: 40px;
            /* background-color: pink; */
            font-size: 14px;
            font-weight: 400;
            line-height: 40px;
            background-image: url(../img/2.png);
            background-repeat: no-repeat;
            background-position: left center;
            text-indent: 1.5em;
        }
    </style>
</head>

<body>
    <h3>
        成长守护平台
    </h3>
</body>

6.背景位置案例二-王者荣耀背景图片

在这里插入图片描述

示例

 <title>超大背景图片</title>
    <style>
        body {
            background-image: url(../img/3.png);
            background-repeat: no-repeat;
            background-position: center top;
        }
    </style>
</head>

<body>

</body>

7.背景位置-精确单位

在这里插入图片描述

示例

<title>背景位置-精确单位</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: pink;
            background-image: url(../img/2.png);
            background-repeat: no-repeat;
            /* 20px 50px x轴一定是 20  y轴一定是50 */
            /* background-position: 20px 50px; */
            /* background-position: 50px 20px; */
            background-position: 20px;
        }
    </style>
</head>

<body>
    <div></div>
</body>