第二次作业

最新推荐文章于 2024-09-09 09:35:48 发布

巧克力男孩dd

最新推荐文章于 2024-09-09 09:35:48 发布

阅读量138

点赞数 2

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/2301_81056739/article/details/139602526

版权

1.导航栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导航栏</title>
    <style>
        div{
            background-color: darkblue;
            width: 800px;
            height: 30px;
            border:1px solid darkblue;
            border-radius: 10px;
            box-shadow: 2px 5px 2px rgba(28, 94, 94, 0.585);
           
            
            text-align: center;
        }
        li{
            width:60px ;
            height: 30px;  
           
            display: inline-block;
            position:relative;
            top: -15px;
            left:-25px;
            font-size:medium;
            color: aliceblue;
            text-shadow: 5px 5px 5px white;
            
            
        }
        li:hover{
            background-color: rgba(180, 48, 48, 0.67);
        }
        
        span{
            position: absolute;
            top: 4px;
            left: 8px;
        }
    </style>
</head>
<body>
    <div>
        <ul>
            <li><span>游戏1</span></li>
            <li><span>游戏2</span></li>
            <li><span>游戏3</span></li>
            <li><span>游戏4</span></li>
            <li><span>游戏5</span></li>
            <li><span>游戏6</span></li>
            <li><span>游戏7</span></li>
            <li><span>游戏8</span></li>
            <li><span>游戏9</span></li>
           
            
            
        </ul>
    </div>
</body>
</html>

2.教务系统1

