css装饰

复制代码

<!DOCTYPE html>
<!-- 
    垂直对齐方式
    属性名: vertical-align

    属性值:
    属性值	    效果
    baseline	默认，基线对齐
    top	        顶部对齐
    middle	    中部对齐
    bottom	    底部对齐
-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 浏览器遇到行内和行内块标签当做文字处理，默认文字是按基线对象 */
        input {
            height: 50px;
            box-sizing: border-box;

            vertical-align: middle;
        }
    </style>
</head>
<body>
    <input type="text"><input type="button" value="搜索">
</body>
</html>

复制代码

<!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>
        img {
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <img src="code.png" alt=""><input type="text">
</body>
</html>

复制代码

<!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>
        .father {
            width: 400px;
            height: 400px;
            background-color: pink;
        }
        input {
            /* vertical-align: middle; */
            vertical-align: top;
        }
    </style>
</head>
<body>
    <div class="father">
        <input type="text">
    </div>
</body>
</html>

复制代码

<!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>
        .father {
            width: 800px;
            background-color: pink;
        }
        img {
            /* 浏览器把行内和行内块标签当做文字处理,默认基线对齐 */
            /* vertical-align: middle; */
            display: block;
        }
    </style>
</head>
<body>
    <div class="father">
        <img src="code.png" alt="">
    </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>
        .father {
            width: 600px;
            height: 600px;
            background-color: pink;
            line-height: 600px;
            text-align: center;
        }
        img {
            width: 100px;
            height: 100px;
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <div class="father">
        <img src="code.png" alt="">
    </div>
</body>
</html>

复制代码

<!DOCTYPE html>
<!-- 
    光标类型
    场景：设置鼠标光标在元素上时显示的样式
    属性名：cursor
    常见属性值：
    属性值	    效果
    default	    默认值，通常是箭头
    pointer	    小手效果，提示用户可以点击
    text	    工字型，提示用户可以选择文字
    move	    十字光标，提示用户可以移动
-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div>div</div>
</body>
</html>

复制代码

<!DOCTYPE html>
<!-- 
    边框圆角
    场景：让盒子四个角变得圆润，增加页面细节，提升用户体验
    属性名：border-radius
    常见取值：数字 + px 、百分比
    赋值规则：从左上角开始赋值，然后顺时针赋值，没有赋值的看对角！
-->
<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: pink;
            /* 一个值: 表示4个角是相同的 */
            /* border-radius: 10px; */

            /* 4值: 左上 右上 右下 左下 -- 从左上顺时针转一圈 */
            /* border-radius: 10px 20px 40px 80px; */

            /* border-radius: 10px 40px 80px; */

            border-radius: 10px 80px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

复制代码

<!DOCTYPE html>
<!-- 
    边框圆角的常见应用
    画一个正圆：
    盒子必须是正方形
    设置边框圆角为盒子宽高的一半 → border-radius:50%
    胶囊按钮：
    盒子要求是长方形
    设置 → border-radius: 盒子高度的一半
-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .one{
            width: 200px;
            height: 200px;
            background-color: pink;
            /* border-radius: 100px; */
            border-radius: 50%;
        }
        /* 长方形 角度是高度的一半 */
        .two{
            width: 400px;
            height: 200px;
            background-color: skyblue;
            border-radius: 100px;
        }
    </style>
</head>
<body>
    <div class="one"></div>
    <div class="two"></div>
</body>
</html>

复制代码

<!DOCTYPE html>
<!-- 
    溢出部分显示效果
    溢出部分：指的是盒子 内容部分 所超出盒子范围的区域
    场景：控制内容溢出部分的显示效果，如：显示、隐藏、滚动条......
    属性名：overflow
    常见属性值：
    属性值	效果
    visible	默认值，溢出部分可见
    hidden	溢出部分隐藏
    scroll	无论是否溢出，都显示滚动条
    auto	根据是否溢出，自动显示或隐藏滚动条
-->
<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: pink;

            /* 溢出隐藏 */
            overflow: hidden;

            /* 滚动:无论是否溢出，都显示滚动条 */
            /* overflow: scroll; */
            
            /* 根据是否溢出，自动显示或隐藏滚动条 */
            /* overflow: auto; */
        }
    </style>
</head>
<body>
    <div class="box">我是盒子我是盒子我是盒子我是盒子我是盒子我是盒子我是盒子我是盒子我是盒子我是盒子我是盒子我是盒子我是盒子我是盒子我是盒子我是盒子我是盒子我是盒子我是盒子我是盒子我是盒子我是盒子我是盒子我是盒子我是盒子我是盒子我是盒子我是盒子我是盒子我是盒子</div>
</body>
</html>

复制代码

<!DOCTYPE html>
<!-- 
    元素本身隐藏
    场景：让某元素本身在屏幕中不可见。如：鼠标:hover 之后元素隐藏
    常见属性：
    visibility: hidden
    display: none
-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
        }
        .one{
            /* 占位置 */
            /* visibility: hidden; */
            /* 不占位置 */
            display: none;
            background-color: pink;
        }
        .two{
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="one">one</div>
    <div class="two">two</div>
</body>
</html>

复制代码

<!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>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .container{
            height: 40px;
            /* background-color: pink; */
            border:1px solid grey;
        }
        ul{
            list-style: none;
            border-collapse: collapse;  
        }
        li{
            float: left;
            margin: 0 auto;
            border-right: 1px solid grey;
        }
        li:last-child{
           border-right:0; 
        }
        a{
            position: relative;
            color: darkgrey;
            text-decoration: none;
            height: 40px;
            line-height: 40px;
            padding: 0 30px;
            display: inline-block;
        }
        img{
            position: absolute;
            left: 50%;
            transform: translate(-50%);
            top:40px;
            display: none;
            width: 50px;
            height: 50px;
        }
        /* 鼠标悬停a 显示二维码 */
        .container li a:hover img{
            display: block;
        }
    </style>
</head>
<body>
    <div class="container">
        <ul>
            <li><a href="">我要投资</a></li>
            <li><a href="">平台介绍</a></li>
            <li><a href="">新手专区</a></li>
            <!-- 因为用户鼠标放在二维码图片上也能跳转，所以img也是在a的范围内，因此把img写在a标签内部 -->
            <li><a href="">手机微金锁 <img src="code.png" alt=""></a></li>
            <li><a href="">个人中心</a></li>
        </ul>
    </div>
    
</body>
</html>

复制代码

<!DOCTYPE html>
<!-- 
    （拓展）元素整体透明度
     场景：让某元素整体（包括内容）一起变透明
     属性名：opacity
     属性值：0~1 之间的数字
     ・1：表示完全不透明
     ・0：表示完全透明
-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 400px;
            height: 400px;
            background-color: green;
            opacity: 0.5;
        }
        img{
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div>
        <img src="code.png" alt="">
        文字也是透明
    </div>
</body>
</html>

一、垂直对齐

1.垂直对齐案例1(input和input)

2.垂直对齐案例2（图片和input）

3.垂直对齐案例3(子input父控件留边)

4.垂直对齐案例4（子图片父控件留边）

5.垂直对齐案例5(子img居中)

二、光标类型

三、圆角边框

1.圆角边框

2.圆形、胶囊形

四、overflow

五、元素隐藏

1.元素隐藏

2.案例二维码隐藏

六、元素透明度