前端学习（417）：京东制作页面25中间部分的准备工作

引入index.css作为中部样式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>京东JD.COM官网 多快好省 只为品质生活</title><!-- 引入京东小图标 --><link rel="shortcut icon" href="favicon.ico" type="image/x-icon"><!-- 重置样式 --><link rel="stylesheet" href="./jingdongcss/normalize.css"><!-- 头部和尾部基本相同 公共样式 --><link rel="stylesheet" href="./jingdongcss/base.css"><link rel="stylesheet" href="./jingdongfont/ie7.css"><link rel="stylesheet" href="./jingdongcss/index.css"><meta name="description" content="京东JD.COM-专业综合网上购物商城，销售超数万品牌，4020万种商品，囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、旅游等13大品类。京东PLUS会员，免费体验30天！京东秉承客户为先， 100％正品行货保障，提供全国联保，机打发票，专业配送，售后服务！"/><meta name="keywords" content="网上购物，网上商城，手机，笔记本，电脑，相机，数码，手表，存储卡，京东"/>
</head>
<body><!-- 头部开始 --><header><div class="w"><a href=""><img src="./jingdongimg/header.jpg" alt=""></a></div></header><!-- 头部结束 --><!-- 快速导航栏 --><div class="shortcut"><div class="w"><ul class="fl city"><li><i class="f10"></i><a href="#">北京</a></li></ul><ul class="fr"><li><a href="#">你好，请登录</a><a href="#" class="f10">免费注册</a></li><li class="space"></li><li><a href="#">我的订单</a></li><li class="space"></li><li><a href="#">我的京东</a><i></i></li><li class="space"></li><li><a href="#">京东会员</a></li><li class="space"></li><li><a href="#">企业采购</a></li><li class="space"></li><li><a href="#">客户服务</a><i></i></li><li class="space"></li><li><a href="#">网站导航</a><i></i></li><li class="space"></li><li><a href="#" class="moblie">手机京东<img src="./jingdongimg/mobile.png" alt=""></a></li></ul></div></div><!-- 快速导航栏结束 --><!-- 中间部分 --><div class="w middle"><div class="logo"><!-- 提高权重，提高搜索引擎优化 --><h1><a href="#"></a></h1></div><!-- 搜索框 --><div class="form"><input type="text" placeholder="扫描仪"><!-- 按钮的意思，双标签 --><button><i></i></button></div><!-- 购物车 --><div class="shopCar"><i></i><a href="#" class="f10">我的购物车</a><span>0</span></div><!-- 关键字 --><div class="hotwords"><a href="#" class="f10">199减100</a><a href="#">鼠标试用</a><a href="#">农资7折</a><a href="#">低至29元</a><a href="#">抽奖赢空调</a><a href="#">记忆棉</a><a href="#">坐垫</a><a href="#">1分钱买油</a><a href="#">智能手表</a></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 class="space"></li><li><a href="#">服装城</a></li><li><a href="#">京东超市</a></li><li><a href="#">生鲜</a></li><li><a href="#">全球购</a></li><li class="space"></li><li><a href="#">京东金融</a></li></ul></div></div><!-- 中间部分结束 --><!-- 页面底部部分 --><footer><div class="service"><div class="w"><ul><li><h5>多</h5><p>品类齐全，轻松购物</p></li><li><h5>多</h5><p>品类齐全，轻松购物</p></li><li><h5>多</h5><p>品类齐全，轻松购物</p></li><li><h5>多</h5><p>品类齐全，轻松购物</p></li></ul></div></div><!-- 帮助模块 --><div class="w help"><div class="fl"><dl><dt>购物指南</dt><dd><a href="#">购物流程</a></dd><dd><a href="#">会员介绍</a></dd> <dd><a href="#">购物流程</a></dd> <dd><a href="#">购物流程</a></dd> <dd><a href="#">购物流程</a></dd><dd><a href="#">购物流程</a></dd>    </dl><dl><dt>购物指南</dt><dd><a href="#">购物流程</a></dd><dd><a href="#">会员介绍</a></dd> <dd><a href="#">购物流程</a></dd> <dd><a href="#">购物流程</a></dd> <dd><a href="#">购物流程</a></dd><dd><a href="#">购物流程</a></dd>    </dl><dl><dt>购物指南</dt><dd><a href="#">购物流程</a></dd><dd><a href="#">会员介绍</a></dd> <dd><a href="#">购物流程</a></dd> <dd><a href="#">购物流程</a></dd> <dd><a href="#">购物流程</a></dd><dd><a href="#">购物流程</a></dd>    </dl><dl><dt>购物指南</dt><dd><a href="#">购物流程</a></dd><dd><a href="#">会员介绍</a></dd> <dd><a href="#">购物流程</a></dd> <dd><a href="#">购物流程</a></dd> <dd><a href="#">购物流程</a></dd><dd><a href="#">购物流程</a></dd>    </dl><dl><dt>购物指南</dt><dd><a href="#">购物流程</a></dd><dd><a href="#">会员介绍</a></dd> <dd><a href="#">购物流程</a></dd> <dd><a href="#">购物流程</a></dd> <dd><a href="#">购物流程</a></dd><dd><a href="#">购物流程</a></dd>    </dl></div><div class="fr coverage"><h5>京东自营点歌谣小区</h5><p>京东开始向9999个社区进行自配营业服务,支持货到付款，各种方式支付和远程协助服务</p><a href="#">查看详情</a></div></div><!-- 版权部分 --><div class="w copyright"><p><a href="#">关于我们</a><span> | </span><a href="#">关于我们</a><span> | </span><a href="#">关于我们</a><span> | </span><a href="#">关于我们</a><span> | </span><a href="#">关于我们</a><span> | </span><a href="#">关于我们</a><span> | </span><a href="#">关于我们</a><span> | </span><a href="#">关于我们</a><span> | </span><a href="#">关于我们</a><span> | </span><a href="#">关于我们</a><span> | </span><a href="#">关于我们</a><span> | </span><a href="#">关于我们</a><span> | </span></p><div><p>京公网安备 11000002000088号<span>|</span>京ICP证070359号<span>|</span>互联网药品信息服务资格证编号(京)-经营性-2014-0008<span>|</span>新出发京零 字第大120007号</p><p>互联网出版许可证编号新出网证(京)字150号<span>|</span>出版物经营许可证<span>|</span>网络文化经营许可证京网文[2014]2148-348号<span>|</span>违法和不良信息举报电话：4006561155</p><p>Copyright © 2004 - 2017  京东JD.com 版权所有|消费者维权热线：4006067733经营证照京东旗下网站：京东支付|京东云</p></div><p class="font-icon"><a href="#"></a><a href="#"></a><a href="#"></a><a href="#"></a><a href="#"></a><a href="#"></a></p></div></footer><!-- 页面底部部分 -->
</body>
</html>

