css--轮播图 yk弹框--固定定位和层级的应用

轮播图静态页面实现

<!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>
        /* 轮播图 实现思路：
        大盒子div为父亲  包含一个图片，并且其点击可进行跳转
        next，prev翻页标志  右下角的页数标志均为儿子  采用子绝父相 进行定位

        实现：div父亲包含 1  链接标签和图片
                         2  2个span  翻页标签采用背景图实现
                         3  ul li实现 页数标志  
        
         */
        *{
            padding: 0;
            margin: 0;
        }
        .banner{
            width: 1010px;
            height: 532px;
            position: relative;
        }

        .prev,
        .next{
            position: absolute;
            width: 75px;
            height: 100px;
            top: 50%;            /*垂直居中   50%参考的是父亲的 即父亲高度的一半*/
            margin-top:-50px;   /* 垂直居中  负的自己高度的一半*
                                 /*水平居中则为  width:50%; margin-left:-38px; 负的自己宽度的一半*/
 
　　　　　　
　　　　　　　/*margin-top: 216px;*/  /*垂直居中  通过计算 父亲高度/2-自己高度/2   不灵活 */
        }

        .prev{
            background: url(./img/btn1.png) no-repeat;
            left: 0;
        }

        .next{
            background: url(./img/btn2.png) no-repeat;
            right: 0;
        }

        ul,ol{
            list-style: none;
        }

        .page{
            position: absolute;
            bottom: 50px;
            right: 260px;
        }

        .page li{
            width: 30px;
            height: 30px;
            background-color:#ccc;
            border-radius: 50%;
            float: left;
            margin-left: 30px;
            text-align: center;
            color: #fff;
        }

        .page li.current{
            background-color: red;
        }


    </style>
</head>
<body>

    <div class="banner">
        <a href=""><img src="./img/banner.png" alt=""></a>
        <span class="prev"></span>
        <span class="next"></span>
        <ul class="page">
            <li class="current">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>
    
</body>
</html>

效果

 

yk弹窗布局

        固定定位 应用
        优酷首页登录弹框
        思路：三个盒子   1  一个大盒子  使用页面可以滚动  放置背景图
                        2  一个盒子    实现遮罩层     
                        3  一个盒子    实现 登录弹窗  
                        主要实现层级展示，不做细节 
 
<!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>
        /* 固定定位 应用
        优酷首页登录弹框
        思路：三个盒子   1  一个大盒子  使用页面可以滚动  放置背景图
                        2  一个盒子    实现遮罩层     
                        3  一个盒子    实现 登录弹窗  
                        主要实现层级展示，不做细节 
        */
        body{
            margin: 0;
        }

        .page{
            height: 2000px;
            background: url(../img/yk.png) no-repeat center top;
        }

        .mask{
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: #000;
            opacity: .3;      /*透明度*/
            filter: alpha(opacity=30);
        }

        .loginbox{
            position: fixed;
            width: 760px;
            height: 350px;
            left: 50%;
            margin-left: -380px;
            top: 50%;
            margin-top: -175px;
            background-color: red;
        }



    </style>
</head>
<body>
    <div class="loginbox"></div>
    <div class="mask"></div>
    <div class="page"></div>
</body>
</html>

 

posted @ 2020-08-01 18:59  NodeHzi  阅读(294)  评论(0)    收藏  举报