CSS-day05

最新推荐文章于 2024-08-18 23:31:20 发布

2201_75449897

最新推荐文章于 2024-08-18 23:31:20 发布

阅读量159

点赞数 3

文章标签： css html 前端

本文链接：https://blog.csdn.net/2201_75449897/article/details/140570549

版权

01-元素的显示与隐藏

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: #ff0101;
            display: none;
            /* 通过display 隐藏元素 不保留位置 */
            visibility: hidden;
            /* visibility  能见度 可见性  hidden 隐藏 */
            /* 通过visibility 隐藏元素 保留位置 */
            overflow: hidden;
            /* 溢出隐藏 */
        }
        
        .smbox {
            width: 200px;
            height: 200px;
            background-color: #eeff01;
        }
    </style>
</head>

<body>
    <div class="box">
        123123123hiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhidden
    </div>

    <div class="smbox"></div>
</body>

</html>

02-鼠标样式

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li {
            width: 150px;
            height: 150px;
            /* border: 1px solid red; */
        }
        
        .box1 {
            cursor: default;
            /* 小白   默认鼠标样式 */
            pointer-events: none;
            /* 通过css  实现阻止鼠标效果  hover  active  js添加的事件 */
        }
        
        .box2 {
            cursor: pointer;
            /* 小手 */
            outline: 10px solid blue;
            /* 轮廓 所在的位置 在外边距上  不算做盒子的大小  使用方法和边框线一样 */
            margin: 10px;
        }
        
        .box3 {
            cursor: move;
            /* 十字架  移动 */
            vertical-align: middle;
            /* 所谓的  垂直方向  就是  让图片的底部和文字的底部对齐 */
        }
        
        .box4 {
            cursor: text;
            /* 文本 */
        }
        
        .box5 {
            cursor: not-allowed;
            /* 禁止 */
        }
        
        li:hover {
            background-color: #89ffce;
        }
    </style>
</head>

<body>
    <ul>
        <li class="box1">小白</li>
        <li class="box2">小手</li>
        <li class="box3">移动
            <img src="../01-二级导航/images/milk/milk1.jpg" alt="">
        </li>
        <li class="box4">文本</li>
        <li class="box5">禁止</li>
    </ul>
</body>

</html>

03-溢出文字隐藏

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 300px;
            height: 60px;
            border: 1px solid red;
            /* 溢出文字隐藏代码 */
            white-space: nowrap;
            /*1. 当前文本的显示模式  强制文本在一行显示 */
            /* nowrap */
            overflow: hidden;
            /* 2.将溢出部分隐藏 */
            text-overflow: ellipsis;
            /* 3.将超出的文本使用省略号代替 */
        }
    </style>
</head>

<body>
    <div class="box">
        “对营业收入首次突破百亿、十亿的文体康旅装备制造企业，单户企业分档分别给予200万至1000万元一次性奖励。”
    </div>
</body>

</html>

04-BFC

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            width: 250px;
            height: 250px;
            float: left;
            background-color: #ff0000;
            /* overflow: hidden; */
            /* display: flow-root; */
            /* margin-bottom: 50px; */
        }
        
        .box2 {
            width: 150px;
            height: 150px;
            background-color: #04fe19;
            /* float: left; */
            /* margin-top: 150px; */
        }
        
        .box3 {
            width: 150px;
            height: 150px;
            background-color: #0000ff;
            margin-top: 100px;
            display: flow-root;
        }
        
        .box4 {
            width: 50px;
            height: 50px;
            background-color: #ff04cd;
        }
    </style>
</head>

<body>
    <div class="box1">
        <div class="box2">
            <div class="box4"></div>
        </div>
    </div>
    <div class="box3"></div>


</body>

</html>

05-版心布局

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 1200px;
            margin: 0 auto;
        }
        
        .a1 {
            height: 450px;
            background-color: #f90808;
            margin-top: 10px;
        }
        
        .a2 {
            height: 250px;
            background-color: #fd9643;
            margin-top: 10px;
        }
        
        .a3 {
            height: 750px;
            background-color: #f9ed08;
            margin-top: 10px;
        }
        
        .a4 {
            height: 50px;
            background-color: #70f908;
            margin-top: 10px;
        }
        
        .a5 {
            height: 1050px;
            background-color: #08d9f9;
            margin-top: 10px;
        }
        
        .a6 {
            height: 450px;
            background-color: #000000;
            margin-top: 10px;
        }
    </style>
</head>

<body>
    <div class="box a1"></div>
    <div class="box a2"></div>
    <div class="box a3"></div>
    <div class="box a4"></div>
    <div class="box a5"></div>
    <div class="box a6"></div>
</body>

</html>