• 【HTML】HTML5网页作业----模仿京东，模仿站点

    1、引言

    设计结课作业,课程设计无处下手，网页要求的总数量太多？没有合适的模板？数据库，java，python，vue，html作业复杂工程量过大？毕设毫无头绪等等一系列问题。你想要解决的问题，在微信公众号“coding加油站”中全部会得到解决

    设计结课作业,课程设计无处下手，网页要求的总数量太多？没有合适的模板？数据库，java，python，vue，html作业复杂工程量过大？毕设毫无头绪等等一系列问题。你想要解决的问题，在微信公众号“coding加油站”中全部会得到解决

    2、作品介绍

    模仿京东首页采用html，css技术来实现，符合所学知识体系，适用于常见的作业以及课程设计，需要获取更多的作品，请关注微信公众号：coding加油站，获取，如需更多资料，可在微信后台留言。欢迎大家来提问，交流学习。

    2.1、作品简介方面 

    模仿京东首页采用常规方式来实现，符合绝大部分的要求。代码配置有相关文档讲解，如需从代码中学到知识点，那么这个作品将是你的不二之选

    2.2、作品二次开发工具

    此作品代码相对简单，基本使用课堂中所学知识点来完成，只需要修改相关的介绍文字，一些图片，就可以改为自己独一无二的代码，网页作品下载后可使用任意编辑软件（例如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm 所有编辑器均可使用），java，python等相关作业使用自己常使用的工具亦可完成相关二次开发。

    2.3、作品技术介绍

    html网页作品技术方面：使用CSS制作了网页背景图、鼠标经过及选中导航变色效果、下划线等相关技术来美化相关界面，部分采用了javascript来做校验。 使用html5，以及css3等相关技术完成技术的布局，在本作品中，会使用常见的布局，常见的浮动布局，flex布局都会有使用到哦。同时在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识，同时使用了一些js的相关知识。例如使用到了dom，和bom来获取浏览器的相关api，同时使用css对样式进行相关的美化，使得界面更加符合网页设计，使用less写的样式，使用弹性盒子写的布局，也有响应式布局，纯css效果，无js代码

    3、作品演示

    3.1、首页

    相关代码：

    1.  
    2.     
    3.     <div class="navigation-wrapper">
    4.         
    5.         <div class="navigation">
    6.             
    7.             <ul class="location">
    8.                 <li class="address dt">
    9.                     <a href="">
    10.                         <i class="icon-weizhi">i>
    11.                         <span>湖南span>
    12.                     a>
    13.                     <ul class="location-list list">
    14.                         
    15.                         <li class="province">
    16.                             <span><a href="javascript:;">北京a>span>
    17.                             <span><a href="javascript:;">上海a>span>
    18.                             <span><a href="javascript:;">天津a>span>
    19.          
    20.                             <span><a href="javascript:;">钓鱼岛a>span>
    21.                             <span><a href="javascript:;">海外a>span>
    22.                         li>
    23.                         
    24.                         <li class="province-next">
    25.                             <div>地区专享版本div>
    26.                             <ul class="next">
    27.                                 <li>中國港澳li>
    28.                                 <li>中國台灣li>
    29.                                 <li>京东全球li>
    30.                             ul>
    31.                         li>
    32.               
    33.                     ul>
    34.                 li>
    35.             ul>
    36.  
    37.             
    38.             <ul class="fr">
    39.                 
    40.                 <li class="logon">
    41.                     <a href="" class="lo">你好，请登录a>
    42.                     <a href="" class="gon">免费注册a>
    43.                 li>
    44.                 
    45.                 <li class="spacer">li>
    46.                 
    47.                 <li class="order">
    48.                     <a href="">我的订单a>
    49.                 li>
    50.                 <li class="spacer">li>
    51.                 
    52.                 <li class="my dt">
    53.                     <a href="">
    54.                         <span>我的京东span>
    55.                         <i class="icon-xiangshang-b">i>
    56.                     a>
    57.                     <ul class="my-jd list">
    58.                         <li>
    59.                             <span><a href="">待处理订单a>span>
    60.                             <span><a href="">消息a>span>
    61.                             <span><a href="">返修退还书a>span>
    62.                             <span><a href="">我的问答a>span>
    63.                             <span><a href="">降价商品a>span>
    64.                             <span><a href="">我的关注a>span>
    65.                         li>
    66.                     ul>
    67.                 li>
    68.                 
    69.                 <li class="spacer">li>
    70.                 <li class="member">
    71.                     <a href="">京东会员a>
    72.                 li>
    73.                 <li class="spacer">li>
    74.                 
    75.                 <li class="enterprise dt">
    76.                     <a href="">
    77.                         <span>企业采购span>
    78.                         <i class="icon-xiangshang-b">i>
    79.                     a>
    80.                 li>
    81.                 <li class="spacer">li>
    82.                 
    83.                 <li class="service">
    84.                     <a href="">
    85.                         客户服务
    86.                         <i class="icon-xiangshang-b">i>
    87.                     a>
    88.                 li>
    89.                 <li class="spacer">li>
    90.                 
    91.                 <li class="website  dt">
    92.                     <a href="">
    93.                         网站导航
    94.                         <i class="icon-xiangshang-b">i>
    95.                     a>
    96.                 li>
    97.                 <li class="spacer">li>
    98.                 
    99.                 <li class="handset">
    100.                     <a href="">手机京东a>
    101.                     <ul class="download">
    102.                         <li>li>
    103.                     ul>
    104.                     <ul>
    105.                         <li>li>
    106.                     ul>
    107.                 li>
    108.             ul>
    109.         div>
    110.     div>
    111.  
    112.     
    113.     <div class="header-wrapper">
    114.         <div class="header">
    115.             
    116.             <h1 class="logo">h1>
    117.             
    118.             <div class="search">
    119.                 <form class="search-min" action="">
    120.                     <i class="icon-tubiaozhizuo-">i>
    121.                     <input type="text" name="text" class="text" placeholder="车载手机支架" >
    122.                     <input type="submit" class="icon-search" value="" name="search">
    123.                 form>
    124.                 
    125.                 <div class="search-word">
    126.                     <a href="#">智能新生活a>
    127.                     <a href="#">进口日a>
    128.                     <a href="#">立秋盛典a>
    129.                     <a href="#">华硕巅峰a>
    130.                     <a href="#">秒杀狂欢a>
    131.                     <a href="#">新品上市a>
    132.                     <a href="#">精选日用a>
    133.                     <a href="#" class="min-none">电脑采购a>
    134.                     <a href="#" class="min-none">勋章钜惠a>
    135.                 div>
    136.             div>
    137.             
    138.             <div class="shopping">
    139.                 <i class="icon-gouwuche">i>
    140.                 <span>我的购物车span>
    141.             div>
    142.             
    143.             <div class="navitems">
    144.                 <span class="items">秒杀span>
    145.                 <span class="items">优惠卷span>
    146.                 <span>PLUS会员span>
    147.                 <span>品牌闪购span>
    148.                 <span>拍卖span>
    149.                 <span>京东家电span>
    150.                 <span>京东超市span>
    151.                 <span>京东生鲜span>
    152.                 <span>京东国际span>
    153.                 <span>京东金融span>
    154.             div>
    155.             
    156.             <div class="ad">div>
    157.         div>
    158.     div>
    159.  
    160.     
    161.     
    162.     <div class="big-container">
    163.         
    164.         <div class="container-top">div>
    165.         
    166.         <div class="container-box">
    167.        
    168.             
    169.             <div class="left-sidebar">
    170.                 <ul class="side">
    171.                     <li class="item">
    172.                         <a href="#">家用电器a>
    173.                         <ul class="subnav">
    174.                             <li>
    175.                                 
    176.                                 <div class="goods-detailed">
    177.                                     
    178.                                     <div class="goods-label">
    179.                                         <p>家电馆  >p>
    180.                                         <p>家电专卖店  >p>
    181.                                         <p>家电服务  >p>
    182.                                         <p>企业采购  >p>
    183.                                         <p>商用电器  >p>
    184.                                         <p>以旧换新  >p>
    185.                                     div>
    186.                                     
    187.                                     <div class="goods">
    188.                                         <dl>
    189.                                             <dt><a href="">电视 >a>dt>
    190.                                             <dd>
    191.                                                 <a href="">超薄电视a>
    192.                                                 <a href="">全面屏电视a>
    193.                                                 <a href="">智能电视a>
    194.                                                 <a href="">教育电视a>
    195.                                                 <a href="">OLED电视a>
    196.                                                 <a href="">智慧幕a>
    197.                                                 <a href="">4k超清电视a>
    198.                                                 <a href="">55英寸a>
    199.                                                 <a href="">65英寸a>
    200.                                                 <a href="">电视配件a>
    201.                                             dd>
    202.                                         dl>
    203.                                         
    204.                                         <dl>
    205.                                             <dt><a href="">空调 >a>dt>
    206.                                             <dd>
    207.                                                 <a href="">超薄电视a>
    208.                                                 <a href="">全面屏电视a>
    209.                                                 <a href="">智能电视a>
    210.                                                 <a href="">教育电视a>
    211.                                                 <a href="">OLED电视a>
    212.                                                 <a href="">智慧幕a>
    213.                                                 <a href="">4k超清电视a>
    214.                                                 <a href="">55英寸a>
    215.                                                 <a href="">65英寸a>
    216.                                                 <a href="">电视配件a>
    217.                                             dd>
    218.                                         dl>
    219.  
    220.                                         <dl>
    221.                                             <dt><a href="">生活电器 >a>dt>
    222.                                             <dd>
    223.                                                 <a href="">超薄电视a>
    224.                                                 <a href="">全面屏电视a>
    225.                                                 <a href="">智能电视a>
    226.                                                 <a href="">教育电视a>
    227.                                                 <a href="">OLED电视a>
    228.                                                 <a href="">智慧幕a>
    229.                                                 <a href="">4k超清电视a>
    230.                                                 <a href="">55英寸a>
    231.                                                 <a href="">65英寸a>
    232.                                                 <a href="">电视配件a>
    233.                                                 <a href="">油烟机a>
    234.                                                 <a href="">电力锅a>
    235.                                             dd>
    236.                                         dl>
    237.  
    238.                                         <dl>
    239.                                             <dt><a href="">空调 >a>dt>
    240.                                             <dd>
    241.                                                 <a href="">超薄电视a>
    242.                                                 <a href="">全面屏电视a>
    243.                                                 <a href="">智能电视a>
    244.                                                 <a href="">教育电视a>
    245.                                                 <a href="">OLED电视a>
    246.                                                 <a href="">智慧幕a>
    247.                                                 <a href="">4k超清电视a>
    248.                                                 <a href="">55英寸a>
    249.                                                 <a href="">65英寸a>
    250.                                                 <a href="">电视配件a>
    251.                                             dd>
    252.                                         dl>
    253.  
    254.                                         <dl>
    255.                                             <dt><a href="">空调 >a>dt>
    256.                                             <dd>
    257.                                                 <a href="">超薄电视a>
    258.                                                 <a href="">全面屏电视a>
    259.                                                 <a href="">智能电视a>
    260.                                                 <a href="">教育电视a>
    261.                                                 <a href="">OLED电视a>
    262.                                                 <a href="">智慧幕a>
    263.                                                 <a href="">4k超清电视a>
    264.                                                 <a href="">55英寸a>
    265.                                                 <a href="">65英寸a>
    266.                                                 <a href="">电视配件a>
    267.                                             dd>
    268.                                         dl>
    269.  
    270.                                      
    271.                                     div>
    272.                                 div>
    273.                                
    274.                           
    275.                                 div>
    276.                             li>
    277.                         ul>
    278.                     li>
    279.  
    280.                     <li class="item">
    281.                         <a href="#">手机a><span class='line'>/span><a href="#">运营商a><span class='line'>/span><a href="#">数码a>
    282.                         <ul class="subnav">
    283.                             <li>
    284.                                 
    285.                                 <div class="goods-detailed">
    286.                                     
    287.                                     <div class="goods-label">
    288.                                         <p>家电馆  >p>
    289.                                         <p>家电专卖店  >p>
    290.                                         <p>家电服务  >p>
    291.                                         <p>企业采购  >p>
    292.                                         <p>商用电器  >p>
    293.                                         <p>以旧换新  >p>
    294.                                     div>
    295.                                     
    296.                                     <div class="goods">
    297.                                         <dl>
    298.                                             <dt><a href="">空调 >a>dt>
    299.                                             <dd>
    300.                                                 <a href="">超薄电视a>
    301.                                                 <a href="">全面屏电视a>
    302.                                                 <a href="">智能电视a>
    303.                                                 <a href="">教育电视a>
    304.                                                 <a href="">OLED电视a>
    305.                                                 <a href="">智慧幕a>
    306.                                                 <a href="">4k超清电视a>
    307.                                                 <a href="">55英寸a>
    308.                                                 <a href="">65英寸a>
    309.                                                 <a href="">电视配件a>
    310.                                             dd>
    311.                                         dl>
    312.  
    313.                                         <dl>
    314.                                             <dt><a href="">电视 >a>dt>
    315.                                             <dd>
    316.                                                 <a href="">超薄电视a>
    317.                                                 <a href="">全面屏电视a>
    318.                                                 <a href="">智能电视a>
    319.                                                 <a href="">教育电视a>
    320.                                                 <a href="">OLED电视a>
    321.                                                 <a href="">智慧幕a>
    322.                                                 <a href="">4k超清电视a>
    323.                                                 <a href="">55英寸a>
    324.                                                 <a href="">65英寸a>
    325.                                                 <a href="">电视配件a>
    326.                                             dd>
    327.                                         dl>                                                          
    328.  
    329.                                         <dl>
    330.                                             <dt><a href="">洗衣机 >a>dt>
    331.                                             <dd>
    332.                                                 <a href="">超薄电视a>
    333.                                                 <a href="">全面屏电视a>
    334.                                                 <a href="">智能电视a>
    335.                                                 <a href="">教育电视a>
    336.                                                 <a href="">OLED电视a>
    337.                                                 <a href="">智慧幕a>
    338.                                                 <a href="">4k超清电视a>
    339.                                                 <a href="">55英寸a>
    340.                                                 <a href="">65英寸a>
    341.                                                 <a href="">电视配件a>
    342.                                             dd>
    343.                                         dl>
    344.  
    345.                                         <dl>
    346.                                             <dt><a href="">生活电器 >a>dt>
    347.                                             <dd>
    348.                                                 <a href="">超薄电视a>
    349.                                                 <a href="">全面屏电视a>
    350.                                                 <a href="">智能电视a>
    351.                                                 <a href="">教育电视a>
    352.                                                 <a href="">OLED电视a>
    353.                                                 <a href="">智慧幕a>
    354.                                                 <a href="">4k超清电视a>
    355.                                                 <a href="">55英寸a>
    356.                                                 <a href="">65英寸a>
    357.                                                 <a href="">电视配件a>
    358.                                                 <a href="">油烟机a>
    359.                                                 <a href="">电力锅a>
    360.                                             dd>
    361.                                         dl>
    362.  
    363.                                         <dl>
    364.                                             <dt><a href="">空调 >a>dt>
    365.                                             <dd>
    366.                                                 <a href="">超薄电视a>
    367.                                                 <a href="">全面屏电视a>
    368.                                                 <a href="">智能电视a>
    369.                                                 <a href="">教育电视a>
    370.                                                 <a href="">OLED电视a>
    371.                                                 <a href="">智慧幕a>
    372.                                                 <a href="">4k超清电视a>
    373.                                                 <a href="">55英寸a>
    374.                                                 <a href="">65英寸a>
    375.                                                 <a href="">电视配件a>
    376.                                             dd>
    377.                                         dl>
    378.  
    379.                                         <dl>
    380.                                             <dt><a href="">空调 >a>dt>
    381.                                             <dd>
    382.                                                 <a href="">超薄电视a>
    383.                                                 <a href="">全面屏电视a>
    384.                                                 <a href="">智能电视a>
    385.                                                 <a href="">教育电视a>
    386.                                                 <a href="">OLED电视a>
    387.                                                 <a href="">智慧幕a>
    388.                                                 <a href="">4k超清电视a>
    389.                                                 <a href="">55英寸a>
    390.                                                 <a href="">65英寸a>
    391.                                                 <a href="">电视配件a>
    392.                                             dd>
    393.                                         dl>
    394.  
    395.                                         <dl>
    396.                                             <dt><a href="">空调 >a>dt>
    397.                                             <dd>
    398.                                                 <a href="">超薄电视a>
    399.                                                 <a href="">全面屏电视a>
    400.                                                 <a href="">智能电视a>
    401.                                                 <a href="">教育电视a>
    402.                                                 <a href="">OLED电视a>
    403.                                                 <a href="">智慧幕a>
    404.                                                 <a href="">4k超清电视a>
    405.                                                 <a href="">55英寸a>
    406.                                                 <a href="">65英寸a>
    407.                                                 <a href="">电视配件a>
    408.                                             dd>
    409.                                         dl>
    410.                                     div>
    411.                                 div>
    412.                                 
    413.                                 <div class="ad-picture">
    414.                                     <div class="mm">
    415.                                         <a href="#"><img src="./img/ad1.jpg" alt="">a>
    416.                                         <a href="#"><img src="./img/ad2.jpg" alt="">a>
    417.                                         <a href="#"><img src="./img/ad3.jpg" alt="">a>
    418.                                         <a href="#"><img src="./img/ad4.jpg" alt="">a>
    419.                                         <a href="#"><img src="./img/ad5.jpg" alt="">a>
    420.                                         <a href="#"><img src="./img/ad6.jpg" alt="">a>
    421.                                         <a href="#"><img src="./img/ad7.jpg" alt="">a>
    422.                                         <a href="#"><img src="./img/ad8.jpg" alt="">a>
    423.                                     div>
    424.                                     <div class="ss">
    425.                                         <a href=""><img src="./img/add1.webp" alt="">a>
    426.                                         <a href=""><img src="./img/add2.jpg" alt="">a>
    427.                                     div>
    428.                                 div>
    429.                             li>
    430.                         ul>
    431.                     li>
    432.  
    433.                     <li class="item">
    434.                         <a href="#">电脑a><span class='line'>/span><a href="#">办公a>
    435.                         <ul class="subnav">
    436.                             <li>
    437.                                 
    438.                                 <div class="goods-detailed">
    439.                                     
    440.                                     <div class="goods-label">
    441.                                         <p>家电馆  >p>
    442.                                         <p>家电专卖店  >p>
    443.                                         <p>家电服务  >p>
    444.                                         <p>企业采购  >p>
    445.                                         <p>商用电器  >p>
    446.                                         <p>以旧换新  >p>
    447.                                     div>
    448.                                     
    449.                                     <div class="goods">
    450.                                         <dl>
    451.                                             <dt><a href="">电视 >a>dt>
    452.                                             <dd>
    453.                                                 <a href="">超薄电视a>
    454.                                                 <a href="">全面屏电视a>
    455.                                                 <a href="">智能电视a>
    456.                                                 <a href="">教育电视a>
    457.                                                 <a href="">OLED电视a>
    458.                                                 <a href="">智慧幕a>
    459.                                                 <a href="">4k超清电视a>
    460.                                                 <a href="">55英寸a>
    461.                                                 <a href="">65英寸a>
    462.                                                 <a href="">电视配件a>
    463.                                             dd>
    464.                                         dl>
    465.                                         
    466.                                         <dl>
    467.                                             <dt><a href="">空调 >a>dt>
    468.                                             <dd>
    469.                                                 <a href="">超薄电视a>
    470.                                                 <a href="">全面屏电视a>
    471.                                                 <a href="">智能电视a>
    472.                                                 <a href="">教育电视a>
    473.                                                 <a href="">OLED电视a>
    474.                                                 <a href="">智慧幕a>
    475.                                                 <a href="">4k超清电视a>
    476.                                                 <a href="">55英寸a>
    477.                                                 <a href="">65英寸a>
    478.                                                 <a href="">电视配件a>
    479.                                             dd>
    480.                                         dl>
    481.  
    482.                                         <dl>
    483.                                             <dt><a href="">洗衣机 >a>dt>
    484.                                             <dd>
    485.                                                 <a href="">超薄电视a>
    486.                                                 <a href="">全面屏电视a>
    487.                                                 <a href="">智能电视a>
    488.                                                 <a href="">教育电视a>
    489.                                                 <a href="">OLED电视a>
    490.                                                 <a href="">智慧幕a>
    491.                                                 <a href="">4k超清电视a>
    492.                                                 <a href="">55英寸a>
    493.                                                 <a href="">65英寸a>
    494.                                                 <a href="">电视配件a>
    495.                                             dd>
    496.                                         dl>
    497.  
    498.                                         <dl>
    499.                                             <dt><a href="">空调 >a>dt>
    500.                                             <dd>
    501.                                                 <a href="">超薄电视a>
    502.                                                 <a href="">全面屏电视a>
    503.                                                 <a href="">智能电视a>
    504.                                                 <a href="">教育电视a>
    505.                                                 <a href="">OLED电视a>
    506.                                                 <a href="">智慧幕a>
    507.                                                 <a href="">4k超清电视a>
    508.                                                 <a href="">55英寸a>
    509.                                                 <a href="">65英寸a>
    510.                                                 <a href="">电视配件a>
    511.                                             dd>
    512.                                         dl>
    513.  
    514.                                         <dl>
    515.                                             <dt><a href="">空调 >a>dt>
    516.                                             <dd>
    517.                                                 <a href="">超薄电视a>
    518.                                                 <a href="">全面屏电视a>
    519.                                                 <a href="">智能电视a>
    520.                                                 <a href="">教育电视a>
    521.                                                 <a href="">OLED电视a>
    522.                                                 <a href="">智慧幕a>
    523.                                                 <a href="">4k超清电视a>
    524.                                                 <a href="">55英寸a>
    525.                                                 <a href="">65英寸a>
    526.                                                 <a href="">电视配件a>
    527.                                             dd>
    528.                                         dl>
    529.  
    530.                                         <dl>
    531.                                             <dt><a href="">空调 >a>dt>
    532.                                             <dd>
    533.                                                 <a href="">超薄电视a>
    534.                                                 <a href="">全面屏电视a>
    535.                                                 <a href="">智能电视a>
    536.                                                 <a href="">教育电视a>
    537.                                                 <a href="">OLED电视a>
    538.                                                 <a href="">智慧幕a>
    539.                                                 <a href="">4k超清电视a>
    540.                                                 <a href="">55英寸a>
    541.                                                 <a href="">65英寸a>
    542.                                                 <a href="">电视配件a>
    543.                                             dd>
    544.                                         dl>
    545.                                     div>
    546.                                 div>
    547.                                 
    548.                                 <div class="ad-picture">
    549.                                     <div class="mm">
    550.                                         <a href="#"><img src="./img/ad1.jpg" alt="">a>
    551.                                         <a href="#"><img src="./img/ad2.jpg" alt="">a>
    552.                                         <a href="#"><img src="./img/ad3.jpg" alt="">a>
    553.                                         <a href="#"><img src="./img/ad4.jpg" alt="">a>
    554.                                         <a href="#"><img src="./img/ad5.jpg" alt="">a>
    555.                                         <a href="#"><img src="./img/ad6.jpg" alt="">a>
    556.                                         <a href="#"><img src="./img/ad7.jpg" alt="">a>
    557.                                         <a href="#"><img src="./img/ad8.jpg" alt="">a>
    558.                                     div>
    559.                                     <div class="ss">
    560.                                         <a href=""><img src="./img/add1.webp" alt="">a>
    561.                                         <a href=""><img src="./img/add2.jpg" alt="">a>
    562.                                     div>
    563.                                 div>
    564.                             li>
    565.                         ul>
    566.                     li>

    总结

    以上就是本次项目的全部内容，需要交流或者获取代码请关注微信公众号：coding加油站获取

  • 相关阅读:
    VSCode上手指南
    Qt多线程http下载器之三：文件下载异常的处理
    Workerman开启ssl方法如下
    java中ServiceLoader.load 没有加载出来实现类
    小鹏汽车在滴滴上眺望远方
    springboot整合Mongodb
    [Kettle] Excel输入
    【毕业设计】单片机与NBIOT通信模块 - 单片机 物联网 stm32
    Mybatis获取自增主键
    Comparable比较器写法&ClassCastExcption类转换异常
  • 原文地址：https://blog.csdn.net/pandas23/article/details/126413470