京东样式

最新推荐文章于 2021-12-21 12:00:00 发布
最新推荐文章于 2021-12-21 12:00:00 发布
阅读量154 收藏
点赞数
文章标签： javascript 人工智能 ViewUI
原文链接：http://www.cnblogs.com/aa-bb/p/6032376.html
版权

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>京东</title>
<link rel="stylesheet" href="css/base.css" />
<link rel="stylesheet" href="css/index.css" />
<link rel="shortcut icon" href="favicon.ico"/>

</head>
<body>
<!-- 京东的头部导航nav -->
<div class="shortcut">
<div class="w">
<!--nav的left-->
<div class="fl">
<div class="dt">
送至：北京<i><s>◇</s></i>
</div>
</div>
<!--nav的right-->
<div class="fr">
<ul>
<li>
<a href="#">你好，请登录</a>
<a href="#" class="col-red">免费注册</a>
</li>

<li class="line"></li>
<li>我的订单</li>

<li class="line"></li>
<li class="fore">我的京东
<i><s>◇</s></i>
</li>

<li class="line"></li>
<li >京东会员</li>


<li class="line"></li>
<li >企业采购</li>

<li class="line"></li>
<li class="fore tel-jd">
<em class="tel"></em>手机京东
<i><s>◇</s></i>
</li>

<li class="line"></li>
<li class="fore">关注京东
<i><s>◇</s></i>
</li>

<li class="line"></li>
<li class="fore">客户服务
<i><s>◇</s></i>
</li>

<li class="line"></li>
<li class="fore">网站导航
<i><s>◇</s></i>
</li>

</ul>
</div>
</div>
</div>
<!-- 京东的头部导航nav结束 -->

<!-- 京东的Topbanner部分 -->
<div class="topbanner">
<div class="w tp">
<img src="img/banner.jpg" alt="">
<a href="javascript:;" class="close-banner"></a>
</div>
</div>
<!-- 京东的Topbanner部分end -->

<!-- 京东的TopCenter部分Begin -->
<div class="w clearfix">
<div class="logo">

<!--<a href="https://www.jd.com" target="_blank" class="jd-a" title="京东">京东</a>-->
<div class="db11">
<a href="https://www.jd.com"><img src="img/logo-201305.png" alt="图片没有加载出来"></a>
</div>
</div>
<div class="search">
<input type="text" name="" id="" value="电池" />
<button>搜索</button>

<div class="hotwords">
<a href="" class="col-red">百元神券</a>
<a href="">满199-100</a>
<a href="">599减400</a>
<a href="">买1送1</a>
<a href="">秋收季</a>
<a href="">奶粉</a>
<a href="">毛呢大衣</a>
<a href="">新品首发</a>

</div>
</div>

<div class="car">
<a href="#">我的购物车</a>
<span class="icon1"></span>
<span class="icon2">></span>
<span class="icon3">0</span>
</div>


</div>
<!-- 京东的TopCenter部分end -->

<!--nav开始-->
<div class="jd-nav" >
<div class="w">
<div class="dropdown">
<div class="dt">
<a href="#">全部商品分类</a>
</div>
<div class="dd">空着 留着</div>
</div>
<div class="navitems">
<ul>
<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 class="new"><a href="#">金融</a></li>
</ul>
</div>
<div class="bike">
<a href="#"></a>
</div>
</div>

</div>

<!--页面的底部开始-->
<div class="footer">
<div class = "fa">
<ul>
<li class="faa"><img src="img/slogen1.png"></li>
<li class="fab"><img src="img/slogen2.png"></li>
<li class="fac"><img src="img/slogen3.png"></li>
<li class="fad"><img src="img/slogen4.png"></li>
</ul>
</div>
<div class="fb">
<div class="fba">
<ul>
<dt >
<dd><font size="24">购物指南</font></dd>
<dd>购物流程</dd>
<dd>会员介绍</dd>
<dd>生活旅行/团购</dd>
<dd>常见问题</dd>
<dd>大家电</dd>
</dt>
</ul>
</div>
<div class="fbb">
<ul>
<dt >
<dd><font size="24">配送方式</font></dd>
<dd>上门自提</dd>
<dd>211限时达</dd>
<dd>配送服务查询</dd>
<dd>配送费收取标准</dd>
<dd>海外配送</dd>
</dt>
</ul>
</div>
<div class="fbc">
<ul>
<dt >
<dd><font size="24">支付方式</font></dd>
<dd>货到付款</dd>
<dd>在线支付</dd>
<dd>分期付款</dd>
<dd>邮局汇款</dd>
<dd>公司转账</dd>
</dt>
</ul>
</div>
<div class="fbd">
<ul>
<dt >
<dd><font size="24">售后服务</font></dd>
<dd>售后政策</dd>
<dd>价格保护</dd>
<dd>退款说明</dd>
<dd>返修/退换货</dd>
<dd>取消订单</dd>


