第二次作业

最新推荐文章于 2024-07-29 13:58:45 发布
最新推荐文章于 2024-07-29 13:58:45 发布
阅读量115 收藏
点赞数 1
文章标签： javascript css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_80653940/article/details/139390303
版权

第一题：
 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一题</title>
    <style>
        div{
            width: 900px;
            height: 50px;
            border: 1px solid #3e395a ;
            background-color: #3e395a;
            border-radius: 30px;
            color: white;
            text-align: center;

        }
        
        li{
            padding: 17px 4px 14px 4px;
            display: inline;
            margin: 10px;
            text-shadow: 5px 5px 5px white;
        }

        li:hover{
            background-color: rgb(138, 50, 50);
        }
    </style>
</head>
<body>
    <div>
        
        <ul>
            <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>
        </ul>
        
    </div>
</body>
</html>

代码运行结果截图： 

第二题：

1.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>仿阿里巴巴页面</title>
    <style>
        .AB{
            width: 1480px;
            height: 55px;
        }
        .A{
            background-color: red;
            color: white;
            font-size: 40px;
            float: left;
        }

        .B{
            width: 1200px;
            height: 30px;
            font-size: 12px;
            color: #666666;
            float: left;
            margin-top: 8px;
        }

        li{
            width: 220px;
            height: 320px;
            border: 1px solid #f2f2f2;
            list-style-type: none;
            display: inline-block;
            margin-right: 10px;
            margin-top: 8px;
        }
        
        li:hover{
            border-color: red;
        }

        ul{
            padding: 0px;
            
        }
        
        img:hover{
            transform: scale(1.01,1.01);
        }
        
        
        a{
            text-decoration: none;
        }

        .icon{
            margin: 0px 5px 0px 0px;
            background-color: red;
            color: white;
            font-size: 12px;
            float: left;
        }

        .content{
            width: 220;
            height: 90px;
            padding: 5px;
        }
        
        .txt1{
            width: 210px;
            height: 16px;
            font-size: 12px;
        }

        .subject{
            width: 136px;
            font-size: 12px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            float: left;
            margin-left: 15px;
        }

        .txt2{
            width: 210px;
            height: 16px;
            font-size: 12px;
        }

        .txt2-left{
            width: 110px;
            height: 13px;
            float: left;
        }

        .left1{
            width: 25px;
            border: 1px solid #5790fb;
            background-color: #cfdcff;
            color: #5790fb;
            float: left ;
            margin-top: 15px;
        }

        .left2{
            width: 66px;
            border: 1px solid #5790fb;
            background-color: #cfdcff;
            color: #5790fb;
            margin-left: 3px;
            float: left;
            margin-top: 15px;
            
        }
        
        .txt2-right{
            width: 70px;
            height: 13px;
            float: right;
            margin-top: 17px;
            color: #666666;
            font-size: 10px;
        }

        .txt3{
            width: 210px;
            height: 30px;
            margin-top: 18px;
        }

        .txt3-left{
            width: 110px;
            height: 30px;
            float: left;
        }
        
        .txt3-right{
            width: 70px;
            height: 30px;
            font-size: 10px;
            float: right;
            color: #666666;
            margin-top: 15px;
        }

        .left3{
            font-size: 17px;
            color: #ff8800;
            float: left;
            margin-top: 10px;
        }
        
        .left4{
            font-size: 20px;
            color: #ff8800;
            float: left;
            font-weight: 600;
            margin-top: 8px;
        }
        
        ul{
            width: 1534px;
        }
    </style>