<!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>
        /* .c{
            margin:auto;
            padding-top:100px ;
        } */
        .a{
            padding: 0px;
            margin: auto;
            background: url(http://zswxyjw.yinghuaonline.com/znlykjdxswxy_jsxsd/framework/images/index/index_02.png) no-repeat 
            scroll ;
            width:474px;
            height: 61px;
            background-size:474px  61px ; 
            margin-top:100px ;
            margin-left: 290px;
           
        }
        .b{ 
            padding: 0px;
            margin: 0px;
            background: url(http://zswxyjw.yinghuaonline.com/znlykjdxswxy_jsxsd/framework/images/index/bgtp.gif) no-repeat scroll  ;
            width:955px;
            height:296px;
            background-size:955px  296px ;
            margin: auto;
            position: static;
        }
        .d{
            padding: 0px;
            margin: 0px;
            background-color: rgba(237, 237, 237, 0.692);
        }
        .c{
            margin-left: 500px;
            margin-bottom: 00px;
            padding-top:20px ;
            line-height: 2;
          
        }
       /* input[type="text"], [type="password"] { */
           input{
            width: 229.6px;
            height: 29.6px;
            position: static;
           }

        [type="submit"]{
            width:45px;
            height:45px;
            background-image: url( file:///E:/%E5%9B%BE%E6%A0%87/tj.png);       
            background-size:cover ; 
            border: 0px;
            margin-left: 200px;
         }     

         
         [type="reset"]{
            width:45px;
            height:45px;
            background-image:   url( file:///E:/%E5%9B%BE%E6%A0%87/wenti.png);     
            background-size:cover ;
            border: 0px;
         }
         .e{
            width: 400px;
            height: 20px;
            color: rgba(123, 174, 180, 0.953);
            padding-left: 280px;
            display: inline-block;
         }
         .f{
            width: 400px;
            height: 20px;
            color: rgba(123, 174, 180, 0.953);
            display: inline-block;
            padding-left: 400px;
         }
    </style>
</head>
<body>
    <div  class="a"></div>
    <div class="d">
        <div class="b">
            <div class="c">
            <form  action="https://swxy.csuft.edu.cn/xsgzc/" >
            <h2>用户登录</h2>
            <p>用户名:&nbsp;&nbsp;&nbsp;<input type="text" required ></p>
            <p>密码:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="password" required></p>
            <button type="submit"></button>
            <button type="reset"></button>
            </form>
            </div>
       </div>
    </div>
    <div class="e">湖南强智科技发展有限公司 版权所有</div>
    <div class="f">隐私声明|设为首页</div>
</body>
</html>

3.教务系统2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=div, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .a{
           background: url(http://zswxyjw.yinghuaonline.com/znlykjdxswxy_jsxsd/framework/images/index/index_02.png) no-repeat scroll; 
           width:511px;
           height: 61px;
           /* border: 1px solid red; */
           background-size: cover;
           margin-left: 300px;
           display: inline-block;
        }
        .xm{
            position: fixed;
            top: 0px;
            margin-left: 240px;
            display: inline-block;
        }
        .bg{
            position: fixed;
            top: 0px;
            margin-top: -200sspx;
            background-color: rgb(142, 214, 237);
            display: inline-block;
            margin-left: 400px;
        }
        .ren,.jiu,.sz{ border-color: antiquewhite;
            width: 22px;
            height: 22px;
            padding-left: 20px;
            /* padding-right: 20px; */
                
        }
        .tc{
            margin-left: 30px;
            width: 22px;
            height: 22px;
        }
        .table{
            
            /* border: 1px solid red; */
            background-color: rgba(118, 152, 152, 0.838);
        }
        
        th,tr{
            /* border: 1px solid red; */
        }

        .fz{
            width: 21px;
            height:15px;
            background-size: cover;
        }
        li{
            display: inline-block;
            margin-left:20px;
            margin-right:20px;
            margin-top: 10px;
            margin-bottom: 10px;
        }
        .dhl{
            background-color:blueviolet;
            color: rgb(255, 245, 245);
            height: 41px;
            font-style: "楷体";
            font-weight: 700;
            margin-bottom: 20px;
          
        }
        ul{
              margin-left: 270px;
        }
        .box{
            margin:auto;
            display:grid;
            margin: auto;
            width: 970px;
            height: 450px;
            grid-template-columns:(6,1fr) ;
            grid-template-rows:(3,1fr) ;
            grid-gap: 5px;
            margin-bottom: 10px;
        }
        .box>div:nth-child(1){
            grid-column: 1/3;
            grid-row: 1/3;
            background-color: rgb(61, 95, 197);
        }
        .box>div:nth-child(2){
            grid-row: 1/3;
            background-color: #4FB5C7;
        }
        .box>div:nth-child(3),.box>div:nth-child(5),.box>div:nth-child(7),.box>div:nth-child(8),.box>div:nth-child(9),.box>div:nth-child(10),.box>div:nth-child(11),.box>div:nth-child(12){
            background-color: rgb(61, 95, 197);
        }
        .box>div:nth-child(4),.box>div:nth-child(6){
            background-color: rgb(61, 95, 197);
            grid-column: 5/7;
         .box>div:nth-child(3){
                background-color: #1978D8
                position: absolute;
                top: 00px;
                left: 50px;
        }
    
     
       
    </style>

    <style>
         .box{
            margin:auto;
            display:grid;
            width: 970px;
            height: 460px;
            grid-template-columns:(6,1fr) ;
            grid-template-rows:(3,1fr) ;
            grid-gap: 5px;
            margin-bottom: 10px;
        }
        .x{
            position: absolute;
            top: 38%;
            left: 23%;
            transform: translateY(-50%);
            width: 72px;
            height: 64px;
            /* margin-top: 110px;
            margin-left: 80px; */
        }
        .grxx{
            color: rgb(249, 249, 249);
            position: absolute;
            top: 300px;
            left: 360px;
        }
        .ywx{
            color: rgb(249, 249, 249);
            position: absolute;
            top: 250px;
            left: 440px;
        }
        .hs{
            position: absolute;
            top: 230px;
            left:653px;
        }
        .xkzx{
            color: white;
            position: absolute;
            top: 300px;
            left:673px;
        }
        .pj{
            color: white;
            position: absolute;
            top: 160px;
            left:825px;
        }
        .xspj{
            color: white;
            position: absolute;
            top: 220px;
            left: 840px;
        }
        .box>div:nth-child(3){
                background-color: #1978D8;
        }
      

        .box>div:nth-child(4){
                background-color:#DB6987;
        }
        .ly{
            display: flex;
        }
        .san{
           margin: auto;
           margin-top: 30px;
           margin-left: 20px;
        }
        .ysly{color: white;
            margin-top: 5px;
           text-indent:9% ;
        }
        .box>div:nth-child(5){
                background-color:#90A8E3;}

    
        [alt="e"]{
            margin: auto;
            margin-top: 35px;
            margin-left: 65px;
        }
        .pyfa{color: white;
            margin-top: 5px;
            text-indent:35%;
        }
        .box>div:nth-child(6){
                background-color:#8E7AAA}
        
        [alt="f"]{
           margin: auto;
           margin-top: 30px;
           margin-left: 20px;
        }
        .ysgg{
            color: white;
            margin-top: 5px;
            
           text-indent:-100%;
        }
        .box>div:nth-child(7){
                background-color:#187D9A}
        .box>div:nth-child(8){
                background-color:#A0CF41}
        .box>div:nth-child(9){
                background-color:#EAAF76}
        .box>div:nth-child(10){
                background-color:#88BAD9}
        .box>div:nth-child(11){
                background-color:#B69CCC}
        .box>div:nth-child(12){
                background-color:#09619F}
        
        [alt="g"],[alt="h"],[alt="i"],[alt="j"],[alt="k"],[alt="l"]{
           margin: auto;
           margin-top: 30px;
           margin-left: 40px;
        }
        .ysgg,.ktcjcx,.jxzl,.skjhcx,.whdx,.xjkp,.xgmm{
            color: white;
            margin-top: 5px;
           text-indent:25% ;
        }
        .whdx{
            text-indent:15% ;
        }
       .last{
        width: 970px;
        /* background-color: black; */
        border: 1px solid rgba(209, 188, 188, 0.804);
        margin: auto;
       }
       .lls{
        width: 970px;
        margin: auto;
        text-align: center;
        color:rgba(209, 188, 188, 0.804); 
       }
    </style>
   
</head>
<body>
    <div>
        <div class="a"></div>
        <div class="xm">2023013756(ywx)</div>
        <div class="bg">
            <table  border="1px" width="216px" height="25px" cellspacing="0" cellpadding="50px" align="center" >
                <tr>
                    <td>
                        <a  href="" >
                            <img class="ren" src="http://zswxyjw.yinghuaonline.com/znlykjdxswxy_jsxsd/framework/images/Nsb_top_p1.jpg" alt="">
                        </a>
                    </td>
                    <td>
                        <a  href="" >
                            <img class="jiu" src="./九宫格.png" alt="">
                        </a>
                    </td>
                    <td>
                        <a  href="" >
                            <img class="sz" src="./设置.png" alt="">
                        </a> 
                        <a  href="" >
                            <img class="tc" src="./退出.png" alt="">
                        </a>
                    </td>
                    
                </tr>
            </table>
        </div>
    </div>
    <div class="dhl">
        <ul>
            <li>
                <a href="">
                    <img  src="./首页.png" class="fz" alt="">
                </a>
            </li>
            <li>我的桌面</li>
            <li>学籍成绩</li>
            <li>培养管理</li>
            <li>考试报名</li>
            <li>教学评价</li>
        </ul>
    </div>
    <div class="box">
        <div id="hhhh">
            <div class="x">
                <img src="http://zswxyjw.yinghuaonline.com/znlykjdxswxy_jsxsd/framework/images/tp1.png"  alt="" align="center">
            </div>
            <div class="grxx">个人信息</div>
            <div class="ywx">姓名:晏文轩<br>
                学号:2023013756<br>
            </div>
            
        </div>
        <div >
            <div  class="hs" > <img src="http://zswxyjw.yinghuaonline.com/znlykjdxswxy_jsxsd/framework/images/tp2.png" ></div>
           
           <div class="xkzx"> 选课中心</div>
        </div>
        <div>
           <div><img src="http://zswxyjw.yinghuaonline.com/znlykjdxswxy_jsxsd/framework/images/tp3.png" class="pj"></div> 
            <div class="xspj">学生评教</div>
        </div>    
        <div>
          <div class="ly"><img src="http://zswxyjw.yinghuaonline.com/znlykjdxswxy_jsxsd/framework/images/tp5.png" class="san" alt=""></div>  
            <div class="ysly">已收留言</div>
        </div>
        <div>
            <div><img src="http://zswxyjw.yinghuaonline.com/znlykjdxswxy_jsxsd/framework/images/tp4.png" alt="e"></div>
            <div class="pyfa">培养方案</div>
        </div>
    
        <div>
            <img src="http://zswxyjw.yinghuaonline.com/znlykjdxswxy_jsxsd/framework/images/tp6.png" alt="f">
            <div class="ysgg">已收公告</div>
        </div>
        <div>
            <img src="http://zswxyjw.yinghuaonline.com/znlykjdxswxy_jsxsd/framework/images/tp7.png" alt="g">
            <div class="ktcjcx">课程成绩查询</div>
        </div>
        <div>
            <img src="http://zswxyjw.yinghuaonline.com/znlykjdxswxy_jsxsd/framework/images/tp8.png" alt="h">
            <div class="jxzl">教学周历</div>
        </div>
        <div>
            <img src="http://zswxyjw.yinghuaonline.com/znlykjdxswxy_jsxsd/framework/images/tp9.png" alt="i">
            <div class="skjhcx">授课计划查询</div>
        </div>
        <div class="h">
            <img src="http://zswxyjw.yinghuaonline.com/znlykjdxswxy_jsxsd/framework/images/tp10.png" alt="j">
            <div class="whdx">未获得学分成绩查询</div>
        </div>
        <div>
            <img src="http://zswxyjw.yinghuaonline.com/znlykjdxswxy_jsxsd/framework/images/tp11.png" alt="k">
            <div class="xjkp">学籍卡片</div>
        </div>
        <div>
            <img src="http://zswxyjw.yinghuaonline.com/znlykjdxswxy_jsxsd/framework/images/tp12.png" alt="l">
            <div class="xgmm">修改密码</div>
        </div>
        
    </div>
    
    <div class="last">
    </div>
    <div class="lls">Copyright (C) 湖南强智科技发展有限公司 All Rights Reserved 湘ICP 备12010071号</div>
</body>
</html>

4.小红书

<!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>
        *{
            margin: 0px;
            padding: 0px;
            
        }
        .dahanglan{
            height: 72px;
            /* border: 1px solid red; */
        }
        .a{
            background-image: url(file:///D:/ApowerREC/xhs.png);  
            width:68.33px;      
            height: 32px;
            background-size: cover;
            margin-top: 20px;
            margin-left: 24px;
            /* border: 1px solid red; */
            float:left;
        }
        input{
            border-radius: 50px;
            width: 456px;
            height: 40px;
            margin-top: 15px;
            margin-left: 300px;
            font-size: larger;
            padding-left: 20px;
            float:left;
        }
        .s{
            margin-left: -50px;
            margin-top: 15px;
            width: 40px;
            height: 40px;
        }
        .c,.y{
            color: rgba(186, 207, 210, 0.936);
            font-size: larger;
            display: inline-block;
            position: fixed;
            top: 20px;
            right:200px;
        }
        .y{
            color: rgba(186, 207, 210, 0.936);
            font-size: larger;
            display: inline-block;
            position: fixed;
            top: 20px;
            right:100px;
        }
        .m{
            /* border: 1px solid red; */
            height: 624px;
            width: 224px;
            /* display:inline-block ; */
            float: left;
        }
        .fz{
            width: 24px;
            height: 24px;
        }
        .fz,.fx{
            position: absolute;
            left: 10px;
            top: 10px;
        }
        .fx{
            margin-left: 30px;
        }

        .f{
            margin-top: 100px;
            width: 210px;
            height: 48px;
            font-size: larger;
            position: fixed;
            left: 10px;
            top: 15px;
        }
        .f:hover{
            border-radius: 50px;
            background-color: rgb(235, 250, 249);
        }
        .fb{
            width: 24px;
            height: 24px;
        }
        .fb,.fbb{
            position: absolute;
            left: 10px;
            top: 10px;
        }
        .fbb{
            margin-left: 30px;
        }

        .er{
            margin-top: 100px;
            width: 210px;
            height: 48px;
            font-size: larger;
            position: fixed;
            left: 10px;
            top: 70px;
        }
        .er:hover{
            border-radius: 50px;
            background-color: rgb(235, 250, 249);
        }

        .tz{
            width: 24px;
            height: 24px;
        }
        .tz,.tzz{
            position: absolute;
            left: 10px;
            top: 10px;
        }
        .tzz{
            margin-left: 30px;
        }

        .san{
            margin-top: 100px;
            width: 210px;
            height: 48px;
            font-size: larger;
            position: fixed;
            left: 10px;
            top: 130px;
        }
        .san:hover{
            border-radius: 50px;
            background-color: rgb(235, 250, 249);
        }
        .w{
            width: 24px;
            height: 24px;
        }
        .w,.ww{
            position: absolute;
            left: 10px;
            top: 10px;
        }
        .ww{
            margin-left: 30px;
        }

        .si{
            margin-top: 100px;
            width: 210px;
            height: 48px;
            font-size: larger;
            position: fixed;
            left: 10px;
            top: 190px;
        }
        .si:hover{
            border-radius: 50px;
            background-color: rgb(235, 250, 249);
        }

        .gd{
            width: 24px;
            height: 24px;
        }
        .gd,.gdd{
            position: absolute;
            left: 10px;
            top: 10px;
        }
        .gdd{
            margin-left: 30px;
        }

        .wu{
            margin-top: 100px;
            width: 210px;
            height: 48px;
            font-size: larger;
            position: fixed;
            left: 10px;
            bottom: 20px;
        }
        .wu:hover{
            border-radius: 50px;
            background-color: rgb(235, 250, 249);
        }
        li{
            /* border: 1px solid red; */
            margin-left: 30px;
            display: inline-block;
            width: 64px;
            height: 40px;
        }
        .tj{
            height: 10px;
            font-size:large;
        }
        .wp{
            margin-top: 20px;
            /* border: 1px solid red; */
            width:1250px ;
            display: grid;
            grid-template-columns: repeat(5,1fr);
            height: 600px;
            grid-template-rows: repeat(2,1fr);
        }
        .hh{
           width: 1250px;
            height: 625px;
            /* border: 1px solid red; */
            /* display:inline-block ; */
            float: left;
            
        }

        li:hover{
            width: 64px;
            height: 40px;
            border-radius: 50px;
            background-color: aqua;
         
       
        }
        .dahanglanl{
            margin-top: 10px;
            /* border: 1px solid red; */
            display:inline-block ;
            text-align: center;
            height: 45px;
            padding-left: 20px;
        }
        .dzgy:hover{
            width: 64px;
            height: 40px;
            border-radius: 50px;
            background-color: aqua;
        }
        .wp>div{
            margin-bottom: 20px;
            margin-right: 10px;
            margin-left: 10px;
            /* border: 1px solid red; */
        }
        p{  
            font-size: larger;
            margin-top: 10px;
            padding-bottom: 10px;
        }
        
        .tu1{
            background: url(https://sns-webpic-qc.xhscdn.com/202406081002/0bab703fc700fdbef4de5316261deb05/1040g2sg313j5lc1g00005n17kf71f0me41ffg0g!nc_n_webp_mw_1) no-repeat scroll;
            width: 239px;
            height: 292px;
            border-radius: 50px;
            background-size: cover;
            float: left;
        }
        [alt="a"]{
            width: 20px;
            height: 20px;
            background:url(https://sns-avatar-qc.xhscdn.com/avatar/1040g2jo30vjojg93lo005n17kf71f0me22qq6i8?imageView2/2/w/60/format/webp|imageMogr2/strip);
            background-size: cover;
            border-radius: 100px;
            float: left;
        } 
        .w1{
            color: inherit;
            float:right;
        }
         .ax{
            width: 20px;
            height: 20px;
            border-radius: 100px;
            float: right;
        }
        
        .oi{
            float: left;
        }
        
        .tu2{
            background: url(https://sns-webpic-qc.xhscdn.com/202406102245/eb551f0967de5837b18b42f893da06c3/1040g008313qdnmf2hc005p5q5o757fn4g036e1o!nc_n_webp_mw_1) no-repeat scroll;
            width: 239px;
            height: 292px;
            border-radius: 50px;
            background-size: cover;
            float: left;
        }
        [alt="b"]{
            width: 20px;
            height: 20px;
            background:url(https://sns-avatar-qc.xhscdn.com/avatar/1040g2jo30oscjjgo44005o9b7gs0bhclrmuplv0?imageView2/2/w/60/format/webp|imageMogr2/strip);
            background-size: cover;
            border-radius: 100px;
            float: left;
        } 
        .w2{
            float:right;
        }
        .ax{
            width: 20px;
            height: 20px;
            border-radius: 100px;
            float: right;
        }
        
        .ji{
            float: left;
        }
        .tu3{
            background: url(https://sns-webpic-qc.xhscdn.com/202406102245/e1fd84471ca4c5ef7c669b85c444ba2e/1040g008313pflkqdhe5g5otuha39t5bvutjf848!nc_n_webp_mw_1) no-repeat scroll;
            width: 239px;
            height: 292px;
            border-radius: 50px;
            background-size: cover;
            float: left;
        }
        [alt="c"]{
            width: 20px;
            height: 20px;
            background:url(https://sns-avatar-qc.xhscdn.com/avatar/1040g2jo30u03hi5d4q705onn7ep7okenek9htig?imageView2/2/w/60/format/webp|imageMogr2/strip);
            background-size: cover;
            border-radius: 100px;
            float: left;
        } 
        .w2{
            float:right;
        }
        .ax{
            width: 20px;
            height: 20px;
            border-radius: 100px;
            float: right;
        }
        .ji{
            float: left;
        }
        .tu4{
            background: url(https://sns-webpic-qc.xhscdn.com/202406102346/422d67aac82084373c02511afa4bb8ff/1040g008313scq1ae1e005nlaqn208gr2oo01d3g!nc_n_webp_mw_1) no-repeat scroll;
            width: 239px;
            height: 292px;
            border-radius: 50px;
            background-size: cover;
            float: left;
        }
        [alt="d"]{
            width: 20px;
            height: 20px;
            background:url(https://sns-avatar-qc.xhscdn.com/avatar/1040g2jo310rhhe7c6k005nlaqn208gr2qahe6b8?imageView2/2/w/60/format/webp|imageMogr2/strip);
            background-size: cover;
            border-radius: 100px;
            float: left;
        } 
        .ax{
            width: 20px;
            height: 20px;
            border-radius: 100px;
            float: right;
        }
        .tu5{
            background: url(https://sns-webpic-qc.xhscdn.com/202406102346/2ea00f5fdfea1a490e13bc58a87c5d1a/1040g008313nsjo4shk3g5p9ps521gjmtu9oj6d0!nc_n_webp_mw_1) no-repeat scroll;
            width: 239px;
            height: 292px;
            border-radius: 50px;
            background-size: cover;
            float: left;
        }
        [alt="e"]{
            width: 20px;
            height: 20px;
            background:url(https://sns-avatar-qc.xhscdn.com/avatar/1040g2jo313oi1en31m005o00ar908dei56asbf8?imageView2/2/w/60/format/webp|imageMogr2/strip);
            background-size: cover;
            border-radius: 100px;
            float: left;
        } 
        .ax{
            width: 20px;
            height: 20px;
            border-radius: 100px;
            float: right;
        }
        .tu6{
            background: url(https://sns-webpic-qc.xhscdn.com/202406110011/f84750bfb1a448353482146cf151b253/1040g2sg313pjepgdhc005odkj7d40mvn752ea8g!nc_n_webp_mw_1) no-repeat scroll;
            width: 239px;
            height: 292px;
            border-radius: 50px;
            background-size: cover;
            float: left;
        }
        [alt="f"]{
            width: 20px;
            height: 20px;
            background:url(https://sns-avatar-qc.xhscdn.com/avatar/6639c2dd318763d6e48098c5.jpg?imageView2/2/w/60/format/webp|imageMogr2/strip);
            background-size: cover;
            border-radius: 100px;
            float: left;
        } 
        /* .ax{
            width: 20px;
            height: 20px;
            border-radius: 100px;
            float: right;
        } */
        .tu7{
            background: url(https://sns-webpic-qc.xhscdn.com/202406110011/19fc33c4dc13863140d5116246bae004/1040g008313p8j1c1ie005pbv3bk85lk6vnvflvg!nc_n_webp_mw_1) no-repeat scroll;
            width: 239px;
            height: 292px;
            border-radius: 50px;
            background-size: cover;
            float: left;
        }
        [alt="g"]{
            width: 20px;
            height: 20px;
            background:url(https://sns-avatar-qc.xhscdn.com/avatar/1040g2jo3133gdbu9nc005nutt3dgbnq6o1gju7o?imageView2/2/w/60/format/webp|imageMogr2/strip);
            background-size: cover;
            border-radius: 100px;
            float: left;
        }
        .tu8{
            background: url(https://sns-webpic-qc.xhscdn.com/202406110027/271b3d1a61ca688224c24843643c5d00/1040g2sg313gf8lo9g200492k8m87chkpa56dea0!nc_n_webp_mw_1) no-repeat scroll;
            width: 239px;
            height: 292px;
            border-radius: 50px;
            background-size: cover;
            float: left;
        }
        [alt="h"]{
            width: 20px;
            height: 20px;
            background:url(https://sns-avatar-qc.xhscdn.com/avatar/609346f670e23f3f8d33cfb7.jpg?imageView2/2/w/60/format/webp|imageMogr2/strip);
            background-size: cover;
            border-radius: 100px;
            float: left;
        } 
        .tu9{
            background: url(https://sns-webpic-qc.xhscdn.com/202406110033/1a328824927e8434f9fdbb80f6bc473b/1040g008313q6cim626605nni4mc088686brphf0!nc_n_webp_mw_1) no-repeat scroll;
            width: 239px;
            height: 292px;
            border-radius: 50px;
            background-size: cover;
            float: left;
        }
        [alt="i"]{
            width: 20px;
            height: 20px;
            background:url(https://sns-avatar-qc.xhscdn.com/avatar/5ef2259800000000010020c8.jpg?imageView2/2/w/60/format/webp|imageMogr2/strip);
            background-size: cover;
            border-radius: 100px;
            float: left;
        } 
        .tu10{
            background: url(https://sns-webpic-qc.xhscdn.com/202406110038/2c2efd663e0492d5234d39f459b8875b/1040g008313dq8esrnq005n96ngb5jsl43g5qdu0!nc_n_webp_mw_1) no-repeat scroll;
            width: 239px;
            height: 292px;
            border-radius: 50px;
            background-size: cover;
            float: left;
        }
        [alt="j"]{
            width: 20px;
            height: 20px;
            background:url(https://sns-avatar-qc.xhscdn.com/avatar/643c24db47807117dee30044.jpg?imageView2/2/w/60/format/webp|imageMogr2/strip);
            background-size: cover;
            border-radius: 100px;
            float: left;
        } 
      
          </style>
         
</head>
<body>
    <div class="dahanglan">
        <div class="a"></div>
        <div class="bc">
            <input type="text" placeholder="登录探索更多内容">
            <a href="">
                <img  class="s" src="./搜索.png" alt="">
            </a>
        </div>
        <div class="b">   
            <div class="c">创作中心</div>
            <div class="y">业务合作</div>
        </div>
    </div>
    <div class="m">
        <div class="f">
            <a href=" ">
                <img class="fz" src="./房子.png" alt="">
            </a>
            <div class="fx" > 发现</div> 
        </div>
        <div class="er">
            <a href=" ">
                <img class="fb" src="./发布.png" alt="">
            </a>
            <div class="fbb" > 发布</div> 
        </div>
        <div class="san">
            <a href=" ">
                <img class="tz" src="./通知.png" alt="">
            </a>
            <div class="tzz" >通知</div> 
        </div>
        <div class="si">
            <a href=" ">
                <img class="w" src="./我.png" alt="">
            </a>
            <div class="ww" >我</div> 
        </div>

        <div class="wu">
            <a href=" ">
                <img class="gd" src="./更多.png" alt="">
            </a>
            <div class="gdd" >更多</div> 
        </div>
    </div>
        <div class="hh">
            <div class="dahanglanl">
                <ul >
                    <li class="tj">推荐</li>
                    <li class="dzgy">电子公园</li>
                    <li><span>教育</span></li>
                    <li>穿搭</li>
                    <li>美食</li>
                    <li>彩妆</li>
                    <li>影视</li>
                    <li>职场</li>
                    <li>家居</li>
                    <li>游戏</li>
                   <li>旅行</li> 
                    <li>健身</li>
                </ul>
            </div>
            <div class="wp">
                <div class="one">
                    <div class="tu1"></div>
                    <div>
                        <p>蓝旗金枪鱼</p>
                    <div>
                        <img src="./我.png" alt="a">
                        <div class="oi">早点睡觉oi</div>
                    </div>
                    <div class="one"> 
                        <!-- <div class="two">2.9w -->
                            <span class="w1">2.9w</span>
                        <img class="ax" src="./爱心.png" alt="">
                    </div>
                </div>
                </div>
                <div class="two">
                    <div class="tu2"></div>
                    <div>
                        <p>是谁还没有iPadpro</p>
                    <div>
                        <img src="./我.png" alt="b">
                        <div class="ji">霸王茶几</div>
                    </div>
                    <div > 
                        <!-- <div class="two">2.9w -->
                            <span class="w2">3.9w</span>
                        <img class="ax" src="./爱心.png" alt="">
                    </div>
                </div>
                </div>
                <div class="three">
                    <div class="tu3"></div>
                    <div>
                        <p>拜塔三人组终于动漫化了</p>
                    <div>
                        <img src="./我.png"  alt="c">
                        <div class="oi">芜青</div>
                    </div>
                    <div> 
                        <!-- <div class="two">2.9w -->
                            <span class="w1">329</span>
                        <img class="ax" src="./爱心.png" alt="">
                    </div>
                </div>
                </div>
                <div class="four">
                    <div class="tu4"></div>
                    <div>
                        <p>出！！！拒绝自提</p>
                    <div>
                        <img src="./我.png" alt="d">
                        <div class="oi">相机转卖</div>
                    </div>
                    <div> 
                        <!-- <div class="two">2.9w -->
                            <span class="w1">557</span>
                        <img class="ax" src="./爱心.png" alt="">
                    </div>
                </div>
                </div>
                <div class="five">
                    <div class="tu5"></div>
                    <div>
                        <p>这个足球！！！是？</p>
                    <div>
                        <img src="./我.png" alt="e">
                        <div class="oi">蓝锁宝宝</div>
                    </div>
                    <div> 
                        <!-- <div class="two">2.9w -->
                            <span class="w1">3241</span>
                        <img class="ax" src="./爱心.png" alt="">
                    </div>
                </div>
                </div>
                <div class="six">
                    <div class="tu6"></div>
                    <div>
                        <p>像的扣1!,不像的扣1</p>
                    <div>
                        <img src="./我.png" alt="f">
                        <div class="oi">维c</div>
                    </div>
                    <div> 
                        <!-- <div class="two">2.9w -->
                            <span class="w1">8.4w</span>
                        <img class="ax" src="./爱心.png" alt="">
                    </div>
                </div>
                </div>
                <div class="seven">
                    <div class="tu7"></div>
                    <div>
                        <p>大雄~哆啦A梦</p>
                    <div>
                        <img src="./我.png" alt="g">
                        <div class="oi">嘻嘻嘻</div>
                    </div>
                    <div> 
                        <!-- <div class="two">2.9w -->
                            <span class="w1">4w</span>
                        <img class="ax" src="./爱心.png" alt="">
                    </div>
                </div>
                </div>
                <div class="seven">
                    <div class="tu8"></div>
                    <div>
                        <p>最伟大的男朋友蛋糕出现了</p>
                    <div>
                        <img src="./我.png" alt="h">
                        <div class="oi">我在</div>
                    </div>
                    <div> 
                        <!-- <div class="two">2.9w -->
                            <span class="w1">5.5w</span>
                        <img class="ax" src="./爱心.png" alt="">
                    </div>
                </div>
                </div>
                <div class="nine">
                    <div class="tu9"></div>
                    <div>
                        <p>我这不算舔狗吧</p>
                    <div>
                        <img src="./我.png" alt="i">
                        <div class="oi">啾啾</div>
                    </div>
                    <div> 
                        <!-- <div class="two">2.9w -->
                            <span class="w1">9.5w</span>
                        <img class="ax" src="./爱心.png" alt="">
                    </div>
                </div>
                </div>
                <div class="ten">
                    <div class="tu10"></div>
                    <div>
                        <p>食堂阿姨可以给我一碗泔水</p>
                    <div>
                        <img src="./我.png" alt="j">
                        <div class="oi">了不起的盖布比尔</div>
                    </div>
                    <div> 
                        <!-- <div class="two">2.9w -->
                            <span class="w1">91.5w</span>
                        <img class="ax" src="./爱心.png" alt="">
                    </div>
                </div>
                </div>
                <div></div>
                <div></div>
            </div>
        </div>
        <div>
        </div>
    <div></div>
</body>
</html>