CSS-Day6

最新推荐文章于 2024-10-04 21:26:09 发布

Coisini-蜻蜓

最新推荐文章于 2024-10-04 21:26:09 发布

阅读量41

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/m0_54109180/article/details/131826956

版权

本文介绍了CSS中的背景属性，包括background-attachment的设置，背景复合写法，如何创建半透明背景色，以及一系列的背景图片应用案例。同时，详细讲解了CSS的盒子模型，包括边框、内边距和外边距对元素尺寸的影响，并提供了实际示例。此外，还提到了CSS的继承性、层叠性和优先级概念。

摘要由CSDN通过智能技术生成

一.CSS的背景

1.1background-attachment设置是否固定

一.CSS的背景

1.1background-attachment设置是否固定

属性：scroll,fixed

1.2背景复合写法

background:背景颜色背景图片地址背景平铺背景图像滚动背景图片位置

1.3背景色半透明

background:rgba(0,0,0,0.3),最后一个是透明度，范围0-1

1.4总结

1.5综合案例

<style>
        .nav {
            height: 150px;
            width: 800px;
        }

        .nav a {
            display: inline-block;
            width: 120px;
            height: 58px;
            background-color: red;
            text-decoration: none;
            font-size: 16px;
            color: white;
            /* 让文字居中显示 */
            text-align: center;
            /* 让文字垂直居中 */
            line-height: 48px;
        }
/* 注意图片插入时相对于html的相对位置，要先返回上一级 */
        .nav .bg1 {
            background: url(../img/bg1.png) no-repeat;

        }

        .nav .bg2 {
            background: url(../img/bg2.png) no-repeat;

        }

        .nav .bg3 {
            background: url(../img/bg3.jpg) no-repeat;

        }

        .nav .bg4 {
            background: url(../img/bg4.png) no-repeat;

        }

        .bg1:hover {
            background-image: url(../img/bg11.png);
        }

        .bg2:hover {
            background-image: url(../img/bg22.png);
        }

        .bg3:hover {
            background-image: url(../img/bg33.png);
        }

        .bg4:hover {
            background-image: url(../img/bg44.png);
        }
    </style>


<body>
    <div class="nav">
        <a href="#" class="bg1">五彩导航</a>
        <a href="#" class="bg2">五彩导航</a>
        <a href="#" class="bg3">五彩导航</a>
        <a href="#" class="bg4">五彩导航</a>
    </div>
</body>

注意点：文字居中显示，图片插入位置

二.CSS三大特性

继承性，层叠性，优先级

优先级：行内样式>id选择器>类选择器>标签选择器>通配符选择器

三.盒子模型

3.1边框（border）

border会影响盒子大小，会撑大盒子

<style>
    div {
        width: 300px;
        height: 200px;
        /* border-width 边框的粗细  一般情况下都用 px */
        border-width: 5px;
        /* border-style 边框的样式  solid 实线边框   dashed 虚线边框  dotted 点线边框*/
        border-style: solid;
        /* border-style: dashed; */
        /* border-style: dotted; */
        /* border-color 边框的颜色  */
        border-color: pink;


    }
</style>
</head>

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

</html>

3.2内边距（padding）

padding会影响盒子大小，实际中用高度和宽度减去内边距*2

<style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* padding-left: 5px;
            padding-top: 5px;
            padding-bottom: 5px;
            padding-right: 5px; */
            /* 内边距复合写法(简写) */
            /* 写一个代表上下左右都是5px */
            /* padding: 5px; */
            /* 写两个代表上下是5，左右是10 */
            /* padding: 5px 10px; */
            /* 写三个代表上是5，左右10，下20 */
            /* padding: 5px 10px 20px; */
            /* 写四个代表上5，右10，下20，左30 */
            padding: 5px 10px 20px 30px;
        }
    </style>

实际中可以利用padding撑开盒子

练习-新浪导航栏

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新浪导航</title>
    <style>
        .nav {
            height: 45px;
            border-top: 3px solid #ff8500;
            border-bottom: 1px solid #edeef0;
            background-color: #fcfcfc;
            line-height: 41px;
        }

        .nav a {
            /* 如果不转化为行内块元素，后面伪类链接的高度不对 */
            display: inline-block;
            height: 41px;
            text-decoration: none;
            color: #4c4c4c;
            padding: 0 22px;
        }

        .nav a:hover {
            background-color: #eee;
            color: #ff8500;
        }
    </style>
</head>

<body>
    <div class="nav">
        <a href="#">新浪导航</a>
        <a href="#">手机新浪网</a>
        <a href="#">移动客户端</a>
        <a href="#">微博</a>
        <a href="#">三个字</a>
    </div>
</body>

</html>