前端之css的基本使用（二）元素的定位、元素的层级定位、动画特效相关、其他相关属性、布局属性、网页布局

一、元素定位

1、固定定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    .box{
        width: 150px;
        height: 150px;
        background-color: black;
    }
    .box1{
        position: fixed; /* 让元素相对于浏览器窗口进行定位 */
        top: 0;
        right: 0;
    }
    .box2{
        background-color: orange;
        position: fixed;
        top: 0;  /* 距离顶部为0 */
        left: 0; /* 距离左边为0 */
    }

    .box3 {
        background-color: red;
        position: fixed;
        bottom: 0;
        left: 0;
    }
    .box4 {
        background-color: blue;
        position: fixed;
        bottom: 50px;
        right: 50px;
    }
    </style>
</head>
<body>
    <div class="box box1"></div>
    <div class="box box2"></div>
    <div class="box box3"></div>
    <div class="box box4"></div>
    <p>页面的内容</p>
    <p>页面的内容</p>
    <p>页面的内容</p>
    <p>页面的内容</p>
    <p>页面的内容</p>
    <p>页面的内容</p>
    <p>页面的内容</p>
    <p>页面的内容</p>
    <p>页面的内容</p>
    <p>页面的内容</p>
    <p>页面的内容</p>
</body>
</html>

2、绝对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    .box{
        width: 150px;
        height: 150px;
    }
    .box1{
        position: absolute; /* 设置当前元素的定位类型为绝对定位 [相对于父级定位元素的位置进行定位,如果没有找到父级定位元素,则默认相对于body元素进行定位] */
        top: 0;
        right: 0;
        background-color: black;
    }
    .box2{
        width: 500px;
        height: 500px;
        background-color: red;
    }
    .box2 .son1{
        width: 100px;
        height: 100px;
        background-color: white;
        position: absolute;
        top: 0;
        right: 0;
    }
    .box3{
        background-color: orange;
        width: 500px;
        height: 500px;
        position: absolute;
    }
    .box3 .son1{
        width: 100px;
        height: 100px;
        background-color: yellow;
        position: absolute;
        top: 0;
        right: 0;
    }
    .box3 .son1 .son2{
        width: 20px;
        height: 20px;
        background-color: blue;
        position: absolute;
        right: 0;
        bottom: 0;
    }
    </style>
</head>
<body>
    <div class="box box1"></div>
    <div class="box box2">
        <div class="son1"></div>
    </div>
    <div class="box box3">
        <div class="son1">
            <div class="son2"></div>
        </div>
    </div>
</body>
</html>

3、相对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    .box{
        width: 150px;
        height: 150px;
    }
    .box1{
        background-color: black;
    }
    .box2{
        width: 500px;
        height: 500px;
        background-color: red;
        position: relative; /* 让元素相对于自身原来的位置来进行定位 */
        top: 100px;
        left: 150px;
    }

    .box3{
        background-color: orange;
        width: 500px;
        height: 500px;
    }

    </style>
</head>
<body>
    <div class="box box1"></div>
    <div class="box box2">
    </div>
    <div class="box box3">
    </div>
</body>
</html>

二、元素的定位层级

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        .box{
            width: 150px;
            height: 150px;
        }
        .box1{
            background-color: black;
            color: white;
            position: relative;
            top: 250px;
            left: 80px;
            z-index: 1;
        }
        .box2{
            background-color: red;
            position: relative;
            top: 220px;
            left: 100px;
            z-index: 999;
        }
        .box3{
            background-color: orange;
            z-index: 999; /* 层级设置对于非定位元素是不起作用的 */
        }
        .box4{
            background-color: blue;
        }
    </style>
    <title>Title</title>
</head>
<body>
    <div class="box box1">黑色</div>
    <div class="box box2">红色</div>
    <div class="box box3">橙色</div>
    <div class="box box4">蓝色</div>
</body>
</html>

