前端学习（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;…
阅读更多...
前端学习（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…
阅读更多...
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;它只有在进程非…
阅读更多...
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…
阅读更多...
南京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视频流先进…
阅读更多...
oracle linux6 u盘安装,U盘安装RHEL6

oracle linux6 u盘安装,U盘安装RHEL6

1)烧录ISO镜像用软碟通写入硬盘镜像rhel-server-6.5-x86_64-boot.iso&#xff0c;然后将rhel-server-6.2-x86_64-dvd.iso复制到U盘根目录备注&#xff1a;如果是烧录DVD那么就直接烧rhel-server-6.2-x86_64-dvd.iso即可&#xff0c;U盘安装linux不注意此处会发生找不到image错误…
阅读更多...
网页设计师的最佳设计工具名单出炉

网页设计师的最佳设计工具名单出炉

一个网站的基本设计是为了吸引大多数人。因此&#xff0c;要吸引更多的客户&#xff0c;他们需要运用所有可能的图案和花纹&#xff0c;创造出惊人的效果&#xff0c;体现网站自身的美感。这样&#xff0c;设计师就需要使用一些设计工具&#xff0c;以确保有更高的效率。创建3D…
阅读更多...
HDOJ1879(继续畅通工程)

HDOJ1879(继续畅通工程)

题目链接 最小生成树的题。克鲁斯卡尔算法。 View Code 1 #include <stdio.h>2 #define N 1003 #define M 50004 struct node5 {6 int a,b,d;7 }edge[M];8 int n;9 int p[N]; 10 void make_set() 11 { 12 int i; 13 for(i1;i<n;i) p[i]i; 14 } 15 int …
阅读更多...
bug是什么PHP,bug是什么

bug是什么PHP,bug是什么

在程序设计中&#xff0c;bug一词&#xff0c;是我们经常听到的&#xff0c;那么bug是什么意思&#xff0c;下面我们来总结一下。什么是bug?在IT中&#xff0c;bug一般表示程序中出现的错误&#xff0c;因为软件运行中出现错误&#xff0c;或者是硬件造成的错误&#xff0c;出…
阅读更多...
php 渐变色,段落每行渐变色文本效果

php 渐变色,段落每行渐变色文本效果

这次给大家带来段落每行渐变色文本效果&#xff0c;段落每行渐变色文本效果的注意事项有哪些&#xff0c;下面就是实战案例&#xff0c;一起来看一下。今天小编在Codepen上看到一个CSS写的效果。一个段落的每行文本是渐变效果。对于单行文本或单个词实现渐变填充效果并不是什么…
阅读更多...
SEO笔记—网页结构优化（四）

SEO笔记—网页结构优化（四）

网页结构优化是页面优化的重点之一&#xff0c;它是对网页内容布局的规划&#xff0c;合理的网页结构能够有效地提高用户体验和搜索引擎的友好性。网页主要包含导航栏、栏目以及正文三部分组成&#xff0c;对网页结构的主要也是围绕这三部分进行的。 1、页面重要区域分布规律 搜…
阅读更多...
linux下spi有哪些函数,linux下怎么快速的使用 SPI 驱动。

linux下spi有哪些函数,linux下怎么快速的使用 SPI 驱动。

ek_spi_devices 数组就在本文件内。/** SPI devices.*/static struct spi_board_info ek_spi_devices[] {#if !(defined(CONFIG_MMC_ATMELMCI) || defined(CONFIG_MMC_AT91)){/* DataFlash chip */.modalias "mtd_dataflash",.chip_select 1,.max_speed_hz 15 * 100…
阅读更多...
SQL 查询横表变竖表

SQL 查询横表变竖表

首先是三张表&#xff0c; CNo对应的是课程&#xff0c;在这里我就粘贴了。 主表 人名表 按照常规查询 SELECT s.SName, c.CName,s2.SCgrade FROM S s INNER JOIN SC s2 ON s2.SNo s.SNo INNER JOIN C c ON c.CNo s2.CNo 那么结果是这样的 但是这是横表 不是我想…
阅读更多...
东芝笔记本linux系统安装驱动,笔记本驱动,详细教您东芝笔记本无线网卡驱动怎么安装...

东芝笔记本linux系统安装驱动,笔记本驱动,详细教您东芝笔记本无线网卡驱动怎么安装...

在品牌的笔记本电脑中&#xff0c;使用东芝笔记本的用户都知道&#xff0c;东芝笔记本电脑具有十分鲜明的特色&#xff0c;其产品十分注重细节与工艺&#xff0c;为用户带去了不错的使用体验。那么如果要下载安装无线网卡驱动&#xff0c;该怎么操作呢&#xff1f;下面&#xf…
阅读更多...
asp.net页面绑定数据的方式-----未完待续

asp.net页面绑定数据的方式-----未完待续

**方式一 **方式二转载于:https://www.cnblogs.com/wgx0428/archive/2012/05/10/2493953.html
阅读更多...
红帽企业版linux 7.3,红帽推企业Linux 7.3 新功能特性一览

红帽企业版linux 7.3,红帽推企业Linux 7.3 新功能特性一览

原标题&#xff1a;红帽推企业Linux 7.3 新功能特性一览【IT168 云计算】日前红帽宣布推出企业Linux 7.3版本&#xff0c;作为Linux平台的最新版本&#xff0c;红帽方面透漏本次更新的版本在网络与存储功能两方面做到了强化。同时&#xff0c;该版本还引入了关于Linux容器和物联…
阅读更多...
Android游戏开发系统控件-Dialog

Android游戏开发系统控件-Dialog

Android游戏开发系统控件-Dialog Dialog(对话框)在Android应用开发中经常用到&#xff0c;下面是学习《Android游戏编程从零开始》一书&#xff0c;关于Dialog的初步学习。 创建项目&#xff1a;DialogProject 作者&#xff1a;wwj 日期&#xff1a;2012/5/13 功能&#xff1a…
阅读更多...
步进电机编写单4拍或4-8拍方式的汇编或c语言控制程序.,基于SCM和PLC的两种步进电机控制方法...

步进电机编写单4拍或4-8拍方式的汇编或c语言控制程序.,基于SCM和PLC的两种步进电机控制方法...

引 言步进电机位移与输入脉冲信号数相对应&#xff0c;精度高、响应特性好、可靠性高、速度可在较宽范围内平滑调节&#xff0c;是控制系统中一种重要的自动化执行元件。SCM(Single Chip Microcomputer&#xff0c;单片机)是把组成微型计算机的中央处理器、存储器、输入输出接口…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023