第二次作业

最新推荐文章于 2024-09-11 15:33:18 发布

qingchuanyikong

最新推荐文章于 2024-09-11 15:33:18 发布

阅读量159

点赞数 3

文章标签： javascript css 前端

本文链接：https://blog.csdn.net/qingchuanyikong/article/details/139478280

版权

第一题：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一题</title>
    <style>
        div{
            width: 600px;
            height: 25px;
            background-color: rgba(0, 0, 0, 0.762);
            text-align: center;
            border-radius: 8px;
            margin: auto;
            text-shadow: 10px 10px 8px gray;
        }
        li{
            color: aliceblue;
            display: inline-block;
            
        }
        li:hover{
            height: 25px;
            background-color: rgb(158, 5, 5);
        }
    </style>
</head>
<body>
    <div>
        <li>游戏1</li>
        <li>游戏2</li>
        <li>游戏3</li>
        <li>游戏4</li>
        <li>游戏5</li>
        <li>游戏6</li>
        <li>游戏7</li>
        <li>游戏8</li>
        <li>游戏9</li>
    </div>
</body>
</html>

第二题：

第一个网页：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个网页</title>
    <style>
        *{
            margin: 0%;
        }
        .head{
            width: 1400px;
            height: 80px;
            display: flex;
            flex-direction: row;
            background-color: rgb(180, 174, 174);
        }
        .img1{
            padding: 20px 5px 0px 30px;
        }
        .h1{
            width: 160px;
            height: 80px;
            font-size: larger;
            color: white;
            font-family: 楷体;
            float: left;
            padding: 30px 0px 0px 0px;
        }
        .h2{
            height: 80px;
            margin: auto;
            border-radius: 12px;
        }
        .i1{
            width: 400px;
            height: 30px;
            border-radius: 15px;
            margin: 20px;
            display: inline-block;
        }
        .body{
            width: 160px;
            height: 750px;
            float: left;
            background-color: rgb(180, 174, 174);
        }
        [title *="d"]{
            font-size: large;
            color: aliceblue;
            font-family: 楷体;
            width: 80px;
            height: 10%;
            margin: auto;
            flex-direction: column;
        }
        [title *="d"]:hover{
            transform: scale(1.2);
        }
        .foot{
            width: 1240px;
            height: 750px;
            float: left;
        }
        .f1{
            width: 1240px;
            height: 60px;
            background-color: rgb(77, 75, 75); 
        }
        .F1{
            font-family: 楷体;
            font-size: 25px;
            color: white;
            width: 150px;
            height: 80px;
            padding: 18px;
            float: left;
        }
        .F{
            font-size: 20px;
            color: white;
            font-family: 楷体;
            width: 100px;
            height: 80px;
            padding: 20px;
            float: left;
        }
        .f2{
            max-width: 1240px;
            width: 1240px;
            height: 390px;
            background-color: rgb(77, 75, 75);
        }
        .F2-1{
            width: 290px;
            height: 175px;
            margin: 10px;
            float: left;
        }
        .img2{
            position: relative;
            bottom: 60px;
        }
        .img2-font1{
            font-size: large;
            color: white;
            position: relative;
            top: 8px
        }
        .img2-font2{
            color: rgb(147, 136, 136);
            position: relative;
            top: 16px
        }
        .F2-2{
            width: 290px;
            height: 175px;
            margin: 10px;
            float: left;
            float: left;
        }
        .img3{
            position: relative;
            bottom: 60px;
        }
        .img3-font1{
            font-size: large;
            color: white;
            position: relative;
            top: 8px
        }
        .img3-font2{
            color: rgb(147, 136, 136);
            position: relative;
            top: 16px
        }
        .F2-3{
            width: 290px;
            height: 175px;
            margin: 10px;
            float: left;/
        }
        .img4{
            position: relative;
            bottom: 60px;
        }
        .img4-font1{
            font-size: large;
            color: white;
            position: relative;
            top: 8px
        }
        .img4-font2{
            color: rgb(147, 136, 136);
            position: relative;
            top: 16px
        }
        .F2-4{
            width: 290px;
            height: 175px;
            margin: 10px;
            float: left;
        }
        .img5{
            position: relative;
            bottom: 60px;
        }
        .img5-font1{
            font-size: large;
            color: white;
            position: relative;
            top: 8px
        }
        .img5-font2{
            color: rgb(147, 136, 136);
            position: relative;
            top: 16px
        }
        .F2-5{
            width: 290px;
            height: 75px;
            margin: 10px;
            float: left;
        }
        .img6{
            position: relative;
            bottom: 60px;
        }
        .img6-font1{
            font-size: large;
            color: white;
            position: relative;
            top: 8px
        }
        .img6-font2{
            color: rgb(147, 136, 136);
            position: relative;
            top: 16px
        }
        .F2-6{
            width: 290px;
            height: 75px;
            margin: 10px;
            float: left;
        }
        .img7{
            position: relative;
            bottom: 60px;
        }
        .img7-font1{
            font-size: large;
            color: white;
            position: relative;
            top: 8px
        }
        .img7-font2{
            color: rgb(147, 136, 136);
            position: relative;
            top: 16px
        }
        .F2-7{
            width: 290px;
            height: 75px;
            margin: 10px;
            float: left;
        }
        .img8{
            position: relative;
            bottom: 60px;
        }
        .img8-font1{
            font-size: large;
            color: white;
            position: relative;
            top: 8px
        }
        .img8-font2{
            color: rgb(147, 136, 136);
            position: relative;
            top: 16px
        }
        .F2-8{
            width: 290px;
            height: 75px;
            margin: 10px;
            float: left;
        }
        .img9{
            position: relative;
            bottom: 60px;
        }
        .img9-font1{
            font-size: large;
            color: white;
            position: relative;
            top: 8px
        }
        .img9-font2{
            color: rgb(147, 136, 136);
            position: relative;
            top: 16px
        }
        .f3{
            width: 1240px;
            height: 60px;
            background-color: rgb(77, 75, 75);
        }
        .F3{
            font-family: 楷体;
            font-size: 25px;
            color: white;
            width: 150px;
            height: 80px;
            padding: 18px;
            float: left;
        }
        .T{
            font-size: 20px;
            color: white;
            font-family: 楷体;
            /* width: 80px; */
            height: 80px;
            padding: 20px 0px 0px 30px;
            float: left;
        }
        .f4{
            max-width: 1240px;
            width: 1240px;
            height: 240px;
            background-color: rgb(77, 75, 75);
        }
        .F4-1{
            width: 290px;
            height: 75px;
            margin: 10px;
            clear: left;
            float: left;
        }
        .img10{
            position: relative;
            bottom: 60px;
        }
        .img10-font1{
            font-size: large;
            color: white;
            position: relative;
            top: 8px
        }
        .img10-font2{
            color: rgb(147, 136, 136);
            position: relative;
            top: 16px
        }
        .F4-2{
            width: 290px;
            height: 75px;
            margin: 10px;
            /* clear: left; */
            float: left;
        }
        .img11{
            position: relative;
            bottom: 60px;
        }
        .img11-font1{
            font-size: large;
            color: white;
            position: relative;
            top: 8px
        }
        .img11-font2{
            color: rgb(147, 136, 136);
            position: relative;
            top: 16px
        }
        .F4-3{
            width: 290px;
            height: 75px;
            margin: 10px;
            /* clear: left; */
            float: left;
        }
        .img12{
            position: relative;
            bottom: 60px;
        }
        .img12-font1{
            font-size: large;
            color: white;
            position: relative;
            top: 8px
        }
        .img12-font2{
            color: rgb(147, 136, 136);
            position: relative;
            top: 16px
        }
        .F4-4{
            width: 290px;
            height: 75px;
            margin: 10px;
            /* clear: left; */
            float: left;
        }
        .img13{
            position: relative;
            bottom: 60px;
        }
        .img13-font1{
            font-size: large;
            color: white;
            position: relative;
            top: 8px
        }
        .img13-font2{
            color: rgb(147, 136, 136);
            position: relative;
            top: 16px
        }
    </style>
