盒子显隐与阴影

字体图标

'''
fa框架: http://fontawesome.dashgame.com/

下载 => 引入css文件

<i class="fa fa-**"></i> 字体图标是通过类来实现的 所有类的前面必须跟上前缀fa
'''

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>小米页面架构</title>
    <!--引入字体图标库-->
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css">
    <!--引入外部css-->
    <link rel="stylesheet" href="css/mi.css">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/header.css">
</head>
<body>
    <div class="header">
        <!--header-wrapper: 宽度 100%-->
        <div class="header-wrapper">
            <div class="wrapper">
                <div class="header-nav">
                    <a href="">小米商城</a>
                    <span>|</span>
                    <a href="">MIUI</a>
                    <span>|</span>
                    <a href="">loT</a>
                </div>
                <div class="header-cart">
                    <!--字体图标: 设置预定义好的类名-->
                    <i class="fa fa-shopping-cart cart-tag"></i>
                    <a>购物车(<span>0</span>)</a>

                </div>
                <div class="header-info">
                    <a href="">登录</a>
                    <span>|</span>
                    <a href="">注册</a>
                    <span>|</span>
                    <a href="">消息通知</a>
                </div>
            </div>
        </div>
    </div>

    <!--wrapper: 宽度 1226px-->
    <div class="nav">
        <div class="wrapper">

        </div>
    </div>
    <div class="star">
        <div class="wrapper">

        </div>
    </div>
    <div class="main">
        <div class="wrapper">

        </div>
    </div>
    <div class="footer">
        <div class="wrapper">

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

View Code

盒子显隐

'''
盒子的显隐：即盒子在正常情况下为隐藏状态，通过鼠标悬停（hover伪类）来显示隐藏内容，有以下两种实现方式：
1.显示效果
display: none; # 没有任何显示效果
消失的时候在页面中不占位，显示的时候在页面中占位

2.盒子透明度
opacity: 0; # 所在区域留白
消失显示在页面中都占位

只要盒子在页面中有占位,就会影响其他盒子布局, 所以显隐的盒子都需要中 定位 处理

opacity可以动画处理, display不能动画处理

'''

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>盒子显隐</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: orange;
            margin-top: 10px;
        }
        /*消失的时候在页面中不占位，显示的时候在页面中占位*/
        .div1 {
            display: none;
            position: absolute;
            /*display不能过度动画 => 原因none与block是两个状态点(中间找不出存在的第三个状态点)*/
            transition: 2s;
        }
        .ctrl:hover ~ .div1 {
            display: block;
        }

        /*消失显示在页面中都占位*/
        .div2 {
            /*盒子的透明度*/
            opacity: 0;
            /*背景颜色透明,文本层依然显示*/
            /**/
            position: absolute;
            /*opacity能过度动画 => 0~1之间可以找出多个中间点, 比如0.5*/
            transition: 2s;
        }
        .ctrl:hover ~ .div2 {
            opacity: 1;
        }
    </style>
</head>
<body>
<div class="ctrl">控制</div>
<div class="div1">001</div>
<div class="div2">002</div>
<div class="div3">003</div>

</body>
</html>

View Code

overflow属性

'''
解决: 超出盒子规定的显示区域外的内容的处理方式

/*将超出规定区域的内容隐藏, 隐藏掉的内容无法直接查看*/
/*overflow: hidden;*/

/*不超出正常，超出滚动 两种不同的处理方式来处理超出规定区域的内容*/
/*overflow: auto;*/

/*一直以滚动方式处理超出规定区域的内容*/
/*overflow: scroll;*/


'''

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>overflow属性</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: orange;
            margin-top: 10px;
        }
        .div1 {
            /*height: 10px;*/

            /* **** */
            /*将超出规定区域的内容隐藏, 隐藏掉的内容无法直接查看*/
            /*overflow: hidden;*/

            /*不超出正常，超出滚动 两种不同的处理方式来处理超出规定区域的内容*/
            /*overflow: auto;*/

            /*一直以滚动方式处理超出规定区域的内容*/
            /*overflow: scroll;*/
        }

        .wrapper {
            width: 200px;
            height: 260px;
            border: 1px solid black;
            margin: 0 auto;
        }
        .scroll {
            width: 600px;
            height: 260px;
            background-color: red;
            margin-top: 0;
        }
        .box {
            width: 200px;
            height: 260px;
            background-color: green;
            margin-top: 0;
            float: left;
            font: 900 50px/260px "STSong";
            color: red;
            text-align: center;
        }
        .box:nth-child(2n) {
            background-color: yellowgreen;
        }

        /*默认显示区域时第一张 => 第二张 => 第三张*/
        .wrapper {
            position: relative;
            /*wrapper规定了显示区域,所以要对超出显示区域外的内容做隐藏处理*/
            overflow: hidden;
        }
        /*一个滚动的大盒子, 嵌套多个小显示盒子, 该大盒子一滚动, 就会带着所有小盒子滚动*/
        /* 哪个小盒子滚动到显示区域, 就显示哪个小盒子*/
        .scroll {
            position: absolute;
            left: calc(-200px * 0);
            /*谁动谁过度*/
            transition: 1s;
        }
        .wrapper:hover .scroll {
            left: calc(-200px * 1);
        }
    </style>