</dt>
</ul>
</div>
<div class="fbe">
<ul>
<dt>
<dd><font size="24">特色服务</font></dd>
<dd>夺宝岛</dd>
<dd>DIY装机</dd>
<dd>延保服务</dd>
<dd>京东E卡</dd>
<dd>京东通信</dd>
<dd>京东JD+</dd>
</dt>
</ul>
</div>


</div>
</div>

<!--页面的底部开始-->
<div class="jd-footer">
<div class="service">
<div class="w againw">
<div class="links">
<a href="#">关于我们</a> |
<a href="#"> 联系我们</a> |
<a href="#">联系客服</a> |
<a href="#">商家入驻</a> |
<a href="#">营销中心</a> |
<a href="#">手机京东</a> |
<a href="#">友情链接</a> |
<a href="#">销售联盟</a> |
<a href="#">京东社区</a> |
<a href="#">风险监测</a> |
<a href="#">京东公益</a> |
<a href="#">English Site</a> |
<a href="#">Contact Us</a>
</div>
<div class="copyright">
京公网安备 11000002000088号 | 京ICP证070359号 | 互联网药品信息服务资格证编号(京)-经营性-2014-0008 | 新出发京零 字第大120007号
互联网出版许可证编号新出网证(京)字150号 | 出版物经营许可证 | 网络文化经营许可证京网文[2014]2148-348号 | 违法和不良信息举报电话：4006561155
Copyright © 2004 - 2016 京东JD.com 版权所有 | 消费者维权热线：4006067733
京东旗下网站：京东钱包
</div>
<div class="message">
<a href="#"><img src="img/mess.png" alt="" /></a>
<a href="#"><img src="img/mess2.png" alt="" /></a>
<a href="#"><img src="img/mess3.png" alt="" /></a>
<a href="#"><img src="img/mess4.png" alt="" /></a>
<a href="#"><img src="img/mess5.png" alt="" /></a>

</div>

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

转载于:https://www.cnblogs.com/aa-bb/p/6032376.html

weixin_30287169
关注
京东首页案例（流式布局）
yexiangCSDN的专栏
05-08 1278
一、移动端之流式布局 1. 流式布局（百分比布局） 流式布局，就是百分比布局，也称非固定像素布局 通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充 流式布局方式是移动web开发使用的比较常见的布局方式 max-width 最大宽度 （max-height 最大高度） min-width 最小宽度 （min-height 最小高度） 上面两个设置拉伸浏览器设置元素显示的最大和最小宽度 <!DOCTYPE html> <html lang
CSS实战（制作京东简易首页）
John_boom的博客
09-17 4079
项目文件夹 （站点）我们的网页都应该放到一个文件夹内。 站点-本地站点规划好页面项目文件夹 1 .首页 index.html 2 .样式 css文件夹 css文件 相同样式 （全局样式 公共样式） Base.css（基本样式） global.css (全局样式) 3.图片 images 文件 4.特效 js文件夹
京东分类树样式
11-06
京东分类树样式
多样式的京东页面
Welcome小坦克实验基地
03-10 257
  京东页面实际上是自己的一个作业，从中体会到了很多的东西，我本来在比赛中呢是做有关于硬件的但是专业是有关于网站的一些。相比较而言呢，其实不管你做什么，不认真的去做是不行的，以前一直不明白怎么才能写出包含所有电脑的分辨率呢，其实后来慢慢懂了之后才发现没有什么单独的属性，只是你考虑到了所有元素的布局问题，可能一个小小的问题就会困扰你很久，但是就是找不到自己想要的答案，尽管难也好简单也罢，代码都是一行...
