前端学习（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>

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/422536.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

前端学习（418）：京东制作页面26中间模块划分

前端学习（418）：京东制作页面26中间模块划分

index.css /* 中间模块 */ .grid{height: 480px;} .grid-coll1{width: 190px;height: 100%;background-color: pink;} .grid-coll2{width: 790px;height: 100%;background-color: skyblue;margin-left:10px;} .grid-coll3{width: 190px;height: 100%;background-color:purple;…
阅读更多...
Linux下，安装配置Weblogic

Linux下，安装配置Weblogic

Linux下&#xff0c;安装配置Weblogic2009-03-20 15:03一、安装配置JDK //如果应用不需要高版本的JDK的话&#xff0c;可以不单独安装JDK 1. 安装JDK # chmod ax jdk-1_5_0_15-linux-i586.bin # ./jdk-1_5_0_15-linux-i586.bin # mv jdk1.5.0_15 /usr/local/jdk //JDK安…
阅读更多...
php_self nginx,nginx中的PATH_INFO为什么会影响$_SERVIER['PHP_SELF']

php_self nginx,nginx中的PATH_INFO为什么会影响$_SERVIER['PHP_SELF']

发现问题&#xff1a;使用ThinkPHP3.2.2在nginx部署网站&#xff0c;设置URL_MODEL2&#xff0c;使用U方法在本地生成的链接形如:/public/index但是在部署在nginx上却出现了问题 其中的URL生成了./public/index通过追寻ThinkPHP源码在ThinkPHP.php文件中发现了如下代码:if(IS_C…
阅读更多...
前端学习（419）：京东制作页面27左侧分类上

前端学习（419）：京东制作页面27左侧分类上

index.css /* 中间模块 */ .grid{height: 480px;} .grid-coll1{width: 190px;height: 100%;background-color: pink;} .grid-coll1 ul{padding: 20px 0;} .grid-coll1 ul li{padding-left: 12px;}.grid-coll2{width: 790px;height: 100%;background-color: skyblue;margin-lef…
阅读更多...
java 树结构递归设计,java实现递归树形结构

java 树结构递归设计,java实现递归树形结构

数据结构递归树,数据结构递归算法,数据结构递归,数据结构递归运算,考研数据结构考递归,数据结构递归回溯,js递归树形数据结构,数据结构分治,递归变非递归用什么数据结构......通过函数递归调用来实现树形结构数据遍历的方法,其中递归函数体实现了打印指定结点的子结点功能。本方…
阅读更多...
解析IP地址与MAC地址

解析IP地址与MAC地址

一、IP地址　　对于IP地址&#xff0c;相信大家都很熟悉&#xff0c;即指使用TCP/IP协议指定给主机的32位地址。IP地址由用点分隔开的4个8八位组构成&#xff0c;如192.168.0.1就是一个IP地址&#xff0c;这种写法叫点分十进制格式。IP地址由网络地址和主机地址两部分组成&…
阅读更多...
梯度算法的matlab程序,基于MATLAB的梯度法源代码

梯度算法的matlab程序,基于MATLAB的梯度法源代码

话不多说&#xff0c;直接上干货。这是基于MATLAB的源代码&#xff0c;目标函数我选择了一个二维函数&#xff0c;根据自己需求&#xff0c;更改目标函数&#xff0c;初始迭代点以及收敛精度第一部分&#xff1a;目标函数 根据自己需求&#xff0c;更改目标函数&#xff01;&…
阅读更多...
UNP Chapter 22 - 信号驱动I/O

UNP Chapter 22 - 信号驱动I/O

22.1. 概述 信号驱动是指当某个描述字上发生了某个事件时&#xff0c;让内核通知进程。 这里描述的信号驱动不是真正的异步I/O。 第15章描述的非阻塞I/O同样不是异步I/O。在非阻塞I/O中&#xff0c;启动I/O操作后内核并不像真正的异步I/O那样立即返回&#xff0c;它只有在进程非…
阅读更多...
break在matlab中的用法,求助这个算法运行的时候说错误: BREAK只能在FOR或WHile使用...

break在matlab中的用法,求助这个算法运行的时候说错误: BREAK只能在FOR或WHile使用...

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼[filenamel,pathname,filterindex]uigetfile(*.*,选择图像,请选择图像)I imread(num2str(filenamel));disp(请选择添加噪声类型);disp(椒盐噪声 --1);disp(高斯噪声 --2);disp(泊松噪声 --3);disp(斑点噪声 --4);Ainput(请输入选项…
阅读更多...
matlab双重差分模型,MATLAB中ARMA模型预测差分问题

matlab双重差分模型,MATLAB中ARMA模型预测差分问题

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼这是我MATLAB预测风速的程序&#xff0c;程序不是我自己写的&#xff0c;我也是拿来参考自己的毕业作业的.每条程序旁的中文是我自己的理解&#xff0c;我也不知道对不对。程序1Xload(C:\Users\asus\Desktop\1-3.txt); 这是我的历史…
阅读更多...
[转]AS语言基础

[转]AS语言基础

┏━━━━━━━━━━━━━━━━━━┓ ┃　第一部分&#xff1a;ActionScript 3 语言基础 ┃ ┗━━━━━━━━━━━━━━━━━━┛ 第2章 ActionScript 3 语言基本元素 2.1.2 数据类型概述 简单数据类型 Boolean(布尔)、int(有符整型)、Number(浮点)、String(字符…
阅读更多...
php strpos与strrpos,PHP开发之 strpos stripos strrpos strripos的区别

php strpos与strrpos,PHP开发之 strpos stripos strrpos strripos的区别

前言在日常PHP开发中strpos stripos strrpos strripos这四个函数是会经常用到的&#xff0c;但是你又掌握了多少呢&#xff1f;在这里将着中就这4个函数做一个详细的解析。正文stripos — 查找字符串首次出现的位置(不区分大小写),应使用 运算符来测试此函数的返回值&#xff…
阅读更多...
jQuery选择元素

jQuery选择元素

1、jQuery包装的CSS选择器 $(" p a.speciaClass") 2、子选择器&#xff08;个人简单的认为&#xff1a;就是在jQuery选择器里面加上了一个">"操作符&#xff0c;再具有一新的特性&#xff09; $("ul#myList>li>a").fadeOut(); 3、…
阅读更多...
php能否缓存,PHP缓存实现

php能否缓存,PHP缓存实现

PHP缓存实现classCacheExceptionextendsException {}/*** 缓存抽象类*/abstractclassCache_Abstract {/*** 读缓存变量** param string $key 缓存下标* return mixed*/abstractpublicfunctionfetch($key);/*** 缓存变量** param string $key 缓存变量下标* param string $value…
阅读更多...
安装SQL SERVER 2008时出现了SQL SERVER 2005 Express Tool Installed 的错误

安装SQL SERVER 2008时出现了SQL SERVER 2005 Express Tool Installed 的错误

安装SQL SERVER 2008时出现了SQL SERVER 2005 Express Tool Installed 的错误&#xff0c;这种情况一般出现在系统中已安装SQL Server 2005 的情况&#xff0c;其实不需要去卸载什么&#xff0c;只要在注册表中修改一个值即可。 HKLM\Software\Microsoft\Microsoft SQL Server\…
阅读更多...
凤凰网php,凤凰网某应用sql注入漏洞_MySQL

凤凰网php,凤凰网某应用sql注入漏洞_MySQL

凤凰网某应用sql注入漏洞凤凰新闻手机app的一个api接口过滤不严&#xff0c;存在注入漏洞。注入点&#xff1a;http://api.iapps.ifeng.com/news/upgrade.json?gv4.2.0&proidifengnews&osandroid_19&screen720x1206&publishid2011&zip1&#xff0c;受影响…
阅读更多...
Multiple annotations found at this line: ---关于android string.xml %问题

Multiple annotations found at this line: ---关于android string.xml %问题

本文来源于&#xff1a;hunter的博客&#xff08;http://my.oschina.net/hunterXue/blog/15107&#xff09; Multiple annotations found at this line: - error: Multiple substitutions specified in non-positional format; did you mean to add the formatted"fals…
阅读更多...
南京php基础学习,南京玄武区php培训有哪些(学习PHP的优点有哪些)

南京php基础学习,南京玄武区php培训有哪些(学习PHP的优点有哪些)

南京玄武区php培训有哪些&#xff0c;进行选择南京php培训的时候&#xff0c;肯定要知道php培训的学习周期&#xff0c;php乱码怎么解决&#xff0c;学习PHP的优点有哪些&#xff0c;php的性质有哪些。php培训的学习周期一般都是四到五个月和Java培训周期差不多&#xff0c;不过…
阅读更多...
php额拍戏,像这种会演戏的演员，给我焊在剧组365天拍戏可以吗？

php额拍戏,像这种会演戏的演员，给我焊在剧组365天拍戏可以吗？

最近芭姐疯狂 get 到董子健的演技&#xff0c;每晚换台一边《大江大河 2》一边《流金岁月》交叉着看&#xff0c;太直观了&#xff01;《大江大河》中&#xff0c;董子健饰演的杨巡虽然戏份不及宋运辉多&#xff0c;但在有限的笔墨中&#xff0c;董子健凭借到位的演技&#xff…
阅读更多...
照相机滤镜使用，优化解码和滤镜导致的预览卡屏现象

照相机滤镜使用，优化解码和滤镜导致的预览卡屏现象

这几天看到亚瑟boy的技术连载&#xff0c;也试着做了下带滤镜特效的照相机&#xff0c;效果也出来了&#xff0c;但是发现添加滤镜特效后的预览窗口卡屏现象很严重&#xff0c;于是自己索性试着尝试修改&#xff0c;在亚瑟和其他网友的代码中基本上都是对于照相机data视频流先进…
阅读更多...
最新文章

Copyright @ 2022~2023