HTML+CSS imitation Jingdong page with code (web front-end big homework)

Language 2023-07-01 03:45:48 views: null

I don’t have much time to learn the front-end. After reading it for two nights, I started to catch up with the practical homework. Just take a look.

Let's take a look at the effect first:

 

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>京东</title>
    <style>
        *{
            /* margin: 0px auto; */
            padding: 0px;
            list-style: none;
            text-decoration: none
        }
        .clear::after{
            content: "";
            display: block;
            clear: both;
        }
        .top{
            width: 1580px;
            /* border: 2px solid red; */
            background-color: #e5e3e5;
            
        }

        .top_left{
            width: 40px;
            /* border: 2px solid rgb(255, 81, 0); */
            display:inline;
            float: left;
            padding-left:100px;
            
        }
     

        .top_left .one {
            display: none;
            /* border: 2px solid rgb(253, 17, 0); */
            position: absolute;
        }
        .top_left:hover .one{
            display: block;
            background-color:#e3e4e5;
            
        }



        .top_right{
            /* border: 2px solid blue; */
            border: 0px,0px,0px,0px;
            float: right;
            padding-right:100px;
            display:inline;
        }
        .ul1 .li1{
            float: left;
            width: 100px;
            position: relative;
        }
         .ul1 .one{
            display: none;
            position: absolute; 
         }
        .li1:hover .one{
            display: block;
            background-color:#e3e4e5;
        }





        .bottom{
            width: 1580px;
            height: 180px;
            background-color: rgb(255, 255, 255);
        }
        .bottom .bottom_left{
            float: left;
            /* border: 2px solid blue;  */
            padding-top:50px;
            padding-left:180px;
       }
       
       .bottom .bottom_middle{
            /* border: 2px solid blue;  */
            float: left;
    
            padding-top:40px;
            /* padding-left:150px; */
            padding-right:200px;
       }
       .bottom .bottom_right{
            float: left;
            /* border: 2px solid blue;  */
            padding-top:50px;
            padding-right:100px;
       }
       
       /* 外边距 margin */
       /* 内边距 padding */

       .bottom_middle input{
            width:454px;
            height:32px;
            border:2px solid #c62020;
            padding-left: 4px;
            color:rgb(104, 103, 103);
            font:14px/32px "microsoft yahei";
            float:left;
        }
       .bottom_middle button{
            width:80px;
            height:35px;
            background-color:#e1251b; 
            float:left;
            font:16px/36px "microsoft yahei";
            color:#fff;
            cursor:pointer;
        }
        .bottom_middle .button1{
            width:150px;
            height:35px;
            background-color:#ffffff; 
            float:left;
            font:16px/36px "microsoft yahei";
            color:#e1251b;
            cursor:pointer;
        }
        
        .bottom .bottom_middle .bottom_middle_1{
            /* border: 2px solid rgb(255, 0, 0); */
            margin-left: 80px;
        }
        .bottom .bottom_middle .bottom_middle_2{
            border: 2px solid rgb(255, 255, 255);
            margin-top: 20px;
            margin-left: 80px;
        }
        .bottom_middle_2_1{
            font:16px/36px "microsoft yahei";
            color:#999999;
        }
        .bottom .bottom_middle .bottom_middle_3{
            /* border: 2px solid rgba(0, 0, 0, 0.396); */
            margin-left: 60px;
            padding-top: 0px;
        }

       


        section{
            background-color: #f4f4f4;
            padding-top: 12px;
            width: 1580px;
            height: 580px;
            /* border: 2px solid blue; */
        }
       

        section .div2{
            background-color: rgb(255, 255, 255);
            margin-left: 120px;
            
            padding-left: 10px;
            width: 200px;
            height: 580px;
            /* border: 2px solid blue; */
            float: left;
        }


        section .div3{
            width: 650px;
            height: 580px;
            /* border: 2px solid blue; */
            margin-left: 5px;
            margin-right: 5px;
            float: left;
        }




        section .div4{
            width: 200px;
            height: 580px;
            /* border: 2px solid blue; */
            float: left;
        }
        section .div4 .div4-1{
            margin-bottom: 3px;
        }
        section .div4 .div4-2{
            margin-bottom: 3px;
        }

        section .div5{
            width: 240px;
            height: 580px;
            background-color: rgb(255, 255, 255);
            margin-left:  5px;
            /* border: 2px solid blue; */
            float: left;
        }

        
        section .div5 .div5-3{
            
            /* border: 2px solid blue; */
            display: inline-block;
        }
        section .div5 .div5-4{
            
            /* border: 2px solid blue; */
            display: inline-block;
        }
        section .div5 .div5-4 .table1{
            border-spacing: 24px 0px;
        }
        .r_top_banner {
	height:115px;
	border-bottom:1px solid #ccc;
}