前端学习（417）：京东制作页面25中间部分的准备工作相关推荐

前端学习（419）：京东制作页面27左侧分类上
index.css /* 中间模块 */ .grid{height: 480px;} .grid-coll1{width: 190px;height: 100%;background-color: p ...
前端学习（418）：京东制作页面26中间模块划分
index.css /* 中间模块 */ .grid{height: 480px;} .grid-coll1{width: 190px;height: 100%;background-color: p ...
前端学习（395）：京东制作页面4自己制作icon图标
生成网址
前端学习（392）：京东制作页面1京东项目项目介绍
css重置类库
前端学习（396）：京东制作页面5三大标签优化
前端学习日记day3——制作新闻页面
1.HTML文档头部相关标记 ①<meta/>定义页面元素信息,可重复出现在<head>头部标记中,是单标记.<meta/>本身不包括任何内容,通过"名称 ...
前端学习笔记（注册页面综合案例html5）
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
前端学习-CSS京东导航栏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
前端学习（九）页面导航栏页面最基本实现
我们常见的网站,页面的最上方都有个导航栏,例如CSDN的最上方的: 那我们也做一个这样的,首先element有这个控件"el-menu",那我们就按照示例做一个样子出来,类似于这样 ...

前端学习（417）：京东制作页面25中间部分的准备工作

前端学习（417）：京东制作页面25中间部分的准备工作相关推荐

最新文章

热门文章