京东样式

<!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" >
<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" /></a>
<a href="#"><img src="img/mess2.png" /></a>
<a href="#"><img src="img/mess3.png" /></a>
<a href="#"><img src="img/mess4.png" /></a>
<a href="#"><img src="img/mess5.png" /></a>

</div>

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

时间: 2024-08-04 13:32:15

京东样式的相关文章

微信小程序--仿京东UI样式顶部导航栏

我们先来看看京东的效果 分析 上端导航栏可以放置多个分类,可滑动 点击导航栏最右端按钮可以查看所有分类,同时背景模糊 内容部分右拉跳转到另外的分类 点击分类时导航栏的滑动部分自动滑动到合适的位置 我的实现 代码展示: js /** * categoryView.js - 分类页面 */ var fakeData = require('../../common/fakeData.js') Page( { data: { categories: ['全部'], currentTab: 0, scro

京东首页样式分析.

开始学CSS, 一点点分析: 从这条简单的东西开始: 1, 是一条灰色的条, 贯穿左右, 直接一个div, id为shortcut, css对应: #shortcut { border-bottom: 1px solid #ddd; background-color: #e3e4e5; } 高度, 起另一个div, class为w, 限定了高度, 跟行高, 颜色. #shortcut .w { height: 30px; line-height: 30px; color: #999; } 2.

模仿京东淘宝的物流跟踪模板样式

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no"> <style> bo

浅谈android中仅仅使用一个TextView实现高仿京东,淘宝各种倒计时

今天给大家带来的是仅仅使用一个TextView实现一个高仿京东.淘宝.唯品会等各种电商APP的活动倒计时.最近公司一直加班也没来得及时间去整理,今天难得休息想把这个分享给大家,只求共同学习,以及自己后续的复习.为什么会想到使用一个TextView来实现呢?因为最近公司在做一些优化的工作,其中就有一个倒计时样式,原来开发的这个控件的同事使用了多个TextView拼接在一起的,实现的代码冗余比较大,故此项目经理就说:小宏这个就交给你来优化了,并且还要保证有一定的扩展性,当时就懵逼了.不知道从何处开始

第19天:京东头部小三角制作

京东头部小三角制作方法: 1.在需要小三角的地方加入"<i><s>◇</s></i>",如下: <div class="dt">送至:北京 <i><s>◇</s></i></div> 2.设置css样式如下.dt{ position: relative; padding:0 20px 0 10px;}.dt i{ font: 400 15px/15

第18天:京东网页头部制作

一.京东页面制作开始(头部)1.浮动的盒子宽度由内容定,不需要设置宽度2.绝对定位不占位置,相对定位占位置 3.不一定是子绝父相,还可能是子绝父绝,要根据情况来定.如果是子绝父绝,那父级的父级一定是相对定位. 二.中间分割线制作 给需要竖线的地方添加空的li,每个li设置类样式,设置宽高,背景色 刚开始做的也不多,目前进度如下:

&lt;记录学习&gt;京东页面最后一天HTML以及css遇到的问题

遇到的问题及新的知识 1.< &gt表示< >号2.rgba(0,0,0,透明度) opacity:0~1:3.<a href="javascript:void(0):">js中会用到的代码4.a标签设置来绝对定位position:absolute可以设置宽高,效果和display:block一样5.h标签有优化作用,写代码时可以加上如 <div class="cate-item"> <h3><a

&lt;记录学习&gt;(前三天)京东页面各种注意点

培训学校第1到3天先学习HTML现在流行的是HTML5,目前学习的是HTML5规范.(给有基础一定的人学习)前三天学习的是京东页面的编写,和以前写的不同,页面看上去和自己写的一样,但老师讲的还是有很多不同,更加详细和细节.1.程序员的规范写法很重要,要方便别人的观看,因此注释十分重要.<注意点>2.页面的布局先要看好,分成几块,头部和尾部有很多通用的,可以写在一个css文件里.3.在用户主要访问的地方,可以写的尽可能美观,如"|"号,首部标签之间可以用<li>&

【分享】后盾网原创视频,仿京东商城(基于HDPHP框架开发,适合提高)视频教程(PHP实战)

下载地址 链接:http://pan.baidu.com/disk/home#list/path=/ 用户[email protected] 密码:redbaidu 如需要全部课程请扫描下面二维码或者关注微信公众号 redbaidu 课时:32课时 知识点:织梦(DEDECMS)万能仿站课程,从零开始,详细.系统的讲解了整套织梦万能仿站技术,内容涵盖了理论讲解.实践演示.实战操作等方面.本套教程包含两个实战案例,讲解通俗易懂,深入浅出,适合各层次水平的学员学习.目前网站建设行业,一个普通的企业站