登录  /  注册
博主信息
博文 34
粉丝 0
评论 0
访问量 37899
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
css中常用定位;伪类选择器hover总结——***五期线上班——2019-3-14 22:00:00
黄健的博客
原创
1413人浏览过

今天的课程:css中常用定位;伪类选择器hover;元素显示隐藏

    定位:

            relative:相对定位元素的定位是相对其正常位置,相对定位元素经常被用来作为绝对定位元素的容器块;

            fixed:元素的位置相对于浏览器窗口是固定位置;

            absolute:

                    绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于出始包含块

                    特点:绝对定位使元素的位置与文档流无关,因此不占据空间 ; 通常与相对定位连用(子绝父相)

            z-index 属性设置元素的堆叠顺序 注意:Z-index 仅能在定位元素上奏效


    伪选择器:hover

            鼠标悬浮到元素上会触发hover

    元素显示与隐藏:

            display:block / none


优酷案例

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="static/font-awesome-4.7.0/css/font-awesome.min.css">
    <style type="text/css">
        *{margin: 0;padding: 0}
        li{list-style: none;float: left}
        a{text-decoration: none;color: #000;}
        .clear{clear: both} /**/
        .mr{margin-right: 10px;}
        .l{float: left} /* 左浮动 */


        a span{margin-top: 5px}
        li small{margin-top: 2px;}

        .conts{
            width: 1740px;
            margin: 0 auto;
        }
        .cont{width: 100%;
            margin-top: 20px;
        }

        .cont-ul{line-height: 70px;}
        .hot-tv img{width: 240px;height: 360px;}

        .tab li{margin-right: 20px;}

        .tv-tab img{width: 240px;height: 135px;}
        .tv-tab img:hover{box-shadow: 0px 2px 20px skyblue}

        .tv-show .tv-tab{margin-bottom: 15px;}

        /*头部*/
        .header{
            position: relative;
            width: 100%;
            height: 520px;
            background: #E8E8E8;
        }

        .pic-show{
            width: 1740px;
            height: 520px;
            margin: 0 auto;
            background: url("https://ykimg.alicdn.com/develop/image/2019-03-14/4be9792c38ab7f0abee4d12542e09905.jpg") no-repeat;
        }
        .bg{background:url("https://gw.alicdn.com/mt/TB1A4OaolTH8KJjy0FiXXcRsXXa-1664-520.png");
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 10;
        }

        .menu_ul{position: fixed;
            top:20px;
            left: 120px;
            z-index: 15;
        }

        .menu_ul form{
            width: 500px;
            height: 40px;
            position: relative;
            left: 430px;
        }

        .menu_ul input{

            width: 500px;height: 40px;
            border-radius: 100px;
            border: none;
            background: rgba(234,234,234,0.5);
            outline: 0;
        }

        .menu_ul button{
            position: absolute;
            top:0;
            right: 0;
            width: 90px;
            height: 40px;
            border-top-right-radius: 30px;
            border-bottom-right-radius: 30px;
            background: #B30702;
            border: none;
            color: white;
            outline: 0;
        }
        .menu_li{position: relative;

        }
    </style>
</head>
<body>
<div class="header">
    <div class="pic-show"></div>
    <div class="bg"></div>
    <div class="menu_ul">
        <div class="l">
            <img class="l" src="https://img.alicdn.com/tfs/TB1dw0vqHGYBuNjy0FoXXciBFXa-120-24.png">
            <form action="" method="" class="l">
                <input type="text" name="">
                <button>全网搜</button>
            </form>
        </div>
        <ul class="menu_li">
            <li><i class="fa fa-diamond"></i></li>
        </ul>
    </div>


</div>
<div class="conts">
    <div class="cont">
        <div class="cont-ul">
            <h2>正在热播</h2>
        </div>
        <ul class="hot-tv">
            <li class="mr">
                <a href="">
                    <img src="http://r1.ykimg.com/050E00005C774CC7859B5D335803D155?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br>
                    <span>看中国:宁夏</span>
                </a><br>
                <small>低调的宁夏 没了四级</small>
            </li>

            <li class="mr">
                <a href="">
                    <img src="http://r1.ykimg.com/050E00005C346D1C859B5E79630A6226?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br>
                    <span>看中国:宁夏</span>
                </a><br>
                <small>低调的宁夏 没了四级</small>
            </li>

            <li class="mr">
                <a href="">
                    <img src="http://r1.ykimg.com/050E00005C346D1C859B5E79630A6226?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br>
                    <span>看中国:宁夏</span>
                </a><br>
                <small>低调的宁夏 没了四级</small>
            </li>

            <li class="mr">
                <a href="">
                    <img src="http://r1.ykimg.com/050E00005C346D1C859B5E79630A6226?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br>
                    <span>看中国:宁夏</span>
                </a><br>
                <small>低调的宁夏 没了四级</small>
            </li>

            <li class="mr">
                <a href="">
                    <img src="http://r1.ykimg.com/050E00005C346D1C859B5E79630A6226?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br>
                    <span>看中国:宁夏</span>
                </a><br>
                <small>低调的宁夏 没了四级</small>
            </li>

            <li class="mr">
                <a href="">
                    <img src="http://r1.ykimg.com/050E00005C346D1C859B5E79630A6226?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br>
                    <span>看中国:宁夏</span>
                </a><br>
                <small>低调的宁夏 没了四级</small>
            </li>

            <li >
                <a href="">
                    <img src="http://r1.ykimg.com/050E00005C346D1C859B5E79630A6226?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br>
                    <span>看中国:宁夏</span>
                </a><br>
                <small>低调的宁夏 没了四级</small>
            </li>
        </ul>
        <div class="clear"></div>
    </div>

    <div class="cont">
        <div class="cont-ul">
            <h2 class="l mr">聚集 ></h2>
            <ul class="tab l">
                <li><a href="">最新</a></li>
                <li><a href="">大陆</a></li>
                <li><a href="">日韩</a></li>
                <li><a href="">热播</a></li>
            </ul>
            <div class="clear"></div>
        </div>
        <div class="tv-show">
            <div class="big-show l mr">
                <a href="">
                    <img src="http://ykimg.alicdn.com/develop/image/2019-02-13/ed026566424880372286e5d5bafbf28c.jpg"><br>
                    <span>看中国:宁夏</span>
                </a><br>
                <small>低调的宁夏 没了四级</small>
            </div>
            <ul class="tv-tab l">
                <li class="mr">
                    <a href="">
                        <img src="http://ykpic.alicdn.com/haitun-image/prod/compress/20190103/01ceb88d2d75f7e8fff266316808b974.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br>
                        <span>看中国:宁夏</span>
                    </a><br>
                    <small>低调的宁夏 没了四级</small>
                </li>
                <li class="mr">
                    <a href="">
                        <img src="http://ykpic.alicdn.com/haitun-image/prod/compress/20190103/01ceb88d2d75f7e8fff266316808b974.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br>
                        <span>看中国:宁夏</span>
                    </a><br>
                    <small>低调的宁夏 没了四级</small>
                </li>
                <li class="mr">
                    <a href="">
                        <img src="http://ykpic.alicdn.com/haitun-image/prod/compress/20190103/01ceb88d2d75f7e8fff266316808b974.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br>
                        <span>看中国:宁夏</span>
                    </a><br>
                    <small>低调的宁夏 没了四级</small>
                </li>
                <li class="mr">
                    <a href="">
                        <img src="http://ykpic.alicdn.com/haitun-image/prod/compress/20190103/01ceb88d2d75f7e8fff266316808b974.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br>
                        <span>看中国:宁夏</span>
                    </a><br>
                    <small>低调的宁夏 没了四级</small>
                </li>
                <li>
                    <a href="">
                        <img src="http://ykpic.alicdn.com/haitun-image/prod/compress/20190103/01ceb88d2d75f7e8fff266316808b974.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br>
                        <span>看中国:宁夏</span>
                    </a><br>
                    <small>低调的宁夏 没了四级</small>
                </li>
            </ul>

            <ul class="tv-tab l">
                <li class="mr">
                    <a href="">
                        <img src="http://ykpic.alicdn.com/haitun-image/prod/compress/20190103/01ceb88d2d75f7e8fff266316808b974.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br>
                        <span>看中国:宁夏</span>
                    </a><br>
                    <small>低调的宁夏 没了四级</small>
                </li>
                <li class="mr">
                    <a href="">
                        <img src="http://ykpic.alicdn.com/haitun-image/prod/compress/20190103/01ceb88d2d75f7e8fff266316808b974.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br>
                        <span>看中国:宁夏</span>
                    </a><br>
                    <small>低调的宁夏 没了四级</small>
                </li>
                <li class="mr">
                    <a href="">
                        <img src="http://ykpic.alicdn.com/haitun-image/prod/compress/20190103/01ceb88d2d75f7e8fff266316808b974.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br>
                        <span>看中国:宁夏</span>
                    </a><br>
                    <small>低调的宁夏 没了四级</small>
                </li>
                <li class="mr">
                    <a href="">
                        <img src="http://ykpic.alicdn.com/haitun-image/prod/compress/20190103/01ceb88d2d75f7e8fff266316808b974.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br>
                        <span>看中国:宁夏</span>
                    </a><br>
                    <small>低调的宁夏 没了四级</small>
                </li>
                <li >
                    <a href="">
                        <img src="http://ykpic.alicdn.com/haitun-image/prod/compress/20190103/01ceb88d2d75f7e8fff266316808b974.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br>
                        <span>看中国:宁夏</span>
                    </a><br>
                    <small>低调的宁夏 没了四级</small>
                </li>
            </ul>

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

运行实例 »

点击 "运行实例" 按钮查看在线实例



总结:

    定位绝对定位是和相对定位一起使用的,一些有用的边框与背景样式可以很***。边框圆角与透明度背景


批改状态:未批改

老师批语:
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学