042篇 移动端网页开发---流式布局（京东案例）
m0_48387335的博客
09-17 1325
目录 一、流式布局（百分比布局） 二、京东案例 2.1常用初始化样式 2.2二倍精灵图做法 2.3案例 ​ 一、流式布局（百分比布局） 流式布局，就是百分比布局，也称为非固定像素布局 通过盒子的宽度设置成百分比来根据屏幕的宽度进行伸缩，不受固定像素的限制，内容向两侧填充 流式布局方式是移动web开发使用的比较常见的布局方式 流式布局主要看的是宽度，高度可以写成固定值 max-width 最大宽度（max-height 最大高度） min-
网页布局类型
weixin_30332241的博客
04-17 138
网页可以说是网站构成的基本元素。当我们轻点鼠标，在网海中遨游，一幅幅精彩的网页会呈现在我们面前，那么，网页的精彩与否的因素是什么呢？色彩的搭配、文字的变化、图片的处理等，这些当然是不可忽略的因素，除了这些，还有一个非常重要的因素--网页的布局。下面，我们就有关网页布局谈论一下。 　　网页布局类型 　　网页布局大致可分为“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型...
JavaScript实现京东样式下拉菜单
"这篇文章主要展示了如何使用JavaScript来创建一个类似京东商城左侧导航栏的下拉菜单效果，适用于构建具有层次感的分类导航。通过给HTML元素添加适当的样式和JavaScript事件处理，实现鼠标悬停时显示下拉菜单的功能...
移动端JS实现编辑添加地址：京东样式实战
"这篇文章主要展示了如何使用JavaScript在移动端实现编辑和添加地址的功能，模拟京东的地址管理界面。文章中提供了相关的代码示例，并且提到了数据格式使用JSONP以解决跨域问题。" 在移动应用或网站开发中，用户...
京东商城样式
02-02
在IT行业中，京东商城样式是一种专门针对京东商城平台设计的视觉风格和布局方案，旨在提升用户的浏览体验，使其更加美观、易用。这种样式通常包括色彩搭配、字体选择、按钮设计、图标风格以及整体的页面布局等多个...
京东小程序源码，+截图
最新发布
05-26
京东小程序源码是一种基于微信小程序开发框架的小程序应用，它允许开发者构建与京东电商平台紧密结合的轻量级应用程序。京东作为中国领先的在线零售商，利用小程序这一技术可以为用户提供更便捷的购物体验，无需下载...
京东首页base.css
06-19
黑马程序员作业京东首页css 的header和footer代码；
京东CSS初始化及理解
zxdznyy的博客
11-15 1054
本节是从京东官网下载的部分css初始化样式，如下面的代码，都给出了相关注释。前端初学者可以参考京东的初始化样式书写，用于完善自己的代码。
css 京东 样式初始化代码
weixin_58207509的博客
12-21 468
* { margin: 0; padding: 0; } /* 倾斜文字不倾斜 */ em, i { font-style: normal; } /* 去掉小圆点 */ li { list-style: none; } img { /* border 0 照顾低版本游览器 如果图片外面包含链接会有边框问题 */ border: 0; /* 取消图片底侧有空白缝隙问题 */ vertical-align: middle; } button { /* 鼠标经过变小手 */ .
HTML5_京东首页样式
itszt888的博客
08-02 4702
通用样式：去掉边框，里面的东西不会乱 页头： /*头部样式*/ #header{ background:#f7f7f7; } #header>.header_inner{ height:32px; } #header>.header_inner>.lf{ line-height:32px; } #header>.header_inner>.lf>img{
京东登录界面html css,css制作京东登录页面 css样式，京东店面装修怎么写CSS样式？...
weixin_32204241的博客
06-07 537
京东css页面如何制作京东css页面如何制作1，熟练操作前端代码就可以埃 2，做做多练就可以，遇到解决不了的难题即使去查找资料解决。学完html+css，做京东静态网页，为啥感觉那么难学完html+css，做京东静态网页，为啥感觉那么难？？？css不够熟练，其实css并没有想象那么简单，特别是用在响应式布局跟移动端的时候，各种需要自适应水平垂直居中，还要考虑兼容性。css有些属性还是有点难度的。多...
仿京东分类页面h5的页面布局及css样式设置
zuo-yiran的博客
12-22 6443
项目中用到的分类界面要的效果类似于京东移动端的分类页面：（两侧都可滑动且互不影响） 效果如图： html代码如下：<aside class="mainport-left"> <ul class="categoryFirst"> <li class="active">柴米油盐<span></span></li> <li>柴米油盐1</li>
流式布局案例——京东网页
m0_60264901的博客
09-17 3083
文章目录前言一、京东移动端页面二、制作步骤1.页面整体框架2.注意要点总结 前言 在之前学了关于移动端的基础知识，接下来我们就需要运用这些知识来进行实际应用。 上才艺！看案例！ 一、京东移动端页面 京东移动端的页面基本就是如上图 页面有顶部的导航栏、搜索栏、主体栏里面分成三个部分进行设计。 二、制作步骤 1.页面整体框架 代码框架如图展示： 2.注意要点 我们对于移动端页面采用的是流式布局，代码如下： body { width: 100%; /* width：100%可以在3
各大门户网站全局CSS样式定义
weixin_33939843的博客
05-12 303
1.网易 body { text-align: center; font-family:"宋体", arial;margin:0; padding:0; background: #FFF; font-size:12px; color:#000;}div,form,img,ul,ol,li,dl,dt,dd {margin: 0; padding: 0; border: 0; }li{list-s...
京东base.css【初始化css】样式。。。
weixin_30718391的博客
03-07 1760
@charset "UTF-8"; /*css 初始化 */ html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img { margin:0; padding:0; } fieldset, img,input,button { border:none; paddin...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值