</head>
    <div class="AB">
        <div class="A">1688</div>
        <div class="B">
            <hr>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;t恤批发&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            玩具批发&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            服饰批发&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            货架批发&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            连衣裙批发&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            袜子批发&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            内裤批发&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            女装批发&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            手机壳批发&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            外套批发&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            羽绒服批发&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            收纳盒批发&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            毛衣批发&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <hr>
        </div>
    </div>

    <div>
        <ul>
            <li>
                <a href="https://detail.1688.com/offer/642269481519.html?spm=a312h.2018_new_sem.dh_002.1.23e24399mkNgov">
                    <img src="https://cbu01.alicdn.com/img/ibank/O1CN01kndsY21fZD2Dgg1aV_!!1942174020-0-cib.jpg" 
                    width="220px" height="220px">
                    <div class="content">
                        <div class="txt1">
                            <span class="icon">1688爆品</span>
                            <div class="subject">定制好评卡售后服务对折卡片 英文售后卡 刮刮卡明信片感谢卡</div>            
                        </div>
                        <div class="txt2">
                            <div class="txt2-left">
                                <div class="left1">定制</div>
                                <div class="left2">7×24H响应</div>
                            </div>
                            <div class="txt2-right">复购率34.34%</div>
                        </div>
                        <div class="txt3">
                            <div class="txt3-left">
                                <div class="left3">￥</div>
                                <div class="left4">0.02</div>
                            </div>
                            <div class="txt3-right">成交31万+元</div>
                        </div>
                    </div>
                </a>
            </li>
            <li>
                <a href="https://detail.1688.com/offer/642269481519.html?spm=a312h.2018_new_sem.dh_002.1.23e24399mkNgov">
                    <img src="https://cbu01.alicdn.com/img/ibank/O1CN01kndsY21fZD2Dgg1aV_!!1942174020-0-cib.jpg" 
                    width="220px" height="220px">
                    <div class="content">
                        <div class="txt1">
                            <span class="icon">1688爆品</span>
                            <div class="subject">定制好评卡售后服务对折卡片 英文售后卡 刮刮卡明信片感谢卡</div>            
                        </div>
                        <div class="txt2">
                            <div class="txt2-left">
                                <div class="left1">定制</div>
                                <div class="left2">7×24H响应</div>
                            </div>
                            <div class="txt2-right">复购率34.34%</div>
                        </div>
                        <div class="txt3">
                            <div class="txt3-left">
                                <div class="left3">￥</div>
                                <div class="left4">0.02</div>
                            </div>
                            <div class="txt3-right">成交31万+元</div>
                        </div>
                    </div>
                </a>
            </li>
            <li>
                <a href="https://detail.1688.com/offer/642269481519.html?spm=a312h.2018_new_sem.dh_002.1.23e24399mkNgov">
                    <img src="https://cbu01.alicdn.com/img/ibank/O1CN01kndsY21fZD2Dgg1aV_!!1942174020-0-cib.jpg" 
                    width="220px" height="220px">
                    <div class="content">
                        <div class="txt1">
                            <span class="icon">1688爆品</span>
                            <div class="subject">定制好评卡售后服务对折卡片 英文售后卡 刮刮卡明信片感谢卡</div>            
                        </div>
                        <div class="txt2">
                            <div class="txt2-left">
                                <div class="left1">定制</div>
                                <div class="left2">7×24H响应</div>
                            </div>
                            <div class="txt2-right">复购率34.34%</div>
                        </div>
                        <div class="txt3">
                            <div class="txt3-left">
                                <div class="left3">￥</div>
                                <div class="left4">0.02</div>
                            </div>
                            <div class="txt3-right">成交31万+元</div>
                        </div>
                    </div>
                </a>
            </li>
            <li>
                <a href="https://detail.1688.com/offer/642269481519.html?spm=a312h.2018_new_sem.dh_002.1.23e24399mkNgov">
                    <img src="https://cbu01.alicdn.com/img/ibank/O1CN01kndsY21fZD2Dgg1aV_!!1942174020-0-cib.jpg" 
                    width="220px" height="220px">
                    <div class="content">
                        <div class="txt1">
                            <span class="icon">1688爆品</span>
                            <div class="subject">定制好评卡售后服务对折卡片 英文售后卡 刮刮卡明信片感谢卡</div>            
                        </div>
                        <div class="txt2">
                            <div class="txt2-left">
                                <div class="left1">定制</div>
                                <div class="left2">7×24H响应</div>
                            </div>
                            <div class="txt2-right">复购率34.34%</div>
                        </div>
                        <div class="txt3">
                            <div class="txt3-left">
                                <div class="left3">￥</div>
                                <div class="left4">0.02</div>
                            </div>
                            <div class="txt3-right">成交31万+元</div>
                        </div>
                    </div>
                </a>
            </li>
            <li>
                <a href="https://detail.1688.com/offer/642269481519.html?spm=a312h.2018_new_sem.dh_002.1.23e24399mkNgov">
                    <img src="https://cbu01.alicdn.com/img/ibank/O1CN01kndsY21fZD2Dgg1aV_!!1942174020-0-cib.jpg" 
                    width="220px" height="220px">
                    <div class="content">
                        <div class="txt1">
                            <span class="icon">1688爆品</span>
                            <div class="subject">定制好评卡售后服务对折卡片 英文售后卡 刮刮卡明信片感谢卡</div>            
                        </div>
                        <div class="txt2">
                            <div class="txt2-left">
                                <div class="left1">定制</div>
                                <div class="left2">7×24H响应</div>
                            </div>
                            <div class="txt2-right">复购率34.34%</div>
                        </div>
                        <div class="txt3">
                            <div class="txt3-left">
                                <div class="left3">￥</div>
                                <div class="left4">0.02</div>
                            </div>
                            <div class="txt3-right">成交31万+元</div>
                        </div>
                    </div>
                </a>
            </li>
            <li>
                <a href="https://detail.1688.com/offer/642269481519.html?spm=a312h.2018_new_sem.dh_002.1.23e24399mkNgov">
                    <img src="https://cbu01.alicdn.com/img/ibank/O1CN01kndsY21fZD2Dgg1aV_!!1942174020-0-cib.jpg" 
                    width="220px" height="220px">
                    <div class="content">
                        <div class="txt1">
                            <span class="icon">1688爆品</span>
                            <div class="subject">定制好评卡售后服务对折卡片 英文售后卡 刮刮卡明信片感谢卡</div>            
                        </div>
                        <div class="txt2">
                            <div class="txt2-left">
                                <div class="left1">定制</div>
                                <div class="left2">7×24H响应</div>
                            </div>
                            <div class="txt2-right">复购率34.34%</div>
                        </div>
                        <div class="txt3">
                            <div class="txt3-left">
                                <div class="left3">￥</div>
                                <div class="left4">0.02</div>
                            </div>
                            <div class="txt3-right">成交31万+元</div>
                        </div>
                    </div>
                </a>
            </li>
            
            <li>
                <a href="https://detail.1688.com/offer/642269481519.html?spm=a312h.2018_new_sem.dh_002.1.23e24399mkNgov">
                    <img src="https://cbu01.alicdn.com/img/ibank/O1CN01kndsY21fZD2Dgg1aV_!!1942174020-0-cib.jpg" 
                    width="220px" height="220px">
                    <div class="content">
                        <div class="txt1">
                            <span class="icon">1688爆品</span>
                            <div class="subject">定制好评卡售后服务对折卡片 英文售后卡 刮刮卡明信片感谢卡</div>            
                        </div>
                        <div class="txt2">
                            <div class="txt2-left">
                                <div class="left1">定制</div>
                                <div class="left2">7×24H响应</div>
                            </div>
                            <div class="txt2-right">复购率34.34%</div>
                        </div>
                        <div class="txt3">
                            <div class="txt3-left">
                                <div class="left3">￥</div>
                                <div class="left4">0.02</div>
                            </div>
                            <div class="txt3-right">成交31万+元</div>
                        </div>
                    </div>
                </a>
            </li>
            <li>
                <a href="https://detail.1688.com/offer/642269481519.html?spm=a312h.2018_new_sem.dh_002.1.23e24399mkNgov">
                    <img src="https://cbu01.alicdn.com/img/ibank/O1CN01kndsY21fZD2Dgg1aV_!!1942174020-0-cib.jpg" 
                    width="220px" height="220px">
                    <div class="content">
                        <div class="txt1">
                            <span class="icon">1688爆品</span>
                            <div class="subject">定制好评卡售后服务对折卡片 英文售后卡 刮刮卡明信片感谢卡</div>            
                        </div>
                        <div class="txt2">
                            <div class="txt2-left">
                                <div class="left1">定制</div>
                                <div class="left2">7×24H响应</div>
                            </div>
                            <div class="txt2-right">复购率34.34%</div>
                        </div>
                        <div class="txt3">
                            <div class="txt3-left">
                                <div class="left3">￥</div>
                                <div class="left4">0.02</div>
                            </div>
                            <div class="txt3-right">成交31万+元</div>
                        </div>
                    </div>
                </a>
            </li>
            <li>
                <a href="https://detail.1688.com/offer/642269481519.html?spm=a312h.2018_new_sem.dh_002.1.23e24399mkNgov">
                    <img src="https://cbu01.alicdn.com/img/ibank/O1CN01kndsY21fZD2Dgg1aV_!!1942174020-0-cib.jpg" 
                    width="220px" height="220px">
                    <div class="content">
                        <div class="txt1">
                            <span class="icon">1688爆品</span>
                            <div class="subject">定制好评卡售后服务对折卡片 英文售后卡 刮刮卡明信片感谢卡</div>            
                        </div>
                        <div class="txt2">
                            <div class="txt2-left">
                                <div class="left1">定制</div>
                                <div class="left2">7×24H响应</div>
                            </div>
                            <div class="txt2-right">复购率34.34%</div>
                        </div>
                        <div class="txt3">
                            <div class="txt3-left">
                                <div class="left3">￥</div>
                                <div class="left4">0.02</div>
                            </div>
                            <div class="txt3-right">成交31万+元</div>
                        </div>
                    </div>
                </a>
            </li>
            <li>
                <a href="https://detail.1688.com/offer/642269481519.html?spm=a312h.2018_new_sem.dh_002.1.23e24399mkNgov">
                    <img src="https://cbu01.alicdn.com/img/ibank/O1CN01kndsY21fZD2Dgg1aV_!!1942174020-0-cib.jpg" 
                    width="220px" height="220px">
                    <div class="content">
                        <div class="txt1">
                            <span class="icon">1688爆品</span>
                            <div class="subject">定制好评卡售后服务对折卡片 英文售后卡 刮刮卡明信片感谢卡</div>            
                        </div>
                        <div class="txt2">
                            <div class="txt2-left">
                                <div class="left1">定制</div>
                                <div class="left2">7×24H响应</div>
                            </div>
                            <div class="txt2-right">复购率34.34%</div>
                        </div>
                        <div class="txt3">
                            <div class="txt3-left">
                                <div class="left3">￥</div>
                                <div class="left4">0.02</div>
                            </div>
                            <div class="txt3-right">成交31万+元</div>
                        </div>
                    </div>
                </a>
            </li>
            <li>
                <a href="https://detail.1688.com/offer/642269481519.html?spm=a312h.2018_new_sem.dh_002.1.23e24399mkNgov">
                    <img src="https://cbu01.alicdn.com/img/ibank/O1CN01kndsY21fZD2Dgg1aV_!!1942174020-0-cib.jpg" 
                    width="220px" height="220px">
                    <div class="content">
                        <div class="txt1">
                            <span class="icon">1688爆品</span>
                            <div class="subject">定制好评卡售后服务对折卡片 英文售后卡 刮刮卡明信片感谢卡</div>            
                        </div>
                        <div class="txt2">
                            <div class="txt2-left">
                                <div class="left1">定制</div>
                                <div class="left2">7×24H响应</div>
                            </div>
                            <div class="txt2-right">复购率34.34%</div>
                        </div>
                        <div class="txt3">
                            <div class="txt3-left">
                                <div class="left3">￥</div>
                                <div class="left4">0.02</div>
                            </div>
                            <div class="txt3-right">成交31万+元</div>
                        </div>
                    </div>
                </a>
            </li>
            <li>
                <a href="https://detail.1688.com/offer/642269481519.html?spm=a312h.2018_new_sem.dh_002.1.23e24399mkNgov">
                    <img src="https://cbu01.alicdn.com/img/ibank/O1CN01kndsY21fZD2Dgg1aV_!!1942174020-0-cib.jpg" 
                    width="220px" height="220px">
                    <div class="content">
                        <div class="txt1">
                            <span class="icon">1688爆品</span>
                            <div class="subject">定制好评卡售后服务对折卡片 英文售后卡 刮刮卡明信片感谢卡</div>            
                        </div>
                        <div class="txt2">
                            <div class="txt2-left">
                                <div class="left1">定制</div>
                                <div class="left2">7×24H响应</div>
                            </div>
                            <div class="txt2-right">复购率34.34%</div>
                        </div>
                        <div class="txt3">
                            <div class="txt3-left">
                                <div class="left3">￥</div>
                                <div class="left4">0.02</div>
                            </div>
                            <div class="txt3-right">成交31万+元</div>
                        </div>
                    </div>
                </a>
            </li>
            
            <li>
                <a href="https://detail.1688.com/offer/642269481519.html?spm=a312h.2018_new_sem.dh_002.1.23e24399mkNgov">
                    <img src="https://cbu01.alicdn.com/img/ibank/O1CN01kndsY21fZD2Dgg1aV_!!1942174020-0-cib.jpg" 
                    width="220px" height="220px">
                    <div class="content">
                        <div class="txt1">
                            <span class="icon">1688爆品</span>
                            <div class="subject">定制好评卡售后服务对折卡片 英文售后卡 刮刮卡明信片感谢卡</div>            
                        </div>
                        <div class="txt2">
                            <div class="txt2-left">
                                <div class="left1">定制</div>
                                <div class="left2">7×24H响应</div>
                            </div>
                            <div class="txt2-right">复购率34.34%</div>
                        </div>
                        <div class="txt3">
                            <div class="txt3-left">
                                <div class="left3">￥</div>
                                <div class="left4">0.02</div>
                            </div>
                            <div class="txt3-right">成交31万+元</div>
                        </div>
                    </div>
                </a>
            </li>
            <li>
                <a href="https://detail.1688.com/offer/642269481519.html?spm=a312h.2018_new_sem.dh_002.1.23e24399mkNgov">
                    <img src="https://cbu01.alicdn.com/img/ibank/O1CN01kndsY21fZD2Dgg1aV_!!1942174020-0-cib.jpg" 
                    width="220px" height="220px">
                    <div class="content">
                        <div class="txt1">
                            <span class="icon">1688爆品</span>
                            <div class="subject">定制好评卡售后服务对折卡片 英文售后卡 刮刮卡明信片感谢卡</div>            
                        </div>
                        <div class="txt2">
                            <div class="txt2-left">
                                <div class="left1">定制</div>
                                <div class="left2">7×24H响应</div>
                            </div>
                            <div class="txt2-right">复购率34.34%</div>
                        </div>
                        <div class="txt3">
                            <div class="txt3-left">
                                <div class="left3">￥</div>
                                <div class="left4">0.02</div>
                            </div>
                            <div class="txt3-right">成交31万+元</div>
                        </div>
                    </div>
                </a>
            </li>
            <li>
                <a href="https://detail.1688.com/offer/642269481519.html?spm=a312h.2018_new_sem.dh_002.1.23e24399mkNgov">
                    <img src="https://cbu01.alicdn.com/img/ibank/O1CN01kndsY21fZD2Dgg1aV_!!1942174020-0-cib.jpg" 
                    width="220px" height="220px">
                    <div class="content">
                        <div class="txt1">
                            <span class="icon">1688爆品</span>
                            <div class="subject">定制好评卡售后服务对折卡片 英文售后卡 刮刮卡明信片感谢卡</div>            
                        </div>
                        <div class="txt2">
                            <div class="txt2-left">
                                <div class="left1">定制</div>
                                <div class="left2">7×24H响应</div>
                            </div>
                            <div class="txt2-right">复购率34.34%</div>
                        </div>
                        <div class="txt3">
                            <div class="txt3-left">
                                <div class="left3">￥</div>
                                <div class="left4">0.02</div>
                            </div>
                            <div class="txt3-right">成交31万+元</div>
                        </div>
                    </div>
                </a>
            </li>
            <li>
                <a href="https://detail.1688.com/offer/642269481519.html?spm=a312h.2018_new_sem.dh_002.1.23e24399mkNgov">
                    <img src="https://cbu01.alicdn.com/img/ibank/O1CN01kndsY21fZD2Dgg1aV_!!1942174020-0-cib.jpg" 
                    width="220px" height="220px">
                    <div class="content">
                        <div class="txt1">
                            <span class="icon">1688爆品</span>
                            <div class="subject">定制好评卡售后服务对折卡片 英文售后卡 刮刮卡明信片感谢卡</div>            
                        </div>
                        <div class="txt2">
                            <div class="txt2-left">
                                <div class="left1">定制</div>
                                <div class="left2">7×24H响应</div>
                            </div>
                            <div class="txt2-right">复购率34.34%</div>
                        </div>
                        <div class="txt3">
                            <div class="txt3-left">
                                <div class="left3">￥</div>
                                <div class="left4">0.02</div>
                            </div>
                            <div class="txt3-right">成交31万+元</div>
                        </div>
                    </div>
                </a>
            </li>
            <li>
                <a href="https://detail.1688.com/offer/642269481519.html?spm=a312h.2018_new_sem.dh_002.1.23e24399mkNgov">
                    <img src="https://cbu01.alicdn.com/img/ibank/O1CN01kndsY21fZD2Dgg1aV_!!1942174020-0-cib.jpg" 
                    width="220px" height="220px">
                    <div class="content">
                        <div class="txt1">
                            <span class="icon">1688爆品</span>
                            <div class="subject">定制好评卡售后服务对折卡片 英文售后卡 刮刮卡明信片感谢卡</div>            
                        </div>
                        <div class="txt2">
                            <div class="txt2-left">
                                <div class="left1">定制</div>
                                <div class="left2">7×24H响应</div>
                            </div>
                            <div class="txt2-right">复购率34.34%</div>
                        </div>
                        <div class="txt3">
                            <div class="txt3-left">
                                <div class="left3">￥</div>
                                <div class="left4">0.02</div>
                            </div>
                            <div class="txt3-right">成交31万+元</div>
                        </div>
                    </div>
                </a>
            </li>
            <li>
                <a href="https://detail.1688.com/offer/642269481519.html?spm=a312h.2018_new_sem.dh_002.1.23e24399mkNgov">
                    <img src="https://cbu01.alicdn.com/img/ibank/O1CN01kndsY21fZD2Dgg1aV_!!1942174020-0-cib.jpg" 
                    width="220px" height="220px">
                    <div class="content">
                        <div class="txt1">
                            <span class="icon">1688爆品</span>
                            <div class="subject">定制好评卡售后服务对折卡片 英文售后卡 刮刮卡明信片感谢卡</div>            
                        </div>
                        <div class="txt2">
                            <div class="txt2-left">
                                <div class="left1">定制</div>
                                <div class="left2">7×24H响应</div>
                            </div>
                            <div class="txt2-right">复购率34.34%</div>
                        </div>
                        <div class="txt3">
                            <div class="txt3-left">
                                <div class="left3">￥</div>
                                <div class="left4">0.02</div>
                            </div>
                            <div class="txt3-right">成交31万+元</div>
                        </div>
                    </div>
                </a>
            </li>
            

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

 运行代码结果截图：