</head>
<body>
    <div class="head">
        <div class="img1">
            <img src="logo.jpg" width="40px" height="40px">
        </div>
        <div class="h1">腾讯视频</div>
        <div class="h2">
            <input type="text" class="i1" placeholder="庆余年第二季">
        </div>
    </div>
    <div class="body">
        <div title="d1">首页</div>
        <div title="d2">VIP会员</div>
        <div title="d3">中视频</div>
        <div title="d4">电视剧</div>
        <div title="d5">电影</div>
        <div title="d6">综艺</div>
        <div title="d7">动漫</div>
        <div title="d8">少儿</div>
        <div title="d9">NBA</div>
        <div title="d10">纪录片</div>
    </div>
    <div class="foot">
        <div class="f1">
            <div class="F1">重磅热播&nbsp;&nbsp;|</div>
            <div class="F">全部</div>
            <div class="F">电视剧</div>
            <div class="F">综艺</div>
            <div class="F">电影</div>
            <div class="F">动漫</div>
            <div class="F">少儿</div>
        </div>
        <div class="f2">
            <div class="F2-1">
               <div class="img2">
                <img src="仙逆.png" width="290px" height="110px">
                <div class="img2-font1">仙逆</div>
                <div class="img2-font2">我辈修士，何惜一战</div>
               </div>
            </div>
            <div class="F2-2">
                <div class="img3">
                 <img src="哈哈哈哈哈.png" width="290px" height="110px">
                 <div class="img3-font1">哈哈哈哈哈&nbsp;第4季</div>
                 <div class="img3-font2">邓超陈赫鹿晗合体旅行</div>
                </div>
             </div>
             <div class="F2-3">
                <div class="img4">
                 <img src="斗破苍穹.png" width="290px" height="110px">
                 <div class="img4-font1">斗破苍穹年番</div>
                 <div class="img4-font2">少年不屈，异火不熄！</div>
                </div>
             </div>
             <div class="F2-4">
                <div class="img5">
                 <img src="与凤行.png" width="290px" height="110px">
                 <div class="img5-font1">与凤行</div>
                 <div class="img5-font2">赵丽颖林更新甜蜜二搭</div>
                </div>
             </div>
             <div class="F2-5">
                <div class="img6">
                 <img src="末代厨娘.png" width="290px" height="110px">
                 <div class="img6-font1">末代厨娘</div>
                 <div class="img6-font2">胡杏儿曾黎再掀清宫风云</div>
                </div>
             </div>
             <div class="F2-6">
                <div class="img7">
                 <img src="绝命狙击.png" width="290px" height="110px">
                 <div class="img7-font1">绝命狙击</div>
                 <div class="img7-font2">黑狼特种小队狙杀毒枭</div>
                </div>
             </div>
             <div class="F2-7">
                <div class="img8">
                 <img src="我叫白小飞.png" width="290px" height="110px">
                 <div class="img8-font1">我叫白小飞</div>
                 <div class="img8-font2">草根英雄&nbsp;创飞末路</div>
                </div>
             </div>
             <div class="F2-8">
                <div class="img9">
                 <img src="承欢记.png" width="290px" height="110px">
                 <div class="img9-font1">承欢记</div>
                 <div class="img9-font2">杨紫许凯事业脑双强爱情</div>
                </div>
             </div>
        </div>
        <div class="f3">
            <div class="F3">为你推荐&nbsp;&nbsp;|</div>
            <div class="T">全部</div>
            <div class="T">科幻</div>
            <div class="T">都市生活</div>
            <div class="T">武侠江湖</div>
            <div class="T">真实事件改编</div>
            <div class="T">原创动画</div>
            <div class="T">奇幻冒险</div>
            <div class="T">东方仙侠</div>
            <div class="T">古装爱情</div>
        </div>
        <div class="f4">
            <div class="F4-1">
                <div class="img10">
                    <img src="贝肯熊合集.png" width="290px" height="110px">
                    <div class="img10-font1">贝肯熊合集</div>
                    <div class="img10-font2">贝肯熊把跑步机玩坏了</div>
                </div>
            </div>
            <div class="F4-2">
                <div class="img11">
                    <img src="庆余年.png" width="290px" height="110px">
                    <div class="img11-font1">庆余年第一季特别版</div>
                    <div class="img11-font2">范闲刚进府遇范思辙找茬？</div>
                </div>
            </div>
            <div class="F4-3">
                <div class="img12">
                    <img src="新大头儿子和小头爸爸.png" width="290px" height="110px">
                    <div class="img12-font1">新大头儿子和小头爸爸...</div>
                    <div class="img12-font2">快乐父子俩</div>
                </div>
            </div>
            <div class="F4-4">
                <div class="img13">
                    <img src="假面骑士.png" width="290px" height="110px">
                    <div class="img13-font1">假面骑士歌查德[普通话...</div>
                    <div class="img13-font2">歌查德的炼金术之旅</div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

第二个网页：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第二个网页</title>
    <style>
        *{
            margin: 0%;
        }
        .head{
            width: 1480px;
            height: 80px;
            background-color: black;
        }
        .img1{
            display: inline-block;
            position: absolute;
            top: 24px;
            left: 160px;
        }
        .h1{
            max-width: 1480px;
            width: 1080px;
            height: 80px;
            margin: auto;
            display: flex;
            flex-direction: row;
        }
        .H1{
            font-size: 28px;
            color: white;
            font-family: 楷体;
            width: 140px;
            height: 80px;
            padding: 28px 0px 0px 0px ;
        }
        .H2{
            font-size: large;
            color: white;
            font-family: 楷体;
            width: 80px;
            height: 80px;
            padding: 35px 0px 0px 15px ;
            float: left;
        }
        .H3{
            font-size: large;
            color: white;
            font-family: 楷体;
            width: 80px;
            height: 80px;
            padding: 35px 0px 0px 15px ;
            float: left;
        }
        .H4{
            font-size: large;
            color: white;
            font-family: 楷体;
            width: 70px;
            height: 80px;
            padding: 35px 0px 0px 15px ;
            float: left;
        }
        .H5{
            font-size: large;
            color: white;
            font-family: 楷体;
            width: 70px;
            height: 80px;
            padding: 35px 0px 0px 0px ;
            float: left;
        }
        .H6{
            font-size: large;
            color: white;
            font-family: 楷体;
            width: 70px;
            height: 80px;
            padding: 35px 0px 0px 0px ;
            float: left;
        }
        .H7{
            font-size: large;
            color: white;
            font-family: 楷体;
            width: 70px;
            height: 80px;
            padding: 35px 0px 0px 0px ;
            float: left;
        }
        .H8{
            font-size: large;
            color: white;
            font-family: 楷体;
            width: 90px;
            height: 80px;
            padding: 35px 0px 0px 5px ;
            float: left;
        }
        .H9{
            color: white;
            font-family: 楷体;
            width: 80px;
            height: 80px;
            padding: 25px 0px 0px 25px ;
            float: left;
        }
        .H9-1{
            width: 120px;
            height: 30px;
            border-radius: 18px;
        }
        .H10{
            font-size: large;
            color: white;
            font-family: 楷体;
            width: 60px;
            height: 80px;
            padding: 35px 0px 0px 80px ;
            float: left;
        }
        .body1{
            width: 1480px;
            height: 40px;
            background-color: red;
        }
        .B1{
            display: grid;
            grid-template-columns: repeat(6,1fr);
            width: 700px;
            margin: auto;
        }
        .b1{
            font-size: large;
            color: white;
            font-family: 楷体;
            padding: 10px 0px 0px 0px;
        }
        .body2{
            width: 1480px;
            height: 280px;
        }
        .foot{
            width: 993px;
            height: 380px;
            margin: auto;
            position: relative;
            right: 19px;
        }
        .F1{
            width: 738px;
            height: 380px;
            float: left;
        }
        .f1{
            width: 738px;
            height: 50px;    
        }
        .img2{
            display: inline-block;
            position: absolute;
            top: 15px;
            left: 15px;
        }
        .f1-1{
            width: 100px;
            height: 50px;
            font-size: 25px;
            font-family: 宋体;
            display: inline-block;
            padding: 15px 10px 0px 40px;
        }
        .f1-2{
            width: 50px;
            height: 50px;
            font-size: small;
            color: gray;
            display: inline-block;
        }
        .f1-3{
            width: 50px;
            height: 50px;
            font-size: small;
            color: gray;
            display: inline-block;
        }
        .f1-4{
            width: 50px;
            height: 50px;
            font-size: small;
            color: gray;
            display: inline-block;
        }
        .f1-5{
            width: 50px;
            height: 50px;
            font-size: small;
            color: gray;
            display: inline-block;
        }
        .f1-6{
            width: 50px;
            height: 50px;
            font-size: small;
            color: gray;
            display: inline-block;
        }
        .f1-7{
            width: 50px;
            height: 50px;
            font-size: small;
            color: gray;
            display: inline-block;
            padding: 0px 0px 0px 250px;
        }
        .f2{
            width: 738px;
            height: 330px;
            display: grid;
            grid-template-columns: repeat(4,1fr);
            grid-template-rows: repeat(2,1fr);
            grid-gap:10px;
        }
        .font{
            font-family: 楷体;
            font-size: large;
        }
        .F2{
            width: 255px;
            height: 380px;
            display: inline-block;
        }
    </style>
</head>
<body>
    <div class="head">
        <div class="img1">
            <img src="网易云logo.png" width="40px" height="40px">
        </div>
        <div class="h1">
            <div class="H1">网易云音乐</div>
            <div class="H2">发现音乐</div>
            <div class="H3">我的音乐</div>
            <div class="H4">关注</div>
            <div class="H5">商城</div>
            <div class="H6">音乐人</div>
            <div class="H7">云推歌</div>
            <div class="H8">下载客户端</div>
            <div class="H9">
                <input type="text" class="H9-1" placeholder="音乐/视频/电台/用户">
            </div>
            <div class="H10">登录</div>
        </div>
    </div>
    <div class="body1">
        <div class="B1">
            <div class="b1">推荐</div>
            <div class="b1">排行榜</div>
            <div class="b1">歌单</div>
            <div class="b1">主播电台</div>
            <div class="b1">歌手</div>
            <div class="b1">新碟上架</div>
        </div>
    </div>
    <div class="body2">
        <img src="迪丽热巴.png" width="1480px" height="280px">
    </div>
    <div class="foot">
        <div class="F1">
            <div class="f1">
                <div class="img2">
                    <img src="小红点.png" width="25px" height="25px">
                </div>
                <div class="f1-1">热门推荐</div>
                <div class="f1-2">华语&nbsp;&nbsp;|</div>
                <div class="f1-3">流行&nbsp;&nbsp;|</div>
                <div class="f1-4">摇滚&nbsp;&nbsp;|</div>
                <div class="f1-5">民谣&nbsp;&nbsp;|</div>
                <div class="f1-6">电子&nbsp;&nbsp;|</div>
                <div class="f1-7">更多</div>
            </div>
            <hr>
            <div class="f2">
                <div class="f2-1">
                    <img src="one.png" width="177px" height="120px">
                    <div class="font">开口沉醉·慵懒迷幻的欧美女声</div>
                </div>
                <div class="f2-2">
                    <img src="two.png" width="177px" height="120px">
                    <div class="font">男生的温柔侵入心底,长出海面伸向月亮</div>
                </div>
                <div class="f2-3">
                    <img src="three.png" width="177px" height="120px">
                    <div class="font">【90后】小时候【所谓非主流】的经典神曲</div>
                </div>
                <div class="f2-4">
                    <img src="four.png" width="177px" height="120px">
                    <div class="font">《Live Aid》此刻,这个星球的通用语</div>
                </div>
                <div class="f2-5">
                    <img src="five.png" width="177px" height="120px">
                    <div class="font">【精选】全网最火超热门歌曲推荐（持续更新）</div>
                </div>
                <div class="f2-6">
                    <img src="six.png" width="177px" height="120px">
                    <div class="font">11堪舆:因堪舆术因两兄弟相争</div>
                </div>
                <div class="f2-7">
                    <img src="seven.png" width="177px" height="120px">
                    <div class="font">华语经典&nbsp;|&nbsp;不容错过的神级Live现场</div>
                </div>
                <div class="f2-8">
                    <img src="eight.png" width="177px" height="120px">
                    <div class="font">不得不爱(DJ阿智Remix)</div>
                </div>
            </div>
        </div>
        <div class="F2">
            <img src="网易云.png" width="255px" height="380px">
        </div>
    </div>
</body>
</html>

第三个网页：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第三个网页</title>
    <style>
        .head{
            width: 1280px;
            height: 120px;
        }
        .H1{
            width: 280px;
            height: 120px;
            float: left;
        }
        .h2{
            width: 80px;
            height: 80px;
            position: relative;
            top: 12px;
            right: 10px;
            float: right;
        }
        .h1{
            width: 140px;
            height: 120px;
            float: right;
        }
        .h1-1{
            width: 110px;
            height: 50px;
            font-size: 35px;
            font-family: 楷体;
            color: red;
            position: relative;
            top: 20px;
            float: right;
        }
        .h1-2{
            width: 140px;
            height: 30px;
            font-size: larger;
            font-family: 楷体;
            color: red;
            position: relative;
            top: 20px;
            float: right;
        }
        .H2{
            width: 1000px;
            height: 120px;
            float: left;
        }
        .H2-1{
            width: 900px;
            height: 120px;
            margin: auto;
            display: grid;
            grid-template-columns: repeat(20,1fr);
            grid-gap: 2px;
            position: relative;
            top: 50px;
        }
        .first{
            font-size: large;
            color: red;
            font-family: 宋体;
        }
        .class-1{
            font-family: 宋体;
            grid-column: 2/5;
        }
        .font-1{
            font-family: 宋体;
            grid-column: 5/7;
        }
        .font-2{
            font-family: 宋体;
            grid-column: 7/9;
        }
        .font-3{
            font-family: 宋体;
            grid-column: 9/11;
        }
        .font-4{
            font-family: 宋体;
            grid-column: 11/13;
        }
        .font-5{
            font-family: 宋体;
            grid-column: 13/15;
        }
        .font-6{
            font-family: 宋体;
            grid-column: 15/17;
        }
        .font-7{
            font-family: 宋体;
            grid-column: 17/19;
        }
        .font-8{
            font-family: 宋体;
            grid-column: 19/21;
        }
        .body1{
            width: 1280px;
            height: 300px;
        }
        .body2{
            width: 1280px;
            height: 120px;
        }
        .b-1{
            width: 1000px;
            height: 60px;
            margin: auto;
            position: relative;
            top: 45px;
        }
        .font-b{
            font-size: 25px;
            font-family: 宋体;
            position: relative;
            top: 35px;
        }
        .font-B{
            color: gray;
            font-size: 25px;
            font-family: 宋体;
            position: relative;
            top: 5px;
            float: right;
        }
        .foot{
            width: 1280px;
            height: 300px;
        }
        .f1{
            width: 880px;
            height: 220px;
            margin: auto;
        }
    </style>
</head>
<body>
    <div class="head">
        <div class="H1">
            <div class="h1">
                <div class="h1-1">拼多多</div>
                <div class="h1-2">拼着买·才便宜</div>
            </div>
            <div class="h2">
                <img src="拼多多logo.png" width="80px" height="80px">
            </div>
        </div>
        <div class="H2">
            <div class="H2-1">
                <div class="first">首页</div>
                <div class="class-1">|&nbsp;商家入驻&nbsp;&nbsp;|</div>
                <div class="font-1">热点资讯&nbsp;|</div>
                <div class="font-2">社会招聘&nbsp;|</div>
                <div class="font-3">校园招聘&nbsp;|</div>
                <div class="font-4">招采平台&nbsp;|</div>
                <div class="font-5">帮助中心&nbsp;|</div>
                <div class="font-6">举报平台&nbsp;|</div>
                <div class="font-7">分享赚钱&nbsp;|</div>
                <div class="font-8">查快递</div>
            </div>
        </div>
    </div>
    <div class="body1">
        <img src="拼多多照片1.png" width="1280px" height="300px">
    </div>
    <div class="body2">
        <div class="b-1">
            <div class="font-b">精彩活动</div>
            <div class="font-B">更多&gt</div>
        </div>
    </div>
    <hr>
    <div class="foot">
        <div class="f1">
            <img src="拼多多照片2.png" width="880px" height="220px">
        </div>
    </div>
</body>
</html>