css中常用定位；伪类选择器hover总结——***五期线上班——2019-3-14 22:00:00 - html

Home > List of blog posts > css中常用定位；伪类选择器hover总结——***五期线上班——2019-3-14 22:00:00
Blogger Information
Blog 34
fans 0
comment 0
visits 39102
Special Recommendation
More>
Related recommendations
实例

<!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>
运行实例 »
点击 "运行实例" 按钮查看在线实例
总结：
定位绝对定位是和相对定位一起使用的，一些有用的边框与背景样式可以很***。边框圆角与透明度背景
Correction status：Uncorrected

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
tp5.1静态文件引用及配置

2019-01-29 12:58:44