2.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>教务系统登录</title>
    <style>
        .top{
            margin: 10px;
            width: 800px;
        }

        .bottom{
            width: 2000px;
        }

        .A{
            width: 963px;
            float: left;
        }
        .B{
            width: 500px;
            height: 445px;
            /* background-color: red; */
            float: left;
        }

        .B-top{
            width: 500px;
            font-size: 50px;
        }

        .B-body{
            width: 500px;
            margin-top: 85px;
            font-size: 38px;
        }

        .text,.password{
            width: 320px;
            height: 45px;
            font-size: 30px;
            background-color: rgb(228, 229, 230);
        }


        .C{
            font-size: 30px;
            width: 300px;
            height: 50px;
            margin-left: 200px;
            margin-top: 50px;
            border-radius: 10px;
            background-color: aqua;
            border: 2px solid red;

        }
    </style>
</head>
<body>
    <div class="top">
        <img src="./1.png">
    </div>
    <div class="bottom">
        <div class="A"><img src="./2.png"></div>
        <div class="B">
            <div class="B-top">用户登录</div>
            <div class="B-body">
                <table  width="500px" height="80px" cellspacing="0px" >
                    <form action="http://zswxyjw.minghuaetc.com/znlykjdxswxy/" method="get">
                    <tr>
                        <td width="170px"><strong>用户名:</strong></td>
                        <td><input type="text" class="text"></td>
                    </tr>
                    <tr>
                        <td><strong>密码:</strong></td>
                        <td><input type="password" class="password" required></td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            
                                <button type="submit" class="C">登录</button>
                            
                        </td>
                    </tr>
                    </form>
                </table>
            </div>
        </div>
    </div>
    