三、动画特效相关

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        .box{
            width: 150px;
            height: 150px;
            background-color: black;
            /*opacity: 0; !* 设置元素的不透明度,取值从0到1之间的小数, 0表示完全透明,1表示完全不透明 *!*/
            box-shadow: 8px 10px 4px 2px black, /* 阴影效果 */
                        8px 10px 4px 4px red,
                        8px 10px 4px 6px yellow;
        }
        .box1{
            margin-top: 200px;
            width: 150px;
            height: 150px;
            background-color: red;
        }
        .box1:hover{
            background-color: blue;
            border-radius: 50%;
            transition: all 2s linear .1s; /* 属性转换过渡的效果 */
        }
        .box2{
            width: 120px;
            height: 42px;
            line-height: 42px;
            background-color: red;
            text-align: center;
            color: white;
            border-radius: 10px;

        }
        .box2:hover{
            color: yellow;
            background-color: orangered;
            transition: all .5s;
        }
        .box3{
            width: 150px;
            height: 150px;
            background-color: red;
            animation: animations3 5s linear 1s infinite; /* infinite 表示一直循环动画 */
        }

        @keyframes animations3{
            0%{
                transform:translate(160px);
                opacity:0;
            }
            50%{transform:translate(130px);background-color: blue; opacity:1;}
            70%{transform:translate(125px);background-color: red; opacity:1;}
            100%{transform:translate(100px);opacity:0;}
        }

    </style>
    <title>Title</title>
</head>
<body>
    <div class="box"></div>
    <div class="box1"></div>
    <div class="box2">立即购买</div>
    <div class="box3"></div>
</body>
</html>

四、布局属性

1、display

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        .box{
            width: 150px;
            height: 150px;
            background-color: black;
            display: none;
        }
        a{
            width: 100px;
            height: 100px;
            background-color: blue;
            color: white;
            display: inline-block; /* 设置元素的显示模式为行内块级元素 */
        }
        img{
            width: 100px;
            height: 100px;
            margin-top: 200px;
            background-color: black;
            display: block; /* 设置当前元素的显示模式为块级元素 */
        }
        p{
            background: red;
            display: inline; /* 修改当前元素的显示模式为行内元素 */
            margin-top: 200px;
        }
    </style>
    <title>Title</title>
</head>
<body>
    <div class="box"></div>
   <input type="hidden">
    <a href="">百度</a>
    <a href="">百度</a>
    <a href="">百度</a>
    <a href="">百度</a>
    <img src="./timg.jpg" alt="">
    <img src="./timg.jpg" alt="">

    <p>一个很长的段落</p>
    <p>一个很长的段落</p>
    <p>一个很长的段落</p>
    <p>一个很长的段落</p>
</body>
</html>

2、float

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
    .box{
        width: 150px;
        height: 150px;
    }
    .box1{
        background-color: red;
    }
    .box2{
        background-color: orange;
        float: right; /* 让元素基于当前的顶边靠右浮动 */
    }
    .box3{
        background-color: blue;
        float: left; /* 让元素基于当前的顶边靠左浮动 */
        position: relative;
        top: 10px;
        z-index: 1;

    }
    .box4{
        background-color: yellow;
        position: relative;
        left: 10px;
    }
    </style>
    <title>Title</title>
</head>
<body>
    <div class="box box1"></div>
    <div class="box box2"></div>
    <div class="box box3"></div>
    <div class="box box4"></div>
</body>
</html>

3、float排版

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    .header{
        background-color: #ccc;
    }
    .header-left{
        width: 70%;
        height: 80px;
        background-color: red;
        float: left;
    }
    .header-right{
        width: 30%;
        height: 80px;
        background-color: orange;
        display: inline-block;
        float: right;
    }
    .clear{
        clear: both; /* 清除两边浮动元素浮空以后带来的影响 */
    }
    .header1::after{
        content:"";
        display: block;
        clear: both;
    }
    </style>
