2021-10-21

最新推荐文章于 2024-10-13 19:30:05 发布

han0715

最新推荐文章于 2024-10-13 19:30:05 发布

阅读量3.9k

点赞数 2

文章标签： css css3 html

本文链接：https://blog.csdn.net/bule_sky78/article/details/120879884

版权

10-19

版心

在这里插入图片描述

设置版心的作用：1.美观2.主要兼顾电脑屏幕的店分辨率

css编写位置

1.行内式（a.代码无法复用 b.结构和样式不分离）

<div>1<div>

2.style标签内

<style>
    div{
        width:100%;
        height:100px;
    }

</style>

3.外链

<link rel="stylesheet" href="style.css">

优先级：行内>style>外链

iconfont 的3种使用方式

1.编码-unicode

在这里插入图片描述

2.font-class

在这里插入图片描述

3.在线链接

在这里插入图片描述

选择器优先级！important无视权重优先级最大

选择器

一、兄弟选择器

1.相邻兄弟

<style>
    .p1+h1{
        color:red; 
    }
</style>
<body>
    <p class="p1">hello</p>
    <h1>我是标题一</h1>
</body>

只使用于相邻的标签并且h1要在p标签的下面

2.普通兄弟

<style>
    .p1+h1{
        color:red; 
    }
</style>
<body>
    <p class="p1">hello</p>
    <div>1`</div>
    <h1>我是标题一</h1>
</body>

3.:checked

<style>
    :checked{
        width:100px;
        height:100px;
    }
</style>
<body>
    <div>
        <input type="checkbox" name="" id="sex">
        <label for="sex">男</label>
    </div>
</body>

在这里插入图片描述

案列：


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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
        }

        .box {
            position: relative;
        }

        label {
            position: absolute;
            top: 0;
            left: 100px;
            width: 70px;
            height: 30px;
            background-color: orange;
            text-align: center;
            line-height: 30px;
            border-radius: 10px;
        }
        

        /* 获取的是当前选中的复选框后面的 .book 元素 */
        :checked~.book {
            background-color: rgba(0, 0, 0, 1);
            color: #fff;
        }
        :checked+label{
            background-color: #ccc;
            color: #fff;
        }
        label::after{
            content: "关灯";
        }
        :checked+label::after{
            content: "开灯";
        }

        input {
            display: none;
        }
        .book{
            padding: 0 20px;
            transition: all 1s;
        }
        .book p{
            line-height: 2.2;
        }
    </style>
</head>

<body>
    <div class="box">

        <input type="checkbox" name="" id="light">
        <label for="light"></label>
        <div class="book">
            <p>
                阿里巴巴达摩院由三大主体组成，一是在全球建设的自主研究中心；二是与高校和研究机构建立的联合实验室；三是全球开放研究项目-阿里巴巴创新研究计划（AIR计划）。
                第一部分，在全球实验室领域，阿里巴巴达摩院将构建亚洲达摩院、美洲达摩院及欧洲达摩院三大全球分部，并在北京、杭州、新加坡、以色列、圣马特奥、贝尔维尤、莫斯科等地设立不同研究方向的实验室，初期计划引入 100
                名顶尖科学家和研究人员。
                第二部分，通过建立联合实验室，阿里巴巴得以与高校建立紧密联系，依托高校的研究实力与阿里巴巴丰富的数据资源推动产学研合作。已建立了包括浙江大学-阿里巴巴前沿技术联合研究中心、RISELab（UC
                伯克利）、中国科学院-阿里巴巴量子计算实验室、清华大学-蚂蚁金服数字金融科技联合实验室在内的多家高校联合研究所；
                第三部分，结合阿里巴巴创新研究计划，联合 13 个国家，99 所高校科研机构 234 支科研团队，达成产学研开放协作，构建全球学术合作网络。 [8]
            </p>

10-20

设置body高度为窗口高度

在这里插入图片描述

background-clip为内边距外边距边框和内容设置属性

元素的隐藏与显示

display：none
visibility: hidden;
opacity：0；

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 
        元素的显示与隐藏的三种方式
        display:不保留位置
            none：隐藏
            block：显示
        visibility：保留位置
            hidden：隐藏
            visible：显示
        opacity:保留位置
            0：隐藏
            1：显示
        */
        div{
            width: 160px;
            height: 90px;
            background-color: orange;
            margin: 10px 0;
        }

        .c1{
            display: none;
        }
        .c2{
            visibility: hidden;
        }
        .c3{
            opacity: 0;
        }
    </style>
</head>

<body>
    <div class="c1">1</div>
    <div class="c2">2</div>
    <div class="c3">3</div>
    <div class="c4">4</div>
</body>

</html>

案列


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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        label{
            display: block;
            width: 70px;
            height: 30px;
            background-color: orange;
            text-align: center;
            line-height: 30px;

        }
        input{
            display: none;
        }
        :checked~img{
            opacity: 0;
        }
        img{
            transition: all 1s;
        }
    </style>
</head>

<body>

    <input type="checkbox" name="" id="ckImg">
    <label for="ckImg">隐藏</label>
    <img src="./imgs/girl.png" alt="">
</body>

</html>

css样式

1.鼠标样式：cursor

2.轮廓线：outline

不希望鼠标点击出现轮廓线：outline：none；

3.防止拖拽

<textarea style="resize:none;"></textarea>

4.vertical-align垂直对齐

vertical-align：baseline|top|middle|bottom

当文字与图片共用时，默认是基线对齐

文本溢出处理

默认情况下，文字会折行处理

文字内容超出容器

1.设置不折行–white-space：nowrap；

2.设置溢出文本隐藏：over-flow：hidden

3.在文本末加省略号:text-overflow:ellipsis;

<style>
    div{
        widthL:200px;
        height:100px;
        white-space:nowrap;
        over-flow:hidden;
        text-overflow:ellipsis;
    }
</style>
<body>
    <div>
        文本溢出处理文本溢出处理文本溢出处理文本溢出处理文本溢出处理文本溢出处理文本溢出处理
    </div>
</body>

margin负值

1.压住盒子相邻边框

2.如果一个盒子没有设置固定宽度，margin-left/margin-right为负值可以使盒子变宽

三角

案列：

<style>
        p {
            margin-top: 100px;
        }

        .title {
            position: relative;

            cursor: pointer;
            color: green;
        }

        .title::after {
            display: none;
            position: absolute;
            top: -60px;
            left: -30px;
            content: "阿里巴巴是中国最大的互联网企业";
            width: 300px;
            padding: 10px;
            background-color: #eee;
            border: 1px solid #ddd;
            border-bottom: none;
        }

        .title::before {
            display: none;
            content: "";
            left: 0;
            top: -20px;
            position: absolute;
            width: 0px;
            height: 0px;
            border: 10px solid transparent;
            border-top-color: green;
            /* background-color: #000; */
        }

        .title:hover::after,
        .title:hover::before {
            display: block;
        }
    </style>
</head>

<body>
    <p>达摩院是<span class="title">阿里巴巴</span>投资建立的基础科学研究组织</p>
</body>

</html>