拯救期末作业！e乐购完整代码

于 2023-06-13 14:02:16 发布
阅读量832 收藏 3
点赞数 3
文章标签： html 算法 安全
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_74816715/article/details/131186774
版权

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            * {
                margin: 0px;
                padding: 0px;
                border: 0px;
            }

            #k1top {
                background-color: azure;
                height: 43px;
                width: 1500px;
                margin: 0px auto;
                border-bottom: 1px solid black;
            }

            #k1tleft span,
            #k1tright span {
                /* display: block; */
                float: left;
                height: 43px;
                line-height: 43px;
            }

            #k1tright {
                margin-left: 963px;
            }

            #k1top span a {
                text-decoration: none;
            }

            #icon1 {
                height: 25px;
                width: 30px;
                background-position: 5px -23px;
                background-image: url(img/icon_list.png);
                /* overflow: hidden; */
            }

            #k1top span a:hover {
                background-color:greenyellow;
                color: aqua;
            }

            #k1down {
                width: 1500px;
                height: 140px;
                margin: 0px auto;
                background-color: cornsilk;
            }

            #k1down ul li {
                float: left;
                display: block;
            }

            #logo {
                width: 72px;
                height: 68px;
                margin-left: 15px;
                margin-top: 30px;
            }

            #top_center {
                width: 506px;
                height: 39px;
                margin: 56px 0px 0px 12px;
            }

            #txt {
                height: 40px;
                width: 500px;
                margin: 42px 0px 0px 13px;
                border: 4px solid darkred;
                padding-left: 20px;
            }

            #but {
                height: 48px;
                width: 120px;
                margin-top: 42px;
                background-color: darkred;
                color: white;
            }

            .wwd {
                height: 48px;
                width: 180px;
                margin-top: 42px;
                margin-left: 30px;
                background-color: ghostwhite;
            }

            /* #k1down ul li div{
                float:left;
                margin-top:15px;
                
            } */
            #icon2,
            #bb,
            #icon3 {
                float: left;
                margin-top: 15px;
            }

            #icon2 {
                height: 15px;
                width: 22px;
                background-position: -182px -735px;
                background-image: url(img/icon_list.png);
                margin: 15px 10px 0px 15px;
            }

            #icon3 {
                height: 15px;
                width: 15px;
                background-position: -265px -730px;
                background-image: url(img/icon_list.png);
                margin: 15px 0px 0px 10px;
            }

            #icon4 {
                height: 20px;
                width: 23px;
                background-position: -228px -731px;
                background-image: url(img/icon_list.png);
                position: absolute;
                margin-left: 1405px;
                margin-top: 30px;
                color: white;
                font-size: 1px;
                padding-left: 3px;
                padding-top: 3px;
            }

            #nn {
                font-size: 15px;
                margin-left: 540px;
            }

            .topmenu {
                display: block;
                width: 220px;
                border: 2px solid #e4393c;
                margin: 0;
                padding: 0;
            
            }

            .toptitle {
                height: 40px;
                line-height: 40px;
                text-align: left;
                font-size: 11pt;
                font-weight: bold;
                color: white;
                background-color: red;
                padding-left: 20px;    
                text-decoration: none;
            }

             .center-right-arrow{
                 font-family: "icomoon";
                 font-size: 15px;
                 float: right;
                 margin: 0 15px 0 0;
             }


            .topmenu li {
                height: 30px;
                line-height: 30px;
                font-size: 11pt;
                list-style-type: none;
                text-align: left;
                padding-left: 0px;
                z-index: 3;
                background-image: url(1.png);
                background-repeat: no-repeat;
                background-position: right;
                text-decoration: none;
                
            }

            .topmenu li a {
                text-decoration: none;
                color: #313131;
                height: 100px;
                background-color: red;
                border: 10px solid red;
                text-align: left;
                line-height: 40px;
                font-size: 16px;                
                text-decoration: none;
            }

            .topmenu li a:hover {
                text-decoration: underline;
                font-weight: bold;
                color: #e4686a;
            }

            .topmenu li:hover {
                border: 1px solid #DDD;
                border-right: 0;
                box-shadow: 0 0 8px #DDD;
                -moz-box-shadow: 0 0 8px #DDD;
                -webkit-box-shadow: 0 0 8px #DDD;
                background-image: none;
            }

            .submenu {
                display: none;
                width: 715px;
                left: 220px;
                position: absolute;
                top: 40px;
                border: 1px solid #DDD;
                z-index: 4;
                background: lightblue;
                box-shadow: 0 0 8px #DDD;
                -moz-box-shadow: 0 0 8px #DDD;
                -webkit-box-shadow: 0 0 8px #DDD;
            }

            #erji {
                width: 1500px;
                margin: 0px auto;
            }

            .head09 {
                position: absolute;
                text-align: center;
                margin-left: 250px;
                margin-top: -423px;
                text-decoration: none;
                
            }
            


            #vf {
                width: 1500px;
                height: 400px;
                background-color: aqua;
                background-image: url(img/web-101-101-4.jpg);
                margin: 0px auto;
                margin-top: -395px;
                background-size: 100% 100%;
                margin-right: 300px;
            }

            #hezi {
                width: 150px;
                height: 70px;
                border: 2px solid darkred;
                background-color: darkred;
                text-align: center;

            }

            #tupian {
                width: 1500px;
                margin-top: 10px;
                float: left;
            }
            #tejia{
                float: left;
            }
            #tejia2{
                float: left;
            }

            .daobiao {
                width: 100px;
                height: 40px;
                line-height: 40px;
                text-align: left;
                font-size: 11pt;
                font-weight: bold;
                color: white;
                background: #e4393c;
                padding-left: 20px;
                background-color: red;
            }
            .daobioa2{
                width: 100px;
                height: 38px;
                border: 2px solid darkred;
                margin-left: 120px;
                margin-top: -40px;
                text-align: center;
            }
            #z1{
                margin-left: 20px;
                font-size: 15px;
                
            }
            #z2{
                margin-left: 110px;
                font-size: 15px;
                
            }
            #z3{
                margin-left: 60px;
                font-size: 15px;
                color: lightsteelblue;
            }
            #z4{
                margin-left: 230px;
                font-size: 15px;
                color: lightsteelblue;
            }
            #z5{
                margin-left: 21px;
                color: red;
            }
            #z6{
                margin-left: 250px;
                color: red;
            }
            .dax1{
                text-align:center;
                }
                #wf{
                    width: 1500px;
                    height: 80px;
                    background-color: aqua;
                    background-image: url(img/h2_bg.jpg);
                    margin: 0px auto;
                    margin-top: -50px;
                    background-size: 100% 100%;
                    margin-right: 10px;
                    
                }
                .box {
                  width: 100px;
                  
                  white-space: nowrap;
                  text-overflow: ellipsis;
                  overflow: hidden;
                  white-space: pre-wrap;
                }
                #fcontent{
                    width: 1200px;
                    height: 100px;
                    margin: 0px auto;
                }
                #d1{
                    font-weight: bold;
                    font-size: 16px;
                    margin-bottom: 5px;
                }
                #fcontent dl dd{
                    font-size: 13px;
                }
                .a{
                    float: left;
                    margin-left: 20px;
                    padding-left: 30px;
                    padding-right: 50px;
                    text-decoration: none;
                }
                .b{
                    float: left;
                    padding-left: 40px;
                    padding-right: 30px;
                }
                .c{
                    float: left;
                    padding-left:500px;
                    padding-bottom: 1000px;
                    text-align:center;
                }

        </style>
        <title>e乐购首页</title>
    </head>
    <body>
        <div id=k1>
            <div id=k1top>
                <div id=k1tleft>
                    <span>欢迎来到e乐购!&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span><a href="#">[登录]&nbsp;&nbsp;</a></span>
                    <span>|</span>
                    <span><a href="#">&nbsp;&nbsp;[注册]</a></span>
                </div>
                <div id=k1tright>
                    <span><a href="#">订单查询</a></span>
                    <span>&nbsp;&nbsp;|&nbsp;&nbsp;</span>
                    <span><a href="#">我的e乐购</a></span>
                    <span>&nbsp;&nbsp;|&nbsp;&nbsp;</span>
                    <span><a href="#"><span id=icon1></span>400-900-0000</a></span>
                    <span>&nbsp;&nbsp;|&nbsp;&nbsp;</span>
                    <span><a href="#">下载e乐购APP</a></span>
                    <span>&nbsp;&nbsp;|&nbsp;&nbsp;</span>
                    <span><a href="#">客服中心</a></span>
                </div>
            </div>
            <div id=k1down>
                <ul>
                    <li id=logo><img src="img/logo.jpg"></li>
                    <li id=top_center><img src="img/top_center.jpg" /></li>
                    <li>
                        <form>
                            <input type="text" id=txt value="limu 胶原蛋白" />
                        </form>
                    </li>
                    <li><input type="button" id=but value="搜索" /></li>
                    <li class=wwd>
                        <div id=icon2></div>
                        <div id=bb>我的购物车</div>
                        <div id=icon3></div>&nbsp;&nbsp;
                    </li>
                    <div id=icon4>0</div>
                    <li id=nn>太阳镜&nbsp;蕉下&nbsp;果蔬脆片&nbsp;德亚酸牛奶&nbsp;蚕丝面膜&nbsp;山地车&nbsp;BB霜&nbsp;
                        乳胶枕&nbsp;蝙蝠侠系列石英表&nbsp;拍立得</li>
                </ul>
            </div>
        </div>
        <div id="erji">
            <body>
                <!--下面为二级菜单 -->
                <ul class="topmenu">
                    <div class="toptitle">
                        全部商品分类^
                    </div>
                    <li><a href="#">图书、音像、数字的商品</a> <span></span></li>
                    <li><a href="#">图书、音像、数字的商品</a> </li>
                    <li><a href="#">图书、音像、数字的商品</a></li>
                    <li><a href="#">图书、音像、数字的商品</a></li>
                    <li><a href="#">家居、家具、家装、厨具</a></li>
                    <li><a href="#">图书、音像、数字前商品</a></li>
                    <li><a href="#">家居、家具、家装、厨具</a></li>
                    <li><a href="#">鞋靴、箱包、钟表、厨具</a></li>
                    <li><a href="#">家居、家具、家装、厨具</a></li>
                    <li><a href="#">家居、家具、家装、厨具</a></li>
                    <li><a href="#">家居、家具、家装、厨具</a></li>
                    <li><a href="#">家居、家具、家装、厨具</a></li>
                    <li><a href="#">家居、家具、家装、厨具</a></li>
                </ul>
                <div class="head09">

                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="#">首页</a>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="#">精品品牌</a>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="#">全球购</a>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="#">品牌馆</a>

                </div>
            </body>
            <div id="vf"></div>
            <body>
                <div class="daobiao">
                    精选服饰
                </div>
                <div class="daobioa2">
                    限时抢购
                </div>
            </body>
            <div id="tupian">
                <img src="img/top_1.jpg" alt="guo" width="300px" /><img src="img/top_2.jpg" alt="yifu"
                    width="300px" /><img src="img/top_3.jpg" alt="e" width="300px" /><img src="img/top_4.jpg" alt="w"
                    width="300px" /><img src="img/top_5.jpg" alt="r" width="300px" />
            </div>
            <span id="z1">意大利TVS进口磐石锅具套组</span>
            <span id="z2">意大利TVS进口磐石锅具套组</span>
            <span id="z2">意大利TVS进口磐石锅具套组</span>
            <span id="z2">意大利TVS进口磐石锅具套组</span>
            <span id="z2">意大利TVS进口磐石锅具套组</span>
            <span id="z3">NO.9956455</span>
            <span id="z4">NO.9956455</span>
            <span id="z4">NO.9956455</span>
            <span id="z4">NO.995645</span>
            <span id="z4">NO.9956455</span>
            <span id="z5">¥999.00</span>
            <span id="z6">¥999.00</span>
            <span id="z6">¥999.00</span>
            <span id="z6">¥999.00</span>
            <span id="z6">¥999.00</span>
            <br>
            <br>
            <br>
            <div>
                <h4 class=dax1>限时抢购</h4>
                <h6 class=dax1>天天特价&nbsp;&nbsp;&nbsp;早10点强势上新</h6>
                </div>
                <div id="wf"></div>
                <div id="tejia">
                    <img src="img/top_2_1.jpg">
                </div>
                <div>
                    <img src="img/top_2_2.jpg"/>
                </div>
                <div id="tejia2">
                    <img src="img/top_2_3.jpg"/>
                </div>
                <div>
                    <img src="img/top_2_4.jpg">
                </div>
                <div>
                    <h4 class=dax1>品类精选</h4>
                    <h6 class=dax1>品类齐全&nbsp;&nbsp;&nbsp;轻松购物</h6>
                    </div>
                    <div id="wf"></div>
                    <div id="tejia">
                        <img src="img/jinpin_1.png"  width="750px"  height="400"/ >
                    </div>
                    <div>
                        <img src="img/jinpin_2.png"  width="750px"  height="400"/>
                    </div>
                    <div id="tejia2">
                        <img src="img/jinpin_3.png"  width="750px"  height="400"/>
                    </div>
                    <div>
                        <img src="img/jinpin_4.png"  width="750px"  height="400"/>
                    </div>
                    <br>
                    <br>
                    <br>
                    <div>
                        <h4 class=dax1>今日发现</h4>
                        <h6 class=dax1>精致好物&nbsp;&nbsp;&nbsp;更快乐的生活</h6>
                        </div>
                        <div id="wf"></div>
                        <div>
                            <div id="tupian">
                                <img src="img/day_1.jpg" alt="guo" width="300px" /><img src="img/day_2.jpg" alt="yifu"
                                    width="300px" /><img src="img/day_3.jpg" alt="e" width="300px" /><img src="img/day_4.jpg" alt="w"
                                    width="300px" /><img src="img/t_3.jpg" alt="r" width="300px" />
                            </div>
                            <span id="z1">意大利TVS进口磐石锅具套组</span>
                            <span id="z2">意大利TVS进口磐石锅具套组</span>
                            <span id="z2">意大利TVS进口磐石锅具套组</span>
                            <span id="z2">意大利TVS进口磐石锅具套组</span>
                            <span id="z2">意大利TVS进口磐石锅具套组</span>
                            <span id="z3">NO.9956455</span>
                            <span id="z4">NO.9956455</span>
                            <span id="z4">NO.9956455</span>
                            <span id="z4">NO.995645</span>
                            <span id="z4">NO.9956455</span>
                            <span id="z5">¥999.00</span>
                            <span id="z6">¥999.00</span>
                            <span id="z6">¥999.00</span>
                            <span id="z6">¥999.00</span>
                            <span id="z6">¥999.00</span>
                            <br>
                            <br>
                            <br>
                            <div id="tupian">
                                <img src="img/day_5.jpg" alt="guo" width="300px" /><img src="img/day_6.jpg" alt="yifu"
                                    width="300px" /><img src="img/day_7.jpg" alt="e" width="300px" /><img src="img/day_8.jpg" alt="w"
                                    width="300px" /><img src="img/p1.jpg" alt="r" width="300px" />
                            </div>
                            <span id="z1">意大利TVS进口磐石锅具套组</span>
                            <span id="z2">意大利TVS进口磐石锅具套组</span>
                            <span id="z2">意大利TVS进口磐石锅具套组</span>
                            <span id="z2">意大利TVS进口磐石锅具套组</span>
                            <span id="z2">意大利TVS进口磐石锅具套组</span>
                            <span id="z3">NO.9956455</span>
                            <span id="z4">NO.9956455</span>
                            <span id="z4">NO.9956455</span>
                            <span id="z4">NO.995645</span>
                            <span id="z4">NO.9956455</span>
                            <span id="z5">¥999.00</span>
                            <span id="z6">¥999.00</span>
                            <span id="z6">¥999.00</span>
                            <span id="z6">¥999.00</span>
                            <span id="z6">¥999.00</span>
                            <br>
                            <br>
                            <br>
                            <div>
                                <div id="fcontent">
                                        <div class="a">
                                            <dl>
                                                <dt id="d1"><span></span>使用帮助</dt>
                                                <dd class="o">新手指南</dd>
                                                <dd class="o">常见问题</dd>
                                                <dd class="o">用户协议</dd>
                                            </dl>
                                        </div>
                                        <div class="a">
                                            <dl>
                                                <dt id="d1"><span></span>会员服务</dt>
                                                <dd class="o">积分政策</dd>
                                                <dd class="o">会员权益</dd>
                                                <dd class="o">会员等级</dd>
                                            </dl>
                                        </div>
                                        <div class="a">
                                            <dl>
                                                <dt id="d1"><span></span>支付方式</dt>
                                                <dd class="o">积分支付</dd>
                                                <dd class="o">货到付款</dd>
                                                <dd class="o">在线支付</dd>
                                                <dd class="o">优惠券支付</dd>
                                            </dl>
                                        </div>
                                        <div class="a">
                                            <dl>
                                                <dt id="d1"><span></span>配送方式</dt>
                                                <dd class="o">包邮政策</dd>
                                                <dd class="o">费用说明</dd>
                                                <dd class="o">配送说明</dd>
                                            </dl>
                                        </div>
                                        <div class="a">
                                            <dl>
                                                <dt id="d1"><span></span>售后服务</dt>
                                                <dd class="o">电子发票</dd>
                                                <dd class="o">售后咨询</dd>
                                                <dd class="o">退货办理</dd>
                                                <dd class="o">退货政策</dd>
                                            </dl>
                                        </div>
                                        <div class="b">
                                            <dl>
                                                <dt id="d1"><span></span>手机e乐购</dt>
                                                <img src="img/footer_ewm_01.png">
                                                <dd class="o">下载移动客户端</dd>
                                            </dl>
                                
                                        </div>
                                        <div class="b">
                                            <dl>
                                                <dt id="d1"><span></span>e乐购微信</dt>
                                                <img src="img/footer_ewm_02.png">
                                                <dd class="o">e乐购官方微信</dd>
                                            </dl>
                                
                                        </div>
                                    </div>
                                    <br>
                                    <br>
                                    <br>
                                    <div class="c">
                                        <p align="center">
                                           关于e乐购| 投资者关系| 商家入驻| 联系我们|
                                        </p>
                                    </div>
                                </div>
                            </div>
                              
<div  span style = "text-decoration：underline;" >________________________________________________________________________________________________________ </span> </div>
                        </div>

        </div>
        </div>
        <div id=k3></div>
        <div id=k4></div>
        <div id=k5></div>
        <div id=k6></div>
        <div id=k7></div>
    </body>
</html>

诗书画喵
关注
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值