京东页面前端作业HTMLcss

最新推荐文章于 2023-07-20 14:07:53 发布
VIP文章 最新推荐文章于 2023-07-20 14:07:53 发布
阅读量153 收藏 1
点赞数
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_72732399/article/details/130933913
版权

<!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;
        }

最低0.47元/天 解锁文章
TeaLiu
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
京东前端HTML模板
12-17
仿制京东前台模板，包括首页，注册，登录等。
京东 PC 首页 2019 改版前端总结
Yvette Lau的专栏
09-06 2334
距离上次首页改版，已有2年3个月零五天。相比上次改版对首页整体框架、开发流程的大刀阔斧（前两次改版总结传送门：2016版，2017版），这次的改版看起来显得有点像跳水——...
Web前端大学生期末大作业--京东首页
热门推荐
qq_51764014的博客
12-11 1万+
Web前端大学生期末大作业--京东首页，纯静态单网页。
京东index.html
06-19
京东首页html代码详情
京东首页-html
weixin_45939821的博客
07-20 248
【代码】京东首页-html。
HTML+CSS仿写京东页面附代码（web前端作业）
03-25
HTML+CSS仿写京东页面附代码（web前端作业）
html css 原生js实现动态京东页面
12-24
实现动态京包括轮播图，自动轮播，倒计时（秒杀模块），点击切换等功能
web前端大作业制作网上商城页面（html+css）
04-29
适合于大一大二刚学web前端的人群。可作为大作业的参考格式。 该网页我的文章中介绍过网页的效果图。想看效果图的可以先查看我的...运行效果图请查看我的文章，“web前端大作业网上商城页面“。有对该资源的详细介绍。
前端学习 html css js 算法.zip
最新发布
01-05
前端学习 html css js 算法前端学习 html css js 算法前端学习 html css js 算法 前端学习 html css js 算法前端学习 html css js 算法前端学习 html css js 算法 前端学习 html css js 算法前端学习 html css js ...
Web前端大作业html+css静态页面-掌****有限公司
09-14
对于大一新生来说，期末考试和专业结课作业可能会带来很大的压力。特别是涉及到网页设计和编写的作业，可能让人感到无从下手。例如，web实训大作业、网页期末作业、web课程与设计、网页设计等等，数量众多，要求繁杂...
仿京东前端页面
12-24
本项目为学员在后盾人学习一个月后写出的前端项目，页面采用技术有HTML、DIV+CSS、JAVASCRIPT、JQUERY等，代码规范合理，符合W3C开发标准，兼容所有主流浏览器。
简易京东网页HTML代码（HTML&JS;）
01-02
HTML课程设计（模拟京东网页 购物网站）主要功能DIV 网页框架设计 链接
web期末大作业 基于HTML+CSS+JavaScript实现的仿京东商城首页登录页源码
12-10
web期末大作业 基于HTML+CSS+JavaScript实现的仿京东商城首页登录页源码 web期末大作业 基于HTML+CSS+JavaScript实现的仿京东商城首页登录页源码 web期末大作业 基于HTML+CSS+JavaScript实现的仿京东商城首页登录页源码 web期末大作业 基于HTML+CSS+JavaScript实现的仿京东商城首页登录页源码 web期末大作业 基于HTML+CSS+JavaScript实现的仿京东商城首页登录页源码 web期末大作业 基于HTML+CSS+JavaScript实现的仿京东商城首页登录页源码 web期末大作业 基于HTML+CSS+JavaScript实现的仿京东商城首页登录页源码 web期末大作业 基于HTML+CSS+JavaScript实现的仿京东商城首页登录页源码 web期末大作业 基于HTML+CSS+JavaScript实现的仿京东商城首页登录页源码 web期末大作业 基于HTML+CSS+JavaScript实现的仿京东商城首页登录页源码
京东分类导航html
03-25
类似淘宝，京东左侧菜单分类 悬浮导航，二级导航也可以支持最右侧图片推荐。静态html,juqery实现。功能移植快。
京东HTML静态模板页面全套
02-08
包含登陆注册商品列表商品详情订单收货地址等全套模板页面
前端静态网页实战项目京东首页
静Yu的博客
12-03 4159
提供一个简单的静态网页实战项目制作京东首页
html静态页面作业——京东网购商城模板(8页) HTML+CSS+JavaScript 学生DW网页设计作业成品 HTML网页设计制作大作业
qq_524614081的博客
06-26 1778
HTML5期末大作业：京东网购网站设计——京东网购商城模板(8页) HTML+CSS+JavaScript 学生DW网页设计作业成品 HTML网页设计制作大作业 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生网页大作业
HTML期末大作业~仿京东商城模板网站(HTML+CSS+JavaScript)
七夕情人节表白网页代码100款 HTML5网页设计与制作1120款 Echarts大屏数据150款
06-23 5233
HTML期末大作业~仿京东商城(HTML+CSS+JavaScript) 这次网页主要以(HTML+CSS+JavaScript)制作登录 注册 首页 购物 商品详情 ,等多个页面~特别适合web期末作业 网页制作介绍 关于HTML期末网页制作，，大作业A+水平！！主要特色：京东首页HTML网页制作~ 作为第一次遇到html期末大作业，熬夜了好几天才做了个大概所以想纪念一下~仿京东商城，很好看。 作品(动态效果)演示 作品(静态效果)演示 登录 注册 文件目录 代码实现 一、京东商城实现 HTML
前端开发实战：实现京东购物平台的静态首页
Neekky的博客
12-07 2051
本次实战的内容是实现京东购物网页的前端页面，使用的依然是DIV+CSS布局模式。本次项目主要是为了检验自己对原生JS和jQuery的掌握程度，项目中也用到了很多CSS3的新特性。 这次使用jQuery将轮播图、下拉菜单栏，城市选项卡封装成了三个插件，使代码结构的更为模块化，提高了后期维护性。 技术栈：HTML+CSS+原生JS+jQuery+CSS3 京东首页代码GitHub地址：京东首页代码 现...
web前端大作业 html css js
03-16
Web前端大作业需要使用HTML、CSS、JS等技术来实现一个网站或者Web应用程序。HTML是网页的骨架，CSS是网页的样式，JS是网页的交互和动态效果。在大作业中，需要运用这些技术来设计和开发一个具有一定功能和美观性的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值