</head>
<body>
    <div class="header">
        <div class="header-left"></div>
        <div class="header-right"></div>
        <div class="clear"></div> <!-- 元素在浮动以后, 是不会占据页面的原来空间的,所以会导致父级元素发现不了浮动的占据面积,如果这时候父元素没有指定高度,则父元素会出现高度为0的情况,这时候,我们可以在父元素的结束位置之前,增加一个块级标签,指定这个块级标签的css属性为 clear: both;来清除浮动元素带来的影响 -->
    </div>


    <div class="header header1">
        <div class="header-left"></div>
        <div class="header-right"></div>
    </div>

</body>
</html>

4、overflow

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    .box{
        width: 100px;
        height: 100px;
        background-color: orange;
        overflow: scroll; /* hidden 把溢出的内容隐藏起来 */
    }
    </style>
</head>
<body>
    <div class="box">
        这一段很长很长很长很长很长很长很长很长很长很长很长很长很长的告白!
    </div>
</body>
</html>

5、overflow处理上下边距带来的问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    .box{
        width: 250px;
        height: 250px;
        background-color: #ccc;
        overflow: hidden; /* 使用overflow来还原子元素带来的margin-top的拖动 */
    }
    .son{
        width: 250px;
        height: 50px;
        background-color: orangered;
        margin-top: 100px;
    }
    </style>
</head>
<body>
    <div class="box">
        <div class="son"></div>
    </div>
</body>
</html>

6、overflow处理溢出内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    .header{
        background-color: #ccc;
        overflow: hidden; /* 把浮动导致的0像素问题进行还原 */
    }
    .header-left{
        width: 70%;
        height: 80px;
        background-color: red;
        float: left;
    }
    .header-right{
        width: 30%;
        height: 80px;
        background-color: orange;
        display: inline-block;
        float: right;
    }
    </style>
</head>
<body>
    <div class="header header1">
        <div class="header-left"></div>
        <div class="header-right"></div>
    </div>

</body>
</html>

7、flex

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    ul{
        padding: 0;
        margin: 0;
        list-style: none;
    }
    .nav::after{
        content: "";
        display: block;
        clear: both;
    }
    a{
        text-decoration: none;
    }
    .nav li{
        float: left;
        width: 90px;
        height: 42px;
        line-height: 42px;
        text-align: center;
        background-color: dodgerblue;
    }
    a{
        color: white;
    }
    .nav2{
        width: 500px;
        display: flex;
    }
    .nav2 li{
        flex: 1;
        width: 100px;
        height: 42px;
        line-height: 42px;
        text-align: center;
        background-color: dodgerblue;
    }
    </style>
</head>
<body>
    <ul class="nav">
        <li><a href="">首页</a></li>
        <li><a href="">商品列表</a></li>
        <li><a href="">文章列表</a></li>
        <li><a href="">联系我们</a></li>
        <li><a href="">关于我们</a></li>
    </ul>
    <br>
    <br>
    <ul class="nav2">
        <li><a href="">首页</a></li>
        <li><a href="">商品列表</a></li>
        <li><a href="">文章列表</a></li>
        <li><a href="">联系我们</a></li>
        <li><a href="">关于我们</a></li>
    </ul>
</body>
</html>

8、其他相关属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        .box{
            width: 150px;
            height: 150px;
            background-color: black;
            cursor: pointer; /* 把光标改成爪子效果 */
        }
        ul{
            list-style: none; /* 去掉列表的项目符号 */
            margin: 0;
            padding: 0;
        }
        table{
            border-collapse: collapse;/* 合并表格当中的边框 */
        }
    </style>
    <title>Title</title>
</head>
<body>
    <div class="box"></div>
    <ul>
        <li>111</li>
        <li>1111</li>
        <li>111</li>
        <li>1111</li>
    </ul>
    <table border="1">
        <tr>
            <td>单元格1</td>
            <td>单元格2</td>
        </tr>
        <tr>
            <td>单元格1</td>
            <td>单元格2</td>
        </tr>
    </table>
</body>
</html>

五、网页布局