</head>
<body>
    <div class="ctrl">ctrl</div>
    <div class="div1">div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 </div>

    <div class="wrapper">
        <div class="scroll">
            <div class="box">1</div>
            <div class="box">2</div>
            <div class="box">3</div>
        </div>
    </div>
</body>
</html>

View Code

伪类设计边框

'''
设计边框 => 在页面中占位 => 让其定位处理 => 脱离文档流 => 不占位 => 层级结构复杂

设计一个不占位的边框 => 伪类 :before | :after   

注：一个盒子最多只能设置两个不占位边框（before和after各设置一个），要想得到四个不占位边框可操作父子两个盒子来获得。
.box {
    width: 200px;
    height: 200px;
    
    /*给伪类边框提供定位参考系*/
    position: relative;
}
.box:before {
    content: "";
    
    /*上下边框*/
    width: 180px;
    height: 1px;
    
    
    /*控制边框位置*/
    position: absolute;
    bottom:0px;
    left: 10px;
    
}

'''

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>伪类边框</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: red;
            margin: 50px auto;

            position: relative;
        }
        .box:before {
            content: "";

            width: 220px;
            height: 10px;
            background-color: green;

            position: absolute;
            /*top: 0px;*/
            bottom: -10px;
            left: -10px;
        }
        .box:after {
            content: "";

            width: 10px;
            height: 180px;
            background-color: yellow;

            position: absolute;
            left: -10px;
            top: 10px;
        }
    </style>
</head>
<body>
    <div class="box">原来文本</div>
    <div class="box">原来文本</div>
</body>
</html>

View Code

盒子阴影

'''
注意: 
1.盒子阴影是一个独立的显示图层, 永远出现在背景层之下(即使背景层透明, 也会被覆盖遮挡)；
2.盒子可以绑定多套阴影图层；
3.阴影图层永远相对于显示图层进行偏移。

注：盒子阴影是操作的盒子，在需要显示阴影的盒子下面加上box-shadow来控制即可。
语法:
box-shadow: x轴偏移 y轴偏移 虚化程度 阴影宽度 阴影颜色, ...;
'''

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>盒子阴影</title>
    <style>
        body {
            margin: 0;
        }
        .box {
            width: 200px;
            height: 200px;
            background-color: orange;

            /*position: relative;*/
            /*top: 220px;*/

            /*position: absolute;*/
            /*top: 220px;*/

            /*margin-top: 220px;*/

            background-color: rgba(0,0,0,0);

            margin: 220px auto 0;

            /*x轴偏移 y轴偏移 虚化程度 阴影宽度 阴影颜色*/
            box-shadow: 220px 0 0 20px red, 0 -220px 0 -20px blue, -220px 0 200px 100px yellow, -220px -220px 0 0 cyan, 220px -220px 0 0 cyan;
        }

        .wrap {
            width: 200px;
            height: 260px;
            background-color: orange;
            margin: 50px auto;
        }
        .wrap:hover {
            box-shadow: 0 5px 20px -5px #424242;
        }
    </style>
</head>
<body>
    <!--<div class="box"></div>-->

    <div class="wrap"></div>
</body>
</html>

View Code

2d形变

'''
# 形变参考点(盒子左上角原点)
transform-origin: x轴坐标 y轴坐标;

# 形变属性
transform: rotate() translate() scale();
# 旋转角度(deg) 偏移距离(px) 缩放比例(无单位)


1.形变多个效果要同时赋值给transform属性
transform: rotate(1080deg) translateX(-300px);  # ①
2.属性值之间的先后顺序往往也会导致过程的不同
transform: translateX(-300px) rotate(1080deg); # ②过程的运动效果与①不同
'''

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>2d形变</title>

    <style>
        .b {
            width: 150px;
            height: 150px;
            background-color: orange;
            margin: 10px auto 0;
            font: 100 50px/150px 'STSong';
            color: blue;
            text-align: center;

            transition: 1s linear;
        }
        /*旋转形变  角度 deg*/
        .b1 {
            /*transform-origin: 150px 150px;*/
        }
        .b1:hover {
            transform: rotate(1080deg);
        }

        .b2:hover {
            transform: rotateX(1080deg);
        }

        .b3:hover {
            transform: rotateZ(1080deg);
        }

        .b4:hover {
            transform: translateX(300px);
        }

        .b5:hover {
            /*1.形变多个效果要同时赋值给transform属性
            2.属性值之间的先后顺序往往也会导致过程的不同
            */
            transform: rotate(1080deg) translateX(-300px);
        }

        .b6:hover {
            transform: scaleX(2) scaleY(2);
        }

        .b7:hover {
            transform: scale(2, 0.5);
        }
    </style>
</head>
<body>
<div class="b b1">1</div>
<div class="b b2">2</div>
<div class="b b3">3</div>
<div class="b b4">4</div>
<div class="b b5">5</div>
<div class="b b6">6</div>
<div class="b b7">7</div>
</body>
</html>

View Code

posted @ 2019-01-21 20:38 zhao_peng 阅读(599) 评论(0) 收藏举报

刷新页面返回顶部

zhao_peng

盒子显隐与阴影

字体图标

盒子显隐

overflow属性

伪类设计边框

盒子阴影

2d形变

公告