.r_top_banner .top_user {
	padding-top:15px;
	padding-left:10px;
}


.r_top_banner .top_user img {
	width:45px;
	height:45px;
	border-radius:25px;
}

.r_top_banner .top_user a{
	float:left;
}

.r_top_banner .top_user .userinfo {
	float:left;
	margin-left:15px;
	line-height:20px;
}

.r_top_banner .userinfo a {
	margin-right:5px;
} 

.bot_btns {
	padding-left:10px;
	padding-top:15px;
}

.bot_btns a {
	width:80px;
	height:20px;
	border:2px solid red;
	display:block;
	float:left;
	text-align:center;
	line-height:20px;
	margin-right:10px;
}



        /* 外边距 margin */
        /* 内边距 padding */
        footer{
            background-color: #f4f4f4;
            padding-top: 12px;
            width: 1580px;
            height: 700px;
            /* border: 2px solid blue; */
        }
        .footer_1{
            /* border: 2px solid blue; */
            width: 1580px;
            height: 350px;
        }
        .footer_1_1{
            /* border: 2px solid blue; */
            margin-left: 115px;
            width: 215px;
            float: left;
        }
        .footer_1_2{
            /* border: 2px solid blue; */
            margin-left: 0px;
            width: 850px;
            height: 298px;
            float: left;
        }
        .footer_1_3{
            /* border: 2px solid blue; */
            margin-left: 0px;
            width: 242px;
            height: 298px;
            float: left;
        }
        .footer_1_4{
            /* border: 2px solid blue; */
            background-color: #ffffff;
            margin-left: 30px;
            width: 80px;
            height: 330px;
            float: left;
        }
        .footer_1_4_1{
            border-spacing: 18px 15px;
        }

      
        .footer_2{
            /* border: 2px solid blue; */
            width: 1580px;
            height: 350px;
        }
        .footer_2_1{
             /* border: 2px solid blue; */
             margin-left: 115px;
            width: 160px;
            height: 210px;
            float: left;
        }
        .footer_2_2{
             /* border: 2px solid blue; */
             margin-left: 65px;
            width: 160px;
            height: 210px;
            float: left;
        }
        .footer_2_3{
             /* border: 2px solid blue; */
             margin-left: 65px;
            width: 160px;
            height: 210px;
            float: left;
        }
        .footer_2_4{
             /* border: 2px solid blue; */
             margin-left: 65px;
            width: 160px;
            height: 210px;
            float: left;
        }
        .footer_2_5{
             /* border: 2px solid blue; */
             margin-left: 65px;
            width: 160px;
            height: 210px;
            float: left;
        }
        .footer_2_6{
             /* border: 2px solid blue; */
             margin-left: 65px;
            width: 200px;
            height: 210px;
            float: left;
        }
        .footer_2_7{
             /* border: 2px solid blue; */
             margin-left: 115px;
            width: 1350px;
            height: 130px;
            float: left;
        }
        .footer_2_7_1{
            /* border: 2px solid blue; */
             margin-left: 80px;
            width: 1100px;
            height: 50px;
            float: left;
        }
        .footer_2_7_2{
            /* border: 2px solid rgb(255, 0, 0); */
             margin-left: 20px;
             margin-top: 0px;
            width:100px;
            height: 100px;
            float: left;
        }
        .footer_2_7_3{
            /* border: 2px solid rgb(255, 0, 0); */
             margin-right: 22px;
             margin-top: 0px;
            width:120px;
            height: 30px;
            float: right ;
        }
    </style>