1、table布局

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    /* 初始化 */
    h1,h2,h3,h4,h5,h6,body,ul,li,table,tr,td,input,textarea,select,p{
        margin: 0;
        padding: 0;
        font-size: 16px;
        font-family: Arial;
    }
    ul{
        list-style: none;
    }
    a{
        text-decoration: none;
        color: #000;
    }
    table{
        border-collapse: collapse;/* 合并边框 */
    }
    .page {
        border: 1px solid #ddd;
        width: 100%;
        max-width: 1270px;
        margin: 0 auto; /* 可以让块级元素左右居中 */
    }
    .text-left {
        float: left; /* 让文本设置左中右,使用 text-align,如果让块级元素设置左中右,则需要使用margin或者float了 */
        margin-left: 20px;
    }
    .text-right{
        float: right;
        margin-right: 20px;
    }
    .table-header{
        height: 42px;
        line-height: 42px;
        background-color: #f5f5f5;
        border: 1px solid #ddd;
    }
    .text-left,.text-right{
        font-weight: bold;
    }
    .data-table{
        margin: 20px;
        width: 1230px;
        border: 1px solid #ddd;
    }
    .data-table td{
        border: 1px solid #ddd;
    }
    .row-1{
        height: 36px;
        line-height: 36px;
        text-indent: 8px;
        background-color: #F5FAFE;

    }
    .row-1 td{
        font-weight: bold;
        font-size: 12px;
    }
    .colum-1{
        width: 368px;
    }
    .colum-2{
        width: 245px;
    }
    .colum-3{
        width: 614px;
    }
    .row-n td{
        font-size: 12px;
        color: #333;
        height: 36px;
        line-height: 36px;
        text-indent: 8px;
    }
    </style>
</head>
<body>
    <table class="page">
        <tr>
            <td class="table-header">
                <span class="text-left">lib中的第三方插件</span>
                <span class="text-right">非必选插件，请有选择性的使用，用不上的可自行删除，减少框架体积</span>
            </td>
        </tr>
        <tr>
            <td>
                <table class="data-table">
                    <tr class="row-1">
                        <td class="colum-1">名称</td>
                        <td class="colum-2">版本号</td>
                        <td class="colum-3">描述</td>
                    </tr>
                    <tr class="row-n">
                        <td>jQuery.js</td>
                        <td>1.9.1</td>
                        <td>jQuery库，可自行下载新版本，替换现有版本。</td>
                    </tr>
                </table>
            </td>
        </tr>

    </table>
</body>
</html>

2、div+css

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
    <style>
    .wraper {
        width: 424px;
        height: 570px;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto; /* 让块级元素自动居中 */
        background: url("./image/bg.png") no-repeat;
        padding-left: 36px;
    }
    label{
        display: block;
        font-size: 12px;
        font-family: Arial;
        font-weight: bold;
        color: #333;
        margin-bottom: 10px;
    }
    .username-text{
        margin-top: 150px;
    }
    input[type=text],input[type=password]{
        margin-bottom: 26px;
        width: 382px;
        height: 30px;
        line-height: 30px;
        background-color: transparent;
        outline: none;
        border: 1px solid #999;
    }
    input[type=submit]{
        width: 114px;
        height: 44px;
        background: url("./image/button.png") 0 0 no-repeat;
        outline: none;
        border: none;
        cursor: pointer;
    }
    input[type=submit]:hover{
        background: url("./image/button.png") 0 -44px no-repeat;
    }
    textarea{
        width: 382px;
        height: 106px;
        line-height: 30px;
        background-color: transparent;
    }
    </style>
</head>
<body>
    <div class="wraper">
        <label class="username-text">username:</label>
        <input type="text" name="username">
        <label>password:</label>
        <input type="password" name="password">
        <label>email:</label>
        <input type="text" name="emial">
        <label>message:</label>
        <textarea name=""></textarea>
        <input type="submit" value="">
    </div>
</body>
</html>

发表于 2020-01-26 16:58 异步非阻塞阅读(323) 评论(0) 收藏举报

刷新页面返回顶部

前端之css的基本使用（二）元素的定位、元素的层级定位、动画特效相关、其他相关属性、布局属性、网页布局

导航