</body>
</html>

运行代码结果截图： 

 

3.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>仿京东界面</title>
    <style>
        .title{
            width: 1280px;
            height: 100px;
        }

        .title-left{
            width: 205px;
            height: 67px;
            float: left;
            margin-top: 3px;
            margin-left: 425PX;
        }

        .title-right{
            width: 200px;
            height: 50px;
            margin: 0px;
            float: left;
        }
        .top{
            width: 1220px;
            height: 55px;
            border: 4px solid red;
        }

        .one,.two,.three,.four,.five{
            width:200px;
            height: 49px;
            border-right: 3px solid rgb(124, 124, 124);
            float: left;
            margin-top: 3px;
        }
        .six{
            width:200px;
            height: 49px;
            float: left;
            margin-top: 3px;
        }

        .one-A{
            width: 80px;
            height: 22px;
            background-color: rgb(248, 65, 65);
            color: white;
            border-radius: 50px;
            text-align: center;
            margin: auto;
            font-size: 18px;
            font-weight: 700;
        }
        .one-B{
            width: 80px;
            height: 22px;
            color: red;
            margin: auto;
            text-align: center;
            font-size: 14px;
        }

        .two-A,.three-A,.four-A,.five-A,.six-A{
            width: 80px;
            height: 22px;
            color: rgb(0, 0, 0);
            text-align: center;
            margin: auto;
            font-size: 18px;
            font-weight: 700;
        }

        .two-B,.three-B,.four-B,.five-B,.six-B{
            width: 80px;
            height: 22px;
            color: rgb(123, 123, 123);
            text-align: center;
            margin: auto;
            font-size: 14px;
        }
        .a0{
            color: white;
            text-decoration: none;
        }


        .a1{
            color: red;
            text-decoration: none;
        }
        .a2:hover,.a3:hover{
            color: red;
        }
        
        .a2{
            color: rgb(0, 0, 0);
            text-decoration: none;
        }
        .a3{
            color: rgb(123, 123, 123);
            text-decoration: none;
        }

        ul{
            width: 1250px;
            padding: 0px;
        }
        li{
            width: 230px;
            height: 322px;
            list-style: none;
            border: 1px solid red;
            display: inline-block;
            margin-left:12px;
        }

        a{
            text-decoration: none;

        }

        .ziying{
            width: 36px;
            height: 16px;
            font-size: 12px;
            background-color: red;
            color: white;
            text-align: center;
            float: left;
        }

        .txt{
            overflow: hidden;
            -webkit-line-clamp: 2;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            float: left;
            font-size: 15px;
        }

        .price1{
            color: red;
            font-size: 14px;
            float: left;
            margin-top: 5px;
            font-weight: 550;
        }
        .price2{
            color: red;
            font-size: 20px;
            float: left;
            font-weight: 800;
        }
        span{
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div class="title">
        <div class="title-left"><img src="./3.png"></div>
        <div class="title-right"><h1>为你推荐</h1></div>
    </div>
    <div class="top">
        <div class="one">
            <div class="one-A">
                <a href="https://www.jd.com/?source=enterprise&cu=true&utm_source=n
                tp.msn.cn&utm_medium=jingfen&utm_campaign=t_203076774
                7_&utm_term=940aa24799c0432eb4aca6a4a49f8276" class="a0">精选</a>
            </div>
            <div class="one-B">
                <a href="https://www.jd.com/?source=enterprise&cu=true&utm_source=n
                tp.msn.cn&utm_medium=jingfen&utm_campaign=t_203076774
                7_&utm_term=940aa24799c0432eb4aca6a4a49f8276" class="a1">猜你喜欢</a>
            </div>
        </div>
        <div class="two">
            <div class="two-A">
                <a href="https://www.jd.com/?source=enterprise&cu=true&utm_source=n
                tp.msn.cn&utm_medium=jingfen&utm_campaign=t_203076774
                7_&utm_term=940aa24799c0432eb4aca6a4a49f8276" class="a2">智能先锋</a>
            </div>
            <div class="two-B">
                <a href="https://www.jd.com/?source=enterprise&cu=true&utm_source=n
                tp.msn.cn&utm_medium=jingfen&utm_campaign=t_203076774
                7_&utm_term=940aa24799c0432eb4aca6a4a49f8276" class="a3">大电器城</a>
            </div>
        </div>
        <div class="three">
            <div class="three-A"><a href="https://www.jd.com/?source=enterprise&cu=tr
                ue&utm_source=ntp.msn.cn&utm_medium=jingfen&utm_campaign=t_2030767747
                _&utm_term=940aa24799c0432eb4aca6a4a49f8276" class="a2">居家优品</a>
            </div>
            <div class="three-B"><a href="https://www.jd.com/?source=enterprise&cu=t
                rue&utm_source=ntp.msn.cn&utm_medium=jingfen&utm_campaign=t_20307677
                47_&utm_term=940aa24799c0432eb4aca6a4a49f8276" class="a3">品质生活</a>
            </div>
        </div>
        <div class="four">
            <div class="four-A"><a href="https://www.jd.com/?source=enterprise&cu=tr
                ue&utm_source=ntp.msn.cn&utm_medium=jingfen&utm_campaign=t_203076774
                7_&utm_term=940aa24799c0432eb4aca6a4a49f8276" class="a2">超市百货</a>
            </div>
            <div class="four-B"><a href="https://www.jd.com/?source=enterprise&cu=tr
                ue&utm_source=ntp.msn.cn&utm_medium=jingfen&utm_campaign=t_203076774
                7_&utm_term=940aa24799c0432eb4aca6a4a49f8276" class="a3">百货生鲜</a>
            </div>
        </div>
        <div class="five">
            <div class="five-A"><a href="https://www.jd.com/?source=enterprise&cu=tr
                ue&utm_source=ntp.msn.cn&utm_medium=jingfen&utm_campaign=t_203076774
                7_&utm_term=940aa24799c0432eb4aca6a4a49f8276" class="a2">时尚达人</a>
            </div>
            <div class="five-B"><a href="https://www.jd.com/?source=enterprise&cu=tr
                ue&utm_source=ntp.msn.cn&utm_medium=jingfen&utm_campaign=t_203076774
                7_&utm_term=940aa24799c0432eb4aca6a4a49f8276" class="a3">美妆穿搭</a>
            </div>
        </div>
        <div class="six">
            <div class="six-A"><a href="https://www.jd.com/?source=enterprise&cu=tr
                ue&utm_source=ntp.msn.cn&utm_medium=jingfen&utm_campaign=t_203076774
                7_&utm_term=940aa24799c0432eb4aca6a4a49f8276" class="a2">进口好物</a>
            </div>
            <div class="six-B"><a href="https://www.jd.com/?source=enterprise&cu=tr
                ue&utm_source=ntp.msn.cn&utm_medium=jingfen&utm_campaign=t_203076774
                7_&utm_term=940aa24799c0432eb4aca6a4a49f8276" class="a3">京东国际</a>
            </div>
        </div>
    </div>
    <div class="body">
        <ul>
            <li>
                <a href="https://item.jd.com/100038785641.html">
                    <div>
                        <img src="./4.png" width="230px" height="230px">
                    </div>
                    <div>
                        <div class="ziying">自营</div>
                        <div class="txt">美的（Midea）61厘米薄407升一级智能双变频十字对开双开门四开门家用电冰箱大容量BCD-407WSPZM(E)超薄可嵌入</div>
                    </div>
                    <div>
                        <div class="price1">￥</div>
                        <div class="price2">3399.
                            <span>00</span>
                        </div>
                    </div>
                </a>
            </li>
            <li>
                <a href="https://item.jd.com/100038785641.html">
                    <div>
                        <img src="./4.png" width="230px" height="230px">
                    </div>
                    <div>
                        <div class="ziying">自营</div>
                        <div class="txt">美的（Midea）61厘米薄407升一级智能双变频十字对开双开门四开门家用电冰箱大容量BCD-407WSPZM(E)超薄可嵌入</div>
                    </div>
                    <div>
                        <div class="price1">￥</div>
                        <div class="price2">3399.
                            <span>00</span>
                        </div>
                    </div>
                </a>
            </li>
            <li>
                <a href="https://item.jd.com/100038785641.html">
                    <div>
                        <img src="./4.png" width="230px" height="230px">
                    </div>
                    <div>
                        <div class="ziying">自营</div>
                        <div class="txt">美的（Midea）61厘米薄407升一级智能双变频十字对开双开门四开门家用电冰箱大容量BCD-407WSPZM(E)超薄可嵌入</div>
                    </div>
                    <div>
                        <div class="price1">￥</div>
                        <div class="price2">3399.
                            <span>00</span>
                        </div>
                    </div>
                </a>
            </li>
            <li>
                <a href="https://item.jd.com/100038785641.html">
                    <div>
                        <img src="./4.png" width="230px" height="230px">
                    </div>
                    <div>
                        <div class="ziying">自营</div>
                        <div class="txt">美的（Midea）61厘米薄407升一级智能双变频十字对开双开门四开门家用电冰箱大容量BCD-407WSPZM(E)超薄可嵌入</div>
                    </div>
                    <div>
                        <div class="price1">￥</div>
                        <div class="price2">3399.
                            <span>00</span>
                        </div>
                    </div>
                </a>
            </li>
            <li>
                <a href="https://item.jd.com/100038785641.html">
                    <div>
                        <img src="./4.png" width="230px" height="230px">
                    </div>
                    <div>
                        <div class="ziying">自营</div>
                        <div class="txt">美的（Midea）61厘米薄407升一级智能双变频十字对开双开门四开门家用电冰箱大容量BCD-407WSPZM(E)超薄可嵌入</div>
                    </div>
                    <div>
                        <div class="price1">￥</div>
                        <div class="price2">3399.
                            <span>00</span>
                        </div>
                    </div>
                </a>
            </li>
            <li>
                <a href="https://item.jd.com/100038785641.html">
                    <div>
                        <img src="./4.png" width="230px" height="230px">
                    </div>
                    <div>
                        <div class="ziying">自营</div>
                        <div class="txt">美的（Midea）61厘米薄407升一级智能双变频十字对开双开门四开门家用电冰箱大容量BCD-407WSPZM(E)超薄可嵌入</div>
                    </div>
                    <div>
                        <div class="price1">￥</div>
                        <div class="price2">3399.
                            <span>00</span>
                        </div>
                    </div>
                </a>
            </li>
            <li>
                <a href="https://item.jd.com/100038785641.html">
                    <div>
                        <img src="./4.png" width="230px" height="230px">
                    </div>
                    <div>
                        <div class="ziying">自营</div>
                        <div class="txt">美的（Midea）61厘米薄407升一级智能双变频十字对开双开门四开门家用电冰箱大容量BCD-407WSPZM(E)超薄可嵌入</div>
                    </div>
                    <div>
                        <div class="price1">￥</div>
                        <div class="price2">3399.
                            <span>00</span>
                        </div>
                    </div>
                </a>
            </li>
            <li>
                <a href="https://item.jd.com/100038785641.html">
                    <div>
                        <img src="./4.png" width="230px" height="230px">
                    </div>
                    <div>
                        <div class="ziying">自营</div>
                        <div class="txt">美的（Midea）61厘米薄407升一级智能双变频十字对开双开门四开门家用电冰箱大容量BCD-407WSPZM(E)超薄可嵌入</div>
                    </div>
                    <div>
                        <div class="price1">￥</div>
                        <div class="price2">3399.
                            <span>00</span>
                        </div>
                    </div>
                </a>
            </li>
            <li>
                <a href="https://item.jd.com/100038785641.html">
                    <div>
                        <img src="./4.png" width="230px" height="230px">
                    </div>
                    <div>
                        <div class="ziying">自营</div>
                        <div class="txt">美的（Midea）61厘米薄407升一级智能双变频十字对开双开门四开门家用电冰箱大容量BCD-407WSPZM(E)超薄可嵌入</div>
                    </div>
                    <div>
                        <div class="price1">￥</div>
                        <div class="price2">3399.
                            <span>00</span>
                        </div>
                    </div>
                </a>
            </li>
            <li>
                <a href="https://item.jd.com/100038785641.html">
                    <div>
                        <img src="./4.png" width="230px" height="230px">
                    </div>
                    <div>
                        <div class="ziying">自营</div>
                        <div class="txt">美的（Midea）61厘米薄407升一级智能双变频十字对开双开门四开门家用电冰箱大容量BCD-407WSPZM(E)超薄可嵌入</div>
                    </div>
                    <div>
                        <div class="price1">￥</div>
                        <div class="price2">3399.
                            <span>00</span>
                        </div>
                    </div>
                </a>
            </li>
            <li>
                <a href="https://item.jd.com/100038785641.html">
                    <div>
                        <img src="./4.png" width="230px" height="230px">
                    </div>
                    <div>
                        <div class="ziying">自营</div>
                        <div class="txt">美的（Midea）61厘米薄407升一级智能双变频十字对开双开门四开门家用电冰箱大容量BCD-407WSPZM(E)超薄可嵌入</div>
                    </div>
                    <div>
                        <div class="price1">￥</div>
                        <div class="price2">3399.
                            <span>00</span>
                        </div>
                    </div>
                </a>
            </li>
            <li>
                <a href="https://item.jd.com/100038785641.html">
                    <div>
                        <img src="./4.png" width="230px" height="230px">
                    </div>
                    <div>
                        <div class="ziying">自营</div>
                        <div class="txt">美的（Midea）61厘米薄407升一级智能双变频十字对开双开门四开门家用电冰箱大容量BCD-407WSPZM(E)超薄可嵌入</div>
                    </div>
                    <div>
                        <div class="price1">￥</div>
                        <div class="price2">3399.
                            <span>00</span>
                        </div>
                    </div>
                </a>
            </li>
            <li>
                <a href="https://item.jd.com/100038785641.html">
                    <div>
                        <img src="./4.png" width="230px" height="230px">
                    </div>
                    <div>
                        <div class="ziying">自营</div>
                        <div class="txt">美的（Midea）61厘米薄407升一级智能双变频十字对开双开门四开门家用电冰箱大容量BCD-407WSPZM(E)超薄可嵌入</div>
                    </div>
                    <div>
                        <div class="price1">￥</div>
                        <div class="price2">3399.
                            <span>00</span>
                        </div>
                    </div>
                </a>
            </li>
            <li>
                <a href="https://item.jd.com/100038785641.html">
                    <div>
                        <img src="./4.png" width="230px" height="230px">
                    </div>
                    <div>
                        <div class="ziying">自营</div>
                        <div class="txt">美的（Midea）61厘米薄407升一级智能双变频十字对开双开门四开门家用电冰箱大容量BCD-407WSPZM(E)超薄可嵌入</div>
                    </div>
                    <div>
                        <div class="price1">￥</div>
                        <div class="price2">3399.
                            <span>00</span>
                        </div>
                    </div>
                </a>
            </li>
            <li>
                <a href="https://item.jd.com/100038785641.html">
                    <div>
                        <img src="./4.png" width="230px" height="230px">
                    </div>
                    <div>
                        <div class="ziying">自营</div>
                        <div class="txt">美的（Midea）61厘米薄407升一级智能双变频十字对开双开门四开门家用电冰箱大容量BCD-407WSPZM(E)超薄可嵌入</div>
                    </div>
                    <div>
                        <div class="price1">￥</div>
                        <div class="price2">3399.
                            <span>00</span>
                        </div>
                    </div>
                </a>
            </li>
        </ul>
    </div>
</body>
</html>

 运行代码结果截图：

喂喂巍
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
第二次上机作业 大连理工大学
Mrrunsen的博客
11-21 3420
7.20 顾客到银行办理业务时往往需要等待一段时间,而等待时间的长短与多种因素有关,比如,银行业务员办理业务的速度,顾客等待排队的方式等。为比较哪种排队方式使顾客等待的时间更短,银行各随机抽取10名顾客,他们在办理业务时所等待的时间(单位:分钟)如下。7.25 从两个总体中各抽取一个n1＝n2＝250的独立随机样本，来自总体1的样本比例为p1＝40%，来自总体2的样本比例为p2＝30%。π1－π2的90%的置信区间为。求该校大学生平均上网时间的置信区间,置信水平分别为90%,95%和99%。
linux 第二次作业
m0_54177787的博客
12-03 1072
熟悉根目录
数据库第二次作业
weixin_51290359的博客
04-13 2347
数据库第二次作业第二次作业1. SQL命令查询选修2号课的学生学号，成绩，并按照成绩降序输出；2. SQL命令查询各系院名称及学生人数；3. SQL命令查询选修2号课程的学生学号，姓名及成绩；4. SQL命令查询学生李勇选修的课程名称及成绩；5. SQL命令查询每个学生学号及选修课程的总学分数。6. SQL命令查询每个学生姓名及选修课程号及成绩（没选课的学生姓名也要输出） 第二次作业 1. SQL命令查询选修2号课的学生学号，成绩，并按照成绩降序输出； select sno,grade fro
国科大大数据系统与大规模数据分析课程第二次作业(Graph Coloring)
程哥哥的一亩三分地
04-18 5914
​ WordCount的变体，主要考察对Hadoop MapReduce框架编程的熟练度，几乎无坑点。​。
Java第二次作业
GamesDuan的专栏
03-10 1495
Java第二次作业 【程序11】 题目：有1、2、3、4四个数字，能组成多少个互不相同且无重复数字的三位数？都是多少？ 【程序12】 题目：企业发放的奖金根据利润提成。利润(I)低于或等于10万元时，奖金可提10%；利润高于10万元，低于20万元时，低于10万元的部分按10%提成，高于10万元的部分，可可提成7.5%；20万到40万之间时，高于20万元的部分，可提成5%；40万到60万之间时高于4
第二次作业.zip
11-24
第二次作业.zip
数值分析第二次作业解答.doc
11-28
数值分析第二次作业解答 本资源为数值分析第二次作业解答，涵盖了数值分析的多个方面，包括线性方程组、矩阵的性质、 Gauss 消元法、Cholesky 分解、矩阵的特征值、谱半径等。 一、线性方程组 1. 仅当系数矩阵是...
计算机网络第二次作业.pdf
11-17
计算机网络第二次作业.pdf
江苏开放大学计算机应用基础形考第二次作业答案.pdf
07-14
江苏开放大学计算机应用基础形考第二次作业答案.pdf 这是江苏开放大学计算机应用基础课程的第二次作业答案，旨在指导学生学习 Excel 制作行业状况调查表的实践目标。该作业分为两个部分：企业总体状况和企业人才...
苏仕华数据库第二次作业答案.doc
11-17
苏仕华数据库第二次作业答案 本资源总结了苏仕华数据库第二次作业答案，涵盖了关系代数、ALPHA语言、QBE语言等多方面的知识点。 一、关系模式 在本资源中，我们定义了四个关系模式：S、P、J、SPJ。其中，S关系...
JavaScript青少年简明教程：函数及其相关知识（下）
cnds123的专栏
07-26 634
JavaScript青少年简明教程：函数及其相关知识（下）
【React 】开发环境搭建详细指南
lph159的博客
07-24 1288
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
已解决：vue-office/excel 多个sheet点击切换，滚动条高度不重置，表格视图位置不正确
weixin_42289080的博客
07-26 250
解决 @vue-office/excel 多个sheet切换，内容以及滚动条展示不正确的问题
我们的前端开发逆天了！1 小时搞定了新网站，还跟我说 “不要钱”
努力做最接地气的编程干货分享，感谢关注
07-29 651
本文将带你了解一个新的 Web 框架 **Astro**，并手把手带你使用 Astro 搭建一个属于自己的站点，用过的都说真香！
vue el-select的下拉树形结构 带检索功能
Jokerxiuka的博客
07-26 206
【代码】vue el-select的下拉树形结构。
新手vue学习问题汇总（自用）（长期更新）
lapiii的博客
07-28 330
是 ES6 模块语法，用于导出模块的默认成员。在 Vue.js 中，通常用来导出一个组件对象，使其可以在其他文件中被导入并使用。
easyui 点击单元格的时候，获取该行另外一个字段的值
极客栈
07-29 305
通过绑定 DataGrid 的 ​​ 事件，可以轻松地在单击单元格时获取该行的其他字段值。这个方法适用于各种场景，比如在用户点击某个单元格时显示额外的信息、执行特定的操作等。希望这个示例能帮助你更好地理解和应用 EasyUI DataGrid 的事件处理。
angular入门基础教程(四）动态属性与事件
最新发布
峰会路转的博客
07-29 62
状态的变化导致属性值的变化，这个时候我们就需要用到动态属性，ng中的动态属性用[]包裹即可。
easyadmin layui js监听返回结果，进行token验证防止连点
weixin_43652106的博客
07-29 145
easyadmin layui js监听返回结果，进行token验证防止连点
计算机第二次作业答案库：学习神器
在完成计算机第二次作业时，你需要深入理解这些关键词，结合实际应用案例，阐述它们的相互关系和重要性。通过这次作业，你不仅可以巩固所学的计算机理论，还能提高分析问题和解决问题的能力。此外，这也将帮助你更好...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值