</head>
<body>
    <header>
        <div class="top clear">
            <div class="top_left ">
                <p class="top_left_1"><a href="">甘肃</a></p>
            
                <div class="one">
                    <ul>
                        <div class="li5">&nbsp&nbsp&nbsp北京 &nbsp&nbsp&nbsp&nbsp&nbsp上海 &nbsp&nbsp&nbsp天津 &nbsp&nbsp&nbsp重庆 &nbsp&nbsp&nbsp河北</div>
                        <div class="li5">&nbsp&nbsp&nbsp山西 &nbsp&nbsp&nbsp&nbsp&nbsp河南 &nbsp&nbsp&nbsp辽宁 &nbsp&nbsp&nbsp吉林 &nbsp&nbsp&nbsp黑龙江    </div>
                        <div class="li5">&nbsp&nbsp&nbsp内蒙古 &nbsp&nbsp江苏 &nbsp&nbsp&nbsp山东 &nbsp&nbsp&nbsp安徽 &nbsp&nbsp&nbsp浙江    </div>
                        <div class="li5">&nbsp&nbsp&nbsp福建 &nbsp&nbsp&nbsp&nbsp&nbsp湖北 &nbsp&nbsp&nbsp湖南 &nbsp&nbsp&nbsp广东 &nbsp&nbsp&nbsp广西    </div>
                        <div class="li5">&nbsp&nbsp&nbsp江西 &nbsp&nbsp&nbsp&nbsp&nbsp四川 &nbsp&nbsp&nbsp海南 &nbsp&nbsp&nbsp贵州 &nbsp&nbsp&nbsp云南    </div>
                        <div class="li5">&nbsp&nbsp&nbsp西藏 &nbsp&nbsp&nbsp&nbsp&nbsp陕西 &nbsp&nbsp&nbsp甘肃 &nbsp&nbsp&nbsp青海 &nbsp&nbsp&nbsp宁夏   </div>
                        <div class="li5">&nbsp&nbsp&nbsp新疆 &nbsp&nbsp&nbsp&nbsp&nbsp港澳 &nbsp&nbsp&nbsp台湾 &nbsp&nbsp&nbsp钓鱼岛 &nbsp&nbsp海外    </div>
                    </ul>
                    
                </div>
            </div>    
                
                
            

            <div class="top_right">
                <ul class="ul1 "  >
                    <li class="li1">
                        <a href="">你好，请登录 </a>
                    </li>
                    <li class="li1">
                        <a href="">免费注册 |</a>                        
                    </li>
                    <li class="li1">
                        <a href="">我的京东 |</a>
                        <div class="one">
                            <ul>
                                <li>待处理订单</li>
                                <li>我的问答</li>
                                <li>降价商品</li>
                                <li>返修退换货</li>
                                <li>我的商品</li>
                            </ul>
                        </div>
                    </li>
                    <li class="li1">
                        <a href="">京东会员 |</a>                        
                    </li>
                    <li class="li1">
                        <a href="">企业采购 |</a>
                        <div class="one">
                            <ul>
                                <li>企业购</li>
                                <li>公共采购</li>
                                <li>工业品</li>
                                <li>商用场景馆</li>
                                <li>微信企业购</li>
                                <li>礼品卡</li>
                            </ul>
                        </div>
                    </li>
                    <li class="li1">
                        <a href="">商家服务 |</a>                        
                    </li>
                    <li class="li1">
                        <a href="">商家服务 |</a>                        
                    </li>
                    <li class="li1">
                        <a href="">手机京东 |</a>                        
                    </li>
                    <li class="li1">
                        <a href="">网站无障碍</a>                        
                    </li>
                   
                </ul>
               
                </div>
        </div>
        
        <div class="bottom">

        
            <div class="bottom_left">
                <img src="img/logo.png" width="100px" height="100px" alt="logo">
            </div>
            
            <div class="bottom_middle">
                
                <div class="bottom_middle_1">
                    
                    <input type="text" value="图书开抢">
                    <button>搜索 </button>
                    <button class="button1" style="margin-left:30px;"><img src="img/gwc.png" width="30px" height="20px">我的购物车</button>
                </div>
                
                <div class="bottom_middle_2">
                    <p class="bottom_middle_2_1">100减99 一加手机 京东京造 健康服务 镇店电脑 加氛生活 三星盛典 </p>
                    
                </div>
                
                <!-- <br> -->
                
                <div class="bottom_middle_3">
                    <p>京东超市 &nbsp&nbsp&nbsp&nbsp优惠劵 &nbsp&nbsp&nbsp&nbsp秒杀 &nbsp&nbsp&nbsp&nbsp京东家电 &nbsp&nbsp&nbsp&nbsp京东生鲜 &nbsp&nbsp&nbsp&nbspPLUS会员 &nbsp&nbsp&nbsp&nbsp进口好物 &nbsp&nbsp&nbsp&nbsp品牌闪购 &nbsp&nbsp&nbsp&nbsp拍卖 &nbsp&nbsp&nbsp&nbsp京东五金城</p>
                    
                </div>

               
           </div>
                
            <div class="bottom_right">
                <img src="img/jingdong.png" width="100px" height="100px" alt="京东网站二维码">
            </div>

        </div>    
    </header>
    <section >
        
        <div class="div2">
            
           <ul class="ul4">
            <li class="li4" style="margin-bottom:10px;"><a href="">家用电器</a></li>
            <li class="li4" style="margin-bottom:10px;">手机/运营商/数码</li>
            <li class="li4" style="margin-bottom:10px;">电脑/办公</li>
            <li class="li4" style="margin-bottom:10px;">家居/家具/家装/厨具</li>
            <li class="li4" style="margin-bottom:10px;">男装/女装/童装/内衣</li>
            <li class="li4" style="margin-bottom:10px;">美妆/个护/清洁/宠物</li>
            <li class="li4" style="margin-bottom:10px;">女鞋/箱包/钟表/珠宝</li>
            <li class="li4" style="margin-bottom:10px;">男鞋/运动/户外</li>
            <li class="li4" style="margin-bottom:10px;">房产/汽车/汽车用品</li>
            <li class="li4" style="margin-bottom:10px;">母婴/玩具乐器</li>
            <li class="li4" style="margin-bottom:10px;">食品/酒类/生鲜/特产</li>
            <li class="li4" style="margin-bottom:10px;">艺术/礼品鲜花/农资绿植</li>
            <li class="li4" style="margin-bottom:10px;">医疗保健/计生用品</li>
            <li class="li4" style="margin-bottom:10px;">图书/文娱/教育/电子书</li>
            <li class="li4" style="margin-bottom:10px;">机票/酒店/旅游/生活</li>
            <li class="li4" style="margin-bottom:10px;">众筹/白条/保险/企业金融</li>
            <li class="li4" style="margin-bottom:10px;">安装/维修/清洗/二手</li>
            <li>工业品</li>
           </ul>
            
        </div>
        <div class="div3">
            <img src="img/zhu.png"  width="650px" height="580px" alt="logo">    
        </div>
        <div class="div4">
            <div class="div4-1"><img src="img/4-1.png" width="200px" height="188px" alt="图片4-1"></div>
            <div class="div4-2"><img src="img/4-2.jpg" width="200px" height="188px"alt="图片4-2"></div>
            <div class="div4-3"><img src="img/4-3.png" width="200px" height=" 188px"alt="图片4-3"></div>
                
        </div>
        <div class="div5">
            <div class="div5-1">
                <!-- <img src="img/5-1.png" width="240px" height="150px" alt="图片5-1"> -->
                <div class="r_top_banner">
                    <div class="top_user clearfix">
                           <a href="#">
                                <img src="img/no_login.png">
                           </a>

                           <div class="userinfo">
                                <p class="p1">hi~欢迎逛京东！</p>

                                <p class="p2">
                                      <a href="#">登入</a>

                                      <a href="#">注册</a>
                                </p>
                           </div>
                    </div>
                    
                    <div class="bot_btns">

                           <a href="#">新人福利</a>
                           <a href="#">PLUS会员</a>
                    </div>
             </div>
            
            
            </div>
            <div class="div5-2">
                <div5-2-1>
                   <a href="" style="margin-right: 100px;">京东日报</a> 
                   <a href="">更多></a>
                </div5-2-1>
            </div>
            <div class="div5-3">
                <ul>
                    <li><a href="" style="margin-left: 70px;">360度旋转安全座......</a></li>
                    <li><a href="" style="margin-left: 70px;">边拖边洗，一步到位....</a></li>
                    <li><a href="" style="margin-left: 70px;">嘘！以内家用洗衣机...</a></li>
                    <li><a href="" style="margin-left: 70px;">精准避障仿跌落，以...</a></li>
                </ul>
            </div>
            <div class="div5-4">
                <table border="0"  class="table1">
                    <tr >
                        <td><img src="img/礼品卡.png" width="45px" height="45px"alt=""></td>
                        <td><img src="img/企业购.png" width="45px" height="45px" alt=""></td>
                        <td><img src="img/话费.png"  width="45px" height="45px"alt=""></td>
                    </tr>
               
                    <tr>
                        <td>礼品卡</td>
                        <td>企业购</td>
                        <td>&nbsp话费</td>
                    </tr>
                    <tr>
                        <td><img src="img/游戏.png" width="45px" height="45px"></td>
                        <td><img src="img/白条.png" width="45px" height="45px"alt=""></td>
                        <td><img src="img/加油卡.png" width="45px" height="45px"alt=""></td>
                    </tr>
                    <tr>
                        <td>游戏</td>
                        <td>白条</td>
                        <td>加油卡</td>
                    </tr>
                    <tr>
                        <td><img src="img/五金城.png" width="45px" height="45px"alt=""></td>
                        <td><img src="img/机票.png" width="45px" height="45px"alt=""></td>
                        <td><img src="img/火车票.png" width="45px" height="45px"alt=""></td>
                    </tr>
                    <tr>
                        <td>五金城</td>
                        <td>机票</td>
                        <td>火车票</td>
                    </tr>
                    <tr>
                        <td><img src="img/电影票.png" width="45px" height="45px"alt=""></td>
                        <td><img src="img/酒店.png" width="45px" height="45px"alt=""></td>
                        <td><img src="img/云主机.png" width="45px" height="45px"alt=""></td>
                    </tr>
                    <tr>
                        <td>电影票</td>
                        <td>酒店</td>
                        <td>云主机</td>
                    </tr>
                    
                </table>
            </div>
        </div>
        
    </section>

    <footer>
        <div class="footer_1">
            <div class="footer_1_1">
                <img src="img/京东秒杀.png" width="215px" height="298"alt="">
            </div>
            <div class="footer_1_2">
                <img src="img/商品.png" width="850px" height="298"alt="">
            </div>
            <div class="footer_1_3">
                <img src="img/美妆.png" width="242px" height="298" alt="">
            </div>
            <div class="footer_1_4">
                <table table border="1" class="footer_1_4_1">
                    <tr>
                        <td><a href="">京东秒杀</a></td>
                    </tr>
                    <tr>
                        <td><a href="">特色优选</a></td>
                    </tr>
                    <tr>
                        <td><a href="">频道广场</a></td>
                    </tr>
                    <tr>
                        <td><a href="">为你推荐</a></td>
                    </tr>
                    <tr>
                        <td><a href="">客服</a></td>
                    </tr>
                    <tr>
                        <td><a href="">反馈</a></td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="footer_2">
            <div class="footer_2_1">
                <ul>
                    
                    <li>购物指南</li>
                    <br>
                    <li>购物流程</li>
                    <li>会员介绍</li>
                    <li>生活旅行</li>
                    <li>常见问题</li>
                    <li>大家电</li>
                    <li>联系客服</li>
                </ul>
            </div>
            <div class="footer_2_2">
                <ul>
                    <li>配送方式</li>
                    <br>
                    <li>上门自提</li>
                    <li>211限时达</li>
                    <li>配送服务查询</li>
                    <li>配送费收取标准</li>
                </ul>
            </div>
            <div class="footer_2_3">
                <ul>
                    <li>支付方式</li>
                    <br>
                    <li>货到付款</li>
                    <li>在线支付</li>
                    <li>分期付款</li>
                    <li>公司转账</li>
                </ul>
            </div>
            <div class="footer_2_4">
                <ul>
                    <li>售后服务</li>
                    <br>
                    <li>售后政策</li>
                    <li>价格保护</li>
                    <li>退款说明</li>
                    <li>返修\退换货</li>
                    <li>取消订单</li>
                </ul>
            </div>
            <div class="footer_2_5">
                <ul>
                    <li>特色服务</li>
                    <br>
                    <li>夺宝岛</li>
                    <li>DIY装机</li>
                    <li>延保服务</li>
                    <li>京东E卡</li>
                    <li>京东通信</li>
                    <li>京鱼座智能</li>
                </ul>
            </div>
            <div class="footer_2_6">
                <ul>
                    <li>京东自营覆盖区县</li>
                    <br>
                    <li>京东已向全国2661个区县提供自营配送服务，支持货到付款、POS机刷卡和售后上门服务。</li>
                </ul>
            </div>
            <div class="footer_2_7">
                <div class="footer_2_7_1">
                    <p>关于我们 | 联系我们 | 联系客服 | 合作招商 | 商家帮助 | 营销中心 | 手机京东 | 友情链接 | 销售联盟 | 京东社区 | 风险监测 | 隐私政策 | 京东公益 | Media & IR</p>
                </div>
                <div class="footer_2_7_2">
                    <img src="img/公众号二维码.png" width="100px" height="100"alt="">
                </div>
                <div class="footer_2_7_3">
                    <p>欢迎关注作者</p>

                </div>
            </div>
        </div>
        
    </footer>
</body>
</html>

Related resources can be viewed on the homepage resources

Guess you like

Origin blog.csdn.net/m0_62437669/article/details/129770488
Recommended
LFOSSA Yuanlaisusu Open Course | Mastering the Cloud Native Future: Comprehensive Guide to CNCF Certification and Exam Preparation Tips
Ranking
C++ Basic Syntax
bootstrapTable hides a column based on a condition
Why is reentrant lock recommended instead of Synchronized when dynamic high concurrency?
hexo create a blog
[Fully open source and non-encrypted version] Imitation of the eighth district distribution/online signature/multiple sets of download templates/APP distribution hosting/APP packaging and packaging
Polymerization combination
https://www.flysnow.org/2017/05/06/go-in-action-go-log.html
From the perspective of Flutter and the front-end, talk about how to ensure UI fluency under the single-threaded model
nginx-301, 302 redirect
Geolocation by IP Address in ASP.NET
Daily
More
2024-04-26(22)
2024-04-25(32)
2024-04-24(30)
2024-04-23(30)
2024-04-22(5)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)
2024-04-17(31)

Code World

© 2018 codetd.com