HTML5_京东首页样式

最新推荐文章于 2024-05-02 12:51:02 发布
最新推荐文章于 2024-05-02 12:51:02 发布
阅读量4.6k 收藏 1
点赞数
分类专栏： 善知教育笔记 文章标签： html5 善知堂 善知教育 软件培训 软件开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/itszt888/article/details/76577081
版权

通用样式：

这里写图片描述

这里写图片描述

去掉边框，里面的东西不会乱
这里写图片描述

页头：

   /*头部样式*/
#header{
    background:#f7f7f7;
}
#header>.header_inner{
    height:32px;
}
#header>.header_inner>.lf{
    line-height:32px;
}
#header>.header_inner>.lf>img{
    position:relative;
    top:-10px;

    transition:all 1s linear;
}
#header>.header_inner>.lf>img:hover{
    transform:rotate(720deg);
}

#header>.header_inner>.rt>ul>li{
    float:left;
    line-height:32px;
}
#header>.header_inner>.rt>ul>li b{
    border-left:1px solid #999;
    margin:5px;
}
#header>.header_inner>.rt>ul>:nth-child(5) i{    /*会员俱乐部*/
    padding:0 12px;
    background:url(../images/vip.jpg) no-repeat 0px 5px;
}
#header>.header_inner>.rt>ul>:nth-child(7) i{    /*企业频道*/
    padding:0 11px;
    background:url(../images/dakehu.jpg) no-repeat 0px 5px;
}
#header>.header_inner>.rt>ul>:nth-child(9) i{        /*手机京东*/
    padding:4px 7px;                        /*W128  H360*/
    background:url(../images/iconlist_2.png) no-repeat -128px -357px;
}
#header>.header_inner>.rt>ul>:nth-child(9):hover i{    /*鼠标移入手机京东*/

    background:url(../images/iconlist_2.png) no-repeat -128px -396px;
}
#header>.header_inner>.rt>ul>:nth-child(11){    /*客户服务*/
    position:relative;
    width:80px;
    text-align:center;
}
#header>.header_inner>.rt>ul>:nth-child(11):hover i{
    padding:0px 4px;
    background:url(../images/jt_down.jpg) no-repeat 0px 8px;
}
#header>.header_inner>.rt>ul>:nth-child(11) i{
    padding:0px 4px;
    background:url(../images/jt_up.jpg) no-repeat 0px 8px;
}
#header>.header_inner>.rt>ul>:nth-child(11) ul{
    position:absolute;
    top:30px;
    left:0px;
    background:#fff;
    border:1px solid #999;
    display:none;
    z-index:9999;
}
#header>.header_inner>.rt>ul>:nth-child(11):hover ul{
    display:block;
}
#header>.header_inner>.rt>ul>:nth-child(11) ul li{
    width:80px;
}

/*头部盒子搜索样式*/
#header_box:before{
    content:"";
    display:table;
}
#header_box>.header_logo{
    margin-top:8px;
    margin-bottom:8px;
    margin-right:30px;

}
#header_box>.header_search>.search_top{
    margin-top:15px;
    background:#e4393c;
    width:501px;
    height:28px;
    padding:2px;
}
#header_box>.header_search>.search_top input{
    border:none;
    width:415px;
    height:28px;
}
#header_box>.header_search>.search_top button{
    border:none;
    width:86px;
    height:28px;
    margin:0;
    padding:0px;
    background:#e4393c;
    font-size:16px;
    font-weight:600;
    color:#fff;
}
#header_box>.header_search{
    font-size:12px;
}
#header_box>.header_search p{
    padding:5px;
}
#header_box>.header_search a{
    font-size:12px;
}

页脚：

/*页脚盒子部分样式*/
#footer_box .top_box{
    text-align:center;
    margin-top:10px;
}
#footer_box:before{        /*去掉边框以后 容易出现问题 这里防止一下*/
    content:"";
    display:table;
}
#footer_box .top_box a{
    margin:5px;
}
#footer_box .footer_main{
    text-align:center;
    margin-top:10px;
}
#footer_box .footer_bottom{
    text-align:center;
    margin-top:20px;
    margin-bottom:20px;
}


/*footer部分样式*/
#footer{
    overflow:hidden;
}
#footer:before{        /*去掉边框以后 容易出现问题 这里防止一下*/
    content:"";
    display:table;
}
#footer>div{
    float:left;
    width:242px;
}
/*第一个*/
#footer>.footer_content1>div{
    position:relative;
    float:left;

    width:121px;

}
#footer>.footer_content1>div:first-child{
    height:40px;
}
#footer>.footer_content1>div p{
    width:40px;
    height:40px;
    position:absolute;
    right:10px;
    top:10px;
    background:url(../images/iconlist_2.png) no-repeat 0px -56px;
}
/*第二个*/
#footer>.footer_content2>div{
    position:relative;
    float:left;

    width:121px;

}
#footer>.footer_content2>div:first-child{
    height:40px;
}
#footer>.footer_content2>div p{
    width:40px;
    height:40px;
    position:absolute;
    right:10px;
    top:10px;
    background:url(../images/iconlist_2.png) no-repeat -49px -56px;
}
/*第三个*/
#footer>.footer_content3>div{
    position:relative;
    float:left;

    width:121px;

}
#footer>.footer_content3>div:first-child{
    height:40px;
}
#footer>.footer_content3>div p{
    width:40px;
    height:40px;
    position:absolute;
    right:10px;
    top:10px;
    background:url(../images/iconlist_2.png) no-repeat -0px -100px;
}

/*第四个*/
#footer>.footer_content4>div{
    position:relative;
    float:left;

    width:121px;

}
#footer>.footer_content4>div:first-child{
    height:40px;
}
#footer>.footer_content4>div p{
    width:40px;
    height:40px;
    position:absolute;
    right:10px;
    top:10px;
    background:url(../images/iconlist_2.png) no-repeat -49px -100px;
}

/*第五个*/
#footer>.footer_content5>div{
    position:relative;
    float:left;

    width:121px;

}
#footer>.footer_content5>div:first-child{
    height:40px;
}
#footer>.footer_content5>div p{
    width:40px;
    height:40px;
    position:absolute;
    right:10px;
    top:10px;
    background:url(../images/iconlist_2.png) no-repeat -0px -147px;
}

关于善知教育（官网：善知教育（点击进入） 微信公众号：善知技术）
地址：北京东燕郊经济技术开发区文化大厦
咨询老师郑老师 电话/微信：13315631002 QQ:1939441377
目前我们开设Java服务器Html5前端网页Android移动端PHP服务器，有全日制班有周末班;
学费优惠至8480!!!!
我们的优势：

  • 基础课程一个月免费学,全程面授;
  • 平均就业薪资10000-15000;
  • 免费重听，跨学科免费学习;
  • 5-5.5个月大容量技术授课;
  • 0学费0基础入学，海量项目实训, 弹性教学制度;
  • 大部分学生找到月薪10k以上薪资工作, 项目实训自然终止;
  • 课程全程视频录制,偶尔耽搁也不担心;
  • 学习途中随时可以无理由退费根据学生情况;
  • 灵活安排授课时间，一个科目学不会可以免费学习另一个科目;
  • 全日制班，周末班，网上授课同时进行;
  • 技术交流QQ群：198983438（加群请备注在哪里看到我们的群）在群里面随时会更新一些我们的课程视频以及开班动态

善知教育学习视频大汇总

