css3+html5——拼接图片中icon的使用、照片轮换（没写完）、视频、音频的加入

emmm...这一篇其实挺杂的，还是留着给自己看吧...
大概效果如下：
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新闻</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .wrap{
            width: 800px;
            margin: 0 auto;
        }
        .news{
            width: 800px;
            height:130px;
            margin: 0 auto;
        }
        ul.news li{
            /*background-color: blueviolet;*/
            line-height: 2em;
            list-style-type: none;
            background:greenyellow url("../img/iconNew.png") 0 -40px no-repeat;
            padding-left: 15px;
        }
        ul.news li a{
            text-decoration: none;
            color: black;
        }
        ul.news li a:hover{
            color: red;
            text-decoration: underline;
        }
        ul#menu{
            width: 900px;
            background-color: antiquewhite;
            margin: 0 auto;
            /*清除浮动*/
            overflow: hidden;
            /*弹性布局*/
            display: flex;
            justify-content: center;
        }
        ul#menu li{
            list-style-type: none;
        }
        ul#menu li a{
            text-decoration: none;
            display: block;
            padding: 10px 45px;
        }
        ul#menu li a:hover{
            background: cornflowerblue;
            text-shadow: 0px 1px gold;
        }
        .box_pink{
            width: 600px;
            height: 300px;
            background: pink;
            position: relative;
            left: 50px;
            top:20px;
        }
        .box_pink p{
            width: 30px;
            height:30px;
            display: block;
            font-size: 30px;
            color: white;
            text-align: center;
            padding-bottom: 10px;
            position: relative;
        }
        .box_pink p.left{
            border-radius: 0 10px 10px 0;
            left: -990px;
            top:95px;
        }
        .box_pink p.right{
            border-radius: 10px 0 0 10px;
            left: -990px;
            top:70px;
        }
        .box_pink:hover p.left{
            left: 0px;
            background: cornflowerblue;
        }
        .box_pink:hover p.right{
            left: 570px;
            background: cornflowerblue;
        }


        .box_pink ul {
            /*width: 150px;*/
            /*height:20px;*/
            /*background: greenyellow;*/
            /*overflow: hidden;*/
            position: absolute;
            bottom: 5px;
            right:5px;
        }
        .box_pink ul li{
            background: deeppink;
            list-style-type: none;
            width:20px;
            height:20px;
            float: left;
            border-radius: 10px;
            text-align: center;
            margin-left: 5px;
        }

        .box1{
            width: 700px;
            height:280px;
            background: aquamarine;
            padding-left: 50px;
            padding-top: 50px;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <ul id="menu">
            <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>
            <li><a href="#">首页</a></li>
            <li><a href="#">首页</a></li>

        </ul>
        <ul class="news">
            <li><a href="#">啦啦啦啦啦啦啦</a></li>
            <li><a href="#">啦啦啦啦啦啦啦</a></li>
            <li><a href="#">啦啦啦啦啦啦啦</a></li>
            <li><a href="#">啦啦啦啦啦啦啦</a></li>
        </ul>
        <div class="box_pink">

            <p class="left">></p>
            <p class="right"><</p>

            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ul>
        </div>
        <div class="box1">
            <video width="320" height="240" controls>
                <source src="../img/movie.mp4" type="video/mp4">
            </video>

            <audio controls>
                <source src="../img/舍得.mp3" type="audio/mp3">
            </audio>
        </div>

    </div>
</body>
</html>
更多相关文章

随机推荐