在线答疑技术支持
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
京东首页轮播图
04-08
京东首页商品轮播图，使用了js，html，解压之后就可以使用。
手机端html实现滑动图片轮播完整代码，带透明圆点
01-13
手机端html实现滑动图片轮播完整代码，带透明圆点，找了好多，这是自己根据别人改好的代码，可完美移植至微信公众号，及基于html5开发的app中
仿京东商城html网页源码
最新发布
2401_84103344的博客
05-02 109
由于篇幅限制，小编在此截出几张知识讲解的图解=“” />由于篇幅限制，小编在此截出几张知识讲解的图解[外链图片转存中…(img-UFNgsrDY-1714625444290)][外链图片转存中…(img-jqgbDYWv-1714625444290)][外链图片转存中…(img-XZ7UVDDX-1714625444291)][外链图片转存中…(img-qhdS05he-1714625444291)][外链图片转存中…(img-9TgIlkLf-1714625444291)]本文已被。
HTML5简易版随机点名
weixin_47362311的博客
07-18 369
【代码】HTML5简易版随机点名。
基于html和vue的随机点名器
weixin_45387541的博客
05-26 1790
随机点名器：简便高效的点名工具
Canvas 画布随机变换背景色
weixin_47928433的博客
09-07 1350
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> canvas { ...
京东首页Html+css+javascript代码
04-15
用前端三语言简单实现京东首页搭建，实现了导航栏和轮播图功能，对购物网站搭建框架有了基本的了解。
京东首页web前端课设（HTML+CSS+JS）
04-10
注：本页面仿照京东首页进行开发，我的博客有效果图哦~ 效果图链接：https://blog.csdn.net/weixin_52258054/article/details/137602915?spm=1001.2014.3001.5501 本web前端课设主要用到html，css知识点和一些少量的...
jd_index.html
07-31
通过HTML5 和css样式来制作京东的前端 注释完整 页面规划合乎常理 后续后发京东项目的后端（如有侵权 请联系我删除文章）如需素材 请留言 我发你邮箱
顺丰、京东、中通、圆通快递面单模板HTML+CSS
10-26
顺丰、京东、中通、圆通快递面单模板HTML+CSS，使用html+css实现；自适应150mm、180mm、210mm宽度
模仿京东首页的源码（html+css）
08-27
仿京东首页，用的是html、css，仿京东首页，用的是html、css
HTML5实现手机客户端轮播图欢迎页面
09-30
一个简单的HTML5页面，使用fullPage.js插件做的轮播图页面，可以直接放在Android项目中的 assets 文件夹下作为app欢迎页面来使用，结构简单，替换图片就可以放入你的项目中 另外，没有积分的同学 到http://blog.csdn.net/qingchen1016/article/details/51457258 文章下面给我留言我发给你，或者任意一篇下留言都可以
html5 canvas画布随机颜色变化特效
11-06
html5 canvas画布随机颜色变化特效 html5 canvas画布随机颜色变化特效
HTML + CSS 连载 | 63 - 京东首页商品布局（上）
JingnanJia的博客
03-07 1560
刷新页面，所有的 item 全部在一行中显示了：如果有更多 item：</</</</</</</</</</</刷新页面，由于宽度的限制，每一行都会只有四个；这样也可以全部排满：但是使用伪元素的方式有可能对一些其他版本的浏览器存在兼容性的问题。我们可以给每一行的第五个元素加入一个特殊的 class</</</</</</</</</</</刷新浏览器：这样就可以实现需求的同时解决兼容性的问题。除了上面对每行最后一个元素添加特殊的 class 这种方式外，还有另一种解决方案；我们可以增加。
HTML实现随机点名
年少的勇气已经用完，剩下的就是三思而后行
11-03 8134
HTML实现随机点名
HTML和CSS实现京东首页（html和css详解）
道阻且长，行则将至。
12-20 1万+
HTML和CSS实现京东首页，效果图如下： 基本代码如下：需要源代码和素材的加Q（2997381395） <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>京东(JD.COM)-综合网购首选-正品低价、品质保障、配送及时、轻松购物！</title> <meta name="descri
简单的html5实现自动轮播,原生JS实现简单的无缝自动轮播效果
weixin_39612817的博客
06-03 262
最近在不断的加强巩固js。在学习jq和vue之后发现很多东西其实都是不明所以，有些底层的东西自己不懂，到头来也只是一昧的使用，一直在用别人的东西，对自己的成长帮助也不大。万丈高楼平地起，基础打扎实了学什么都快，而且我觉得用原生的代码写完好像自己有点小成就感的。现在记录一下今天复习的原生js无缝轮播吧。先上一张自拍镇楼，哈哈哈首先先说一下思路吧，首先任意张图片以ul的形式保存显示，上代码吧 ...
手机端html图片轮播代码,纯js+css实现手机端的轮播控件
weixin_42187944的博客
06-04 1012
纯js+css实现手机端的轮播控件1.首先是页面布局，外层一个div容器 .loop-wrap,我这里宽度设置的是100vw，这个可以根据实际情况来设置宽度大小，2.第二层有个轮播图容器 .sw-container ,3.接着是一个页面指示器.pagination下面是全部的代码@touchend.preventDefault="touchEnd($event)">@click="go(in...
HTML5实现webApp中图片轮播的效果（一）之基本使用
热门推荐
清晨
05-19 7万+
最近开始用h5做一款BBS类的webapp，做好后嵌入公司的其他几个Android或ios应用中，这差不多算是混编开发了吧 在我看来，原生app和webapp各有优缺点，原生应用赢在稳定性好、用户体验度高，而webapp则在跨平台性、灵活度方面更胜一筹，随着近几年h5的火爆，webapp也越来越受大家的关注，如果你够仔细的话，你会发现现在很多牛b的app全都采用原生+webapp的方式来开发，我觉
京东首页html下载
12-04
京东首页是电商网站京东的主要页面，网站的html代码可以通过网页下载的方式获取。首先打开浏览器，输入京东的网址，进入到京东的首页。然后在浏览器中点击右键，选择“查看页面源代码”或者“检查”选项，这样就可以在浏览器中看到京东首页的html代码了。接着可以选择“另存为”或者“复制”这些html代码，这样就可以将京东首页的html代码保存到本地电脑中。 另外，也可以通过一些网页下载工具来获取京东首页的html代码，比如可以使用Chrome浏览器的“Save PageWE”插件，或者使用一些在线html代码下载工具，如“HTML2PDF”等。 获取到京东首页的html代码之后，可以用文本编辑器打开，进行查看和编辑。这些html代码包含了京东网站首页的各种元素和内容，比如导航栏、商品展示、推荐广告等等。有了这些html代码，用户可以根据自己的需要对京东首页进行自定义和操作，比如修改页面布局、添加新的功能、定制样式等等。 总之，通过网页下载的方式可以方便地获取京东首页的html代码，让用户可以对京东网站进行更灵活的操作和定制。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值