学习目的

本期将会学习一个京东项目，综合知识非常多。首先我们要先了解一下这个项目的知识。

1.京东项目（一）

项目名称：京东网
项目描述：京东首页公共部分的头部和尾部制作，京东首页中间部分。

项目背景

现阶段电商类网站很流行，很多同学毕业之后会进入电商类企业工作，同时电商类网站需要的技术也是较为复杂的，这里用京东电商网站复习、总结、提高前面所学布局技术。

设计目标

  • 保证浏览器 ie7及以上, 火狐, 360, safari，chrome等。
  • 熟悉CSS+DIV布局，页面的搭建工作
  • 了解常用电商类网站的布局模式
  • 为后期京东移动端做铺垫

几点思考

(1). 开发工具HBuilder 、sublime 、fireworks（ps）、各种浏览器。

(2). CSS Reset 类库,为跨浏览器兼容做准备(也可以直接运用jd网站的初始化)

normalize.css 只是一个很小的CSS文件，但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS reset，Normalize.css是一种现代的、为HTML5准备的优质替代方案。Normalize.css现在已经被用于Twitter Bootstrap、HTML5 Boilerplate、GOV.UK、Rdio、CSS Tricks 以及许许多多其他框架、工具和网站上。 你值得拥有。

  • 保护有用的浏览器默认样式而不是完全去掉它们
  • 一般化的样式：为大部分HTML元素提供
  • 修复浏览器自身的bug并保证各浏览器的一致性
  • 优化CSS可用性：用一些小技巧
  • 解释代码：用注释和详细的文档来

(3). 技术栈

HTML 结构 + CSS 布局 (因为我们目前就会这些)

(4). 低版本浏览器 单独制作一个跳转页面 (都是孩子，也舍不得打，舍不得扔)
https://h5.m.jd.com/dev/3dm8aE4LDBNMkDfcCaRxLnVQ7rqo/index.html

目录说明

要实现结构和样式相分离的设计思想。 根目录下有这4个文件（目录）。

名称 说明
css 用于存放CSS文件
images 用于存放图片
index 京东首页 HTML
js 用于后期存放javascript文件

我们还要用一个fonts文件夹

运用知识点

引入ico图标


代码：<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>

注意：
1.它不是iconfont字体哦 也不是图片。

2.位置是放到 head 标签中间。

3.后面的type=“image/x-icon” 属性可以省略。

4.为了兼容性，请将favicon.ico 这个图标放到根目录下。

转换ico图标

我们可以自己做的图片，转换为 ico图标，以便放到我们站点里面。 http://www.bitbug.net/

网站优化三大标签

SEO是由英文Search Engine Optimization缩写而来， 中文意译为“搜索引擎优化”！SEO是指通过对网站进行站内优化、网站结构调整、网站内容建设、网站代码优化等)和站外优化，从而提高网站的关键词排名以及公司产品的曝光度。 简单的说就是，把产品做好，搜索引擎就会介绍客户来。

我们现在阶段主要进行站内优化。网站优化，我们应该要懂。

网页title标题

title具有不可替代性，是我们的内页第一个重要标签，是搜索引擎了解网页的入口，和对网页主题归属的最佳判断点。

建议：

首页标题：网站名（产品名）- 网站的介绍

列如：

京东(JD.COM)-综合网购首选-正品低价、品质保障、配送及时、轻松购物！

小米商城 - 小米5s、红米Note 4、小米MIX、小米笔记本官方网站。

Description 网站说明

对于关键词的作用明显降低，但由于很多搜索引擎，仍然大量采用网页的MATA标签中描述部分作为搜索结果的“内容摘要”。 就是简要说明我们网站的主要做什么的。

我们提倡，Description作为网站的总体业务和主题概括，多采用“我们是…”“我们提供…”“×××网作为…”“电话：010…”之类语句。

京东网：

<meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" />

注意点：

  1. 描述中出现关键词，与正文内容相关，这部分内容是给人看的，所以要写的很详细，让人感兴趣， 吸引用户点击.
  2. 同样遵循简短原则，字符数含空格在内不要超过 120 个汉字。
  3. 补充在 title 和 keywords 中未能充分表述的说明.
  4. 用英文逗号 关键词1,关键词2
 <meta name="description" content="小米商城直营小米公司旗下所有产品，囊括小米手机系列小米MIX、小米Note 2，红米手机系列红米Note 4、红米4，智能硬件，配件及小米生活周边，同时提供小米客户服务及售后支持。" />

Keywords 关键字

Keywords是页面关键词，是搜索引擎关注点之一。Keywords应该限制在6～8个关键词左右，电商类网站可以多 少许。

京东网：

<meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东" />

小米网：

<meta name="keywords" content="小米,小米6,红米Note4,小米MIX,小米商城" />

顶部（快捷菜单）所用知识点

知识点 说明
通栏的盒子 不用给宽度 默认为 100%  但是加了浮动和定位的盒子需要 添加 100%
盒子居中对齐 margin: auto; 注意必须有宽度的块级元素，文字水平居中对齐是 text-align:center;
行高会继承 文字性质的，比如 颜色、文字大小、字体、行高等会继承父级元素
浮动元素、固定定位，绝对定位会模式转换 具有行内块特性，比如一行放多个，有高度和宽度，如果没有指定宽度，则会根据内容多少撑开。

logo 和搜索 header 区域所用知识点

网页布局稳定性

宽度剩余法

知识点 说明
浮动元素特性 1. 浮动可以让多个元素同一行显示 2. 浮动的元素是顶部对齐
logo优化 text-indent: -20000px; 隐藏文字， 背景图片
清除浮动 清除浮动的目的就是为了解决父亲高度为0的问题
鼠标样式 cursor: pointer; 小手 cursor: move; 四角箭头 cursor: text; 插入光标 cursor: default; 小白
不允许换行 white-space: nowrap;
nav导航栏所用知识点
名称 说明
边框底侧 border-bottom: 2px solid #ccc;
定位重点 绝对定位不占位置 相对定位占有位置
标签语义化dl dl也是块级元素 dt 是 定义标题 dd 是定义描述，dd是围绕这dt来描述的，也就是说，dd算是dt 的解释说明详细分解。
标题标签h 尽量少用h1，可以多用h2和h3等标签
页面底部所用知识点
名称 说明
绝对定位的盒子居中对齐 盒子 left 50% 然后通过 margin 负值自己的宽度一半（固定定位也是如此）
固定定位的盒子靠近版心右侧对齐

跟绝对定位的盒子居中对齐原理差不多。

left 50% 然后 margin-left 版心宽度一半。


学习目标:

  • 掌握京东中间部分制作
  • 理解BFC使用
  • 了解优雅降级和渐进增强
  • 了解CSS压缩和验证工具
    typora-copy-images-to: media

2.项目搭建

①网站标题图片

需要引入京东的字体图标:

下载下来把后缀改为ico，像这样：

或者可以去京东网站下载下来，方法上面讲过，自己去看。

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！</title><link rel="shortcut icon" href="favicon.ico"  type="image/x-icon"/>  </head><body></body>
</html>

运行效果：

②引入css样式

链接：https://pan.baidu.com/s/1GfVMA5qqlcNxMl8TL0mI-A
提取码：3hca
复制这段内容后打开百度网盘手机App，操作更方便哦。

把这个CSS文件放在你的css文件夹中。然后引用：

这个是一个标准化的CSS样式文件，专门针对浏览器的。

然后自己再引入一个base.css文件，里面只写公共样式。

最后引入一个index.css，是京东首页的css。

代码HTML：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！</title><link rel="shortcut icon" href="favicon.ico"  type="image/x-icon"/><!--normalize 里面css初始化，针对浏览器--><link rel="stylesheet"  href="css/normalize.css"/><!--base里面只写公共样式，是针对京东网页头部和底部--><link rel="stylesheet"  href="css/base.css"/><!--京东首页的css  只写首页，独有的--><link rel="stylesheet"  href="css/index.css"/></head><body></body>
</html>

做好以上工作，我们就可以开始顶部的设计了。

③京东顶部开始

首先需要首页的一张清晰图，但这个图太大，还是用百度网盘。
链接：https://pan.baidu.com/s/19tXlDYB6fmmIiJOXHRYVdA
提取码：h8c4
复制这段内容后打开百度网盘手机App，操作更方便哦。

然后，我们要使用PS量一下各个图标的大小，这里就不再赘述了。先看一下顶部的图片：

老规矩：先写结构，包括顶部一个盒子，和一个版心。
需要的图片,名字为top.png：

index.html：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！</title><link rel="shortcut icon" href="favicon.ico"  type="image/x-icon"/><!--normalize 里面css初始化，针对浏览器--><link rel="stylesheet"  href="css/normalize.css"/><!--base里面只写公共样式，是针对京东网页头部和底部--><link rel="stylesheet"  href="css/base.css"/><!--京东首页的css  只写首页，独有的--><link rel="stylesheet"  href="css/index.css"/></head><body><div class="J_event"><a href="#" class="w"></a></div></body>
</html>

base.css:

/*版心*/
.w{width: 1190px;margin: auto;
}
.fr{float: right;
}
.fl{float: left;
}/*京东顶部start*/
.J_event{height: 80px;background-color: #000000;
}
.J_event a{display: block;height: 80px;background: url(../img/top.jpg) no-repeat;
}
/*京东顶部end*/

④顶部关闭按钮
首先我们需要一个“×”的字体图标，还是去这个网站：https://icomoon.io，方法就是上一期的方法，不知道去翻一下上一期的内容。

在网站上找到这个字体图标：

index.html：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！</title><link rel="shortcut icon" href="favicon.ico"  type="image/x-icon"/><!--normalize 里面css初始化，针对浏览器--><link rel="stylesheet"  href="css/normalize.css"/><!--base里面只写公共样式，是针对京东网页头部和底部--><link rel="stylesheet"  href="css/base.css"/><!--京东首页的css  只写首页，独有的--><link rel="stylesheet"  href="css/index.css"/></head><body><div class="J_event"><a href="#" class="w"><i></i></a></div></body>
</html>

base.css:

/*版心*/
.w{width: 1190px;margin: auto;
}
.fr{float: right;
}
.fl{float: left;
}
@font-face {font-family: 'icomoon';src:  url('../fonts/icomoon.eot?6gzaw9');src:  url('../fonts/icomoon.eot?6gzaw9#iefix') format('embedded-opentype'),url('../fonts/icomoon.ttf?6gzaw9') format('truetype'),url('../fonts/icomoon.woff?6gzaw9') format('woff'),url('../fonts/icomoon.svg?6gzaw9#icomoon') format('svg');font-weight: normal;font-style: normal;}/*京东顶部start*/
.J_event{height: 80px;background-color: #000000;
}
.J_event a{display: block;height: 80px;background: url(../img/top.jpg) no-repeat;position: relative;
}
.J_event a i{width: 20px;height: 20px;background-color: pink;position: absolute;right: 0;top: 5px;font-family: "icomoon";font-style: normal;text-align: center;line-height: 20px;color: #FFFFFF;background: rgba(0,0,0,.4);
}
/*京东顶部end*/

效果为：

那么我们要加入功能，点击×，能够隐藏这个顶部，后面学习JS之后再回来完成这个功能。

⑤快捷导航栏开始
我们先做一下左边的定位图标:
index.html:


<!--快捷导航模块制作开始--><div class="shortcut"><div class="w"><ul class="fl"><li>北京</li></ul><ul class="fr"><li></li></ul></div></div><!--快捷导航模块制作结束-->

base.css:

/*快捷导航模块制作开始*/
.shortcut{height: 30px;background-color: #E3E4E5;border-bottom: 1px solid #DDDDDD;
}
/*快捷导航模块制作结束*/

index.html:别忘了去掉ul，li的一些样式，把这些写在上面，看着舒服。

li{list-style: none;
}
ul{margin: 0;padding: 0;
}

导航栏左侧是一个图标，旁边有“北京”字样。
index.html:

<!--快捷导航模块制作开始--><div class="shortcut"><div class="w"><ul class="fl"><li><i class="pos"></i>北京</li></ul><ul class="fr"><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></ul></div></div><!--快捷导航模块制作结束-->

base.css:

/*快捷导航模块制作开始*/
.shortcut{height: 30px;line-height: 30px;background-color: #E3E4E5;border-bottom: 1px solid #DDDDDD;color: #9D9D9D;font-size: 12px;
}
.shortcut a{color: #9D9D9D;font-size: 12px;text-decoration: none;
}
.shortcut a:hover{color: #c81623;
}
.pos{font-family: "icomoon";font-style: normal;font-size: 14px;color: #f10215;
}
.shortcut .fl li{margin-left: 200px;
}
.shortcut .fr li{float: left;
}
/*快捷导航模块制作结束*/

效果：

注意：
位置字体图标需要重新添加下载，覆盖之前的文件，不会的查看上一期内容。

然后，我们完善右边的内容（注意：更新字体图标库，子绝父相等知识）：
index.html:

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！</title><link rel="shortcut icon" href="favicon.ico"  type="image/x-icon"/><!--normalize 里面css初始化，针对浏览器--><link rel="stylesheet"  href="css/normalize.css"/><!--base里面只写公共样式，是针对京东网页头部和底部--><link rel="stylesheet"  href="css/base.css"/><!--京东首页的css  只写首页，独有的--><link rel="stylesheet"  href="css/index.css"/></head><body><!--京东顶部开始--><div class="J_event"><a href="#" class="w"><i></i></a></div><!--京东顶部结束--><!--快捷导航模块制作开始--><div class="shortcut"><div class="w"><ul class="fl"><li><i class="pos"></i>北京</li></ul><ul class="fr"><li><a href="#">你好，请登录&nbsp;&nbsp;</a><a href="#" class="style-red">免费注册 </a></li><li class="spacer"></li><li><a href="#">我的订单</a><li class="spacer"></li></li><li class="dropdown"><a href="#">我的京东</a><i></i><li class="spacer"></li></li><li><a href="#">京东会员</a><li class="spacer"></li></li><li><a href="#">企业采购</a><li class="spacer"></li></li><li class="dropdown"><a href="#">客户服务</a><i></i><li class="spacer"></li></li><li class="dropdown"><a href="#">网站导航</a><i></i><li class="spacer"></li></li><li><a href="#">手机京东</a></li></ul></div></div><!--快捷导航模块制作结束--></body>
</html>

base.css:

/*版心*/
.w{width: 1190px;margin: auto;
}
.fr{float: right;
}
.fl{float: left;
}
.style-red{color: #F10215!important;
}
li{list-style: none;
}
ul{margin: 0;padding: 0;
}
@font-face {font-family: 'icomoon';src:  url('../fonts/icomoon.eot?6gzaw9');src:  url('../fonts/icomoon.eot?6gzaw9#iefix') format('embedded-opentype'),url('../fonts/icomoon.ttf?6gzaw9') format('truetype'),url('../fonts/icomoon.woff?6gzaw9') format('woff'),url('../fonts/icomoon.svg?6gzaw9#icomoon') format('svg');font-weight: normal;font-style: normal;}/*京东顶部start*/
.J_event{height: 80px;background-color: #000000;
}
.J_event a{display: block;height: 80px;background: url(../img/top.jpg) no-repeat;position: relative;
}
.J_event a i{width: 20px;height: 20px;background-color: pink;position: absolute;right: 0;top: 5px;font-family: "icomoon";font-style: normal;text-align: center;line-height: 20px;color: #FFFFFF;background: rgba(0,0,0,.4);
}
/*京东顶部end*/
/*快捷导航模块制作开始*/
.shortcut{height: 30px;line-height: 30px;background-color: #E3E4E5;border-bottom: 1px solid #DDDDDD;color: #9D9D9D;font-size: 12px;
}
.shortcut a{color: #9D9D9D;font-size: 12px;text-decoration: none;
}
.shortcut a:hover{color: #c81623;
}
.pos{font-family: "icomoon";font-style: normal;font-size: 14px;color: #f10215;
}
.shortcut .fl li{margin-left: 200px;
}
.shortcut .fr li{float: left;
}
.spacer{width: 1px;height: 10px;background-color: #CCCCCC;margin: 10px 10px 0
}
.dropdown{padding-right: 15px;position: relative;
}
.dropdown i{font-family: "icomoon";font-style: normal;position: absolute;font-size: 16px;right: -1px;top: -1px;
}
/*快捷导航模块制作结束*/

导航栏效果图：

⑥header部分开始
我们要做一个手机京东的二维码：

index.html:

<li style="position: relative"><a href="#">手机京东</a><div class="erweima"><img src="img/erweima.png" alt="" /></div></li>

base.css:

.erweima{width: 60px;height: 60px;border: 1px solid #ccc;padding: 3px;position: absolute;left: -8px;top: 35px;
}

效果：

然后，我们要做一个大盒子，里面再套6个小盒子：
初级阶段：
index.html:

 <!--header部分--><div class="header"><div class="w inner">1123</div></div><!-- header部分-->

base.css:

/*header部分*/
.header{height: 140px;
}
.inner{height: 140px;background-color: pink;
}
/*header部分*/

效果：

但是，“1123”应该在左边才对，我们检查代码发现是“北京”这个盒子的高度多了一些，从而影响到了“1123”，我们在base.css中找到相应的位置把高度调一下：
base.css:

.shortcut .fl li{margin-left: 200px;height: 30px;
}

最终效果应该是这样：

⑦logo的制作
现在制作logo:

index.html:

<!--header部分--><div class="header"><div class="w inner"><!--logo部分--><div class="logo"><h1><a href="#">京东</a></h1></div><!--logo部分--></div></div><!-- header部分-->

base.css:

/*header部分*/
.header{height: 140px;
}
.inner{height: 140px;background-color: pink;position: relative;
}
.logo{width: 190px;height: 170px;position: absolute;top: -31px;left: 0;background-color: purple;
}
/*header部分*/

效果：

你会发现二维码被遮住了，说明"手机京东"的级数不够，给它提一个等级：

效果：

然后，我们要把图片放上去，html里有logo的标准写法，这是为了方便搜索引擎找到关键字：
index.html:

<!--header部分--><div class="header"><div class="w inner"><!--logo部分--><div class="logo"><h1><a href="#" title="京东网">京东</a></h1></div><!--logo部分--></div></div><!-- header部分-->

我们要把“京东”字样给移出去，但不能删，删的话搜索引擎搜索“京东”搜索不到，所以：

/*header部分*/
.header{height: 140px;
}
.inner{height: 140px;background-color: pink;position: relative;
}
.logo{width: 190px;height: 170px;position: absolute;top: -30px;left: 0;/*background-color: purple;*/
}
.logo h1{margin: 0;
}
.logo a{display: block;width: 190px;height: 170px;background: url(../img/logo.jpg) no-repeat;text-indent: -999px;overflow: hidden;
}
/*header部分*/

最终效果：

⑧三大标签的优化
具体知识上面讲过了，大家再复习一下。

然后，我们经过优化，让搜索引擎更容易搜索到，还有网页的介绍。
index.html:

<head><meta charset="utf-8" /><title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！</title><meta name="description" content="京东JD.COM-专业综合网上购物商城，销售超数万品牌，4020万种商品，囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、旅游等13大品类。京东PLUS会员，免费体验30天！京东秉承客户为先， 100％正品行货保障，提供全国联保，机打发票，专业配送，售后服务！"/><meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东"><link rel="shortcut icon" href="favicon.ico"  type="image/x-icon"/><!--normalize 里面css初始化，针对浏览器--><link rel="stylesheet"  href="css/normalize.css"/><!--base里面只写公共样式，是针对京东网页头部和底部--><link rel="stylesheet"  href="css/base.css"/><!--京东首页的css  只写首页，独有的--><link rel="stylesheet"  href="css/index.css"/></head>

⑨搜索部分制作
在这之前，我们先优化一下背景颜色和logo的立体感：
base.css:

.logo{width: 190px;height: 170px;position: absolute;top: -30px;left: 0;/*background-color: purple;*/box-shadow: 0 -12px 10px rgba(0,0,0,.2);
}

body{background-color: #F6F6F6;
}

现在我们来制作搜索框：
index.html:

<!--header部分--><div class="header"><div class="w inner"><!--logo部分--><div class="logo"><h1><a href="#" title="京东网">京东</a></h1></div><!--logo部分--><!--搜索部分--><div class="search"><input type="text" name="" id="" value="单反相机" /><button>搜索</button></div><!--搜索部分--></div></div><!-- header部分end-->

base.css:

input,button{padding: 0;/*input有默认的内外边距,要清除*/
}

.search{width: 550px;height: 35px;background-color: purple;position: absolute;top: 25px;left: 320px;
}
.search input{width: 498px;height: 33px;border: 1px solid #F10215;padding-left: 5px;outline: none;/*取消蓝色边框*/color: #989898;
}

效果图：

现在来完善它：
index.html:

<!--header部分--><div class="header"><div class="w inner"><!--logo部分--><div class="logo"><h1><a href="#" title="京东网">京东</a></h1></div><!--logo部分--><!--搜索部分--><div class="search"><input type="text" name="" id="" value="单反相机" /><button><i></i></button><em></em></div><!--搜索部分--></div></div><!-- header部分end-->

base.css:

.search{width: 550px;height: 35px;/*background-color: purple;*/position: absolute;top: 25px;left: 320px;
}
.search input{width: 493px;height: 33px;border: 1px solid #F10215;padding-left: 5px;outline: none;/*取消蓝色边框*/color: #989898;float: left;
}
.search button{width: 50px;height: 35px;background-color: #F10215;float: left;cursor: pointer;/*鼠标变成小手*/
}
.search i{font-family: "icomoon";color: #fff;font-style: normal;font-size: 16px;
}

input,button{padding: 0;/*input有默认的内外边距,要清除*/border: 0;/*清除搜索按钮的边框*/
}

效果图：

那么，搜索按钮左边还有一个相机，这是用精灵图做的。

index.html:

<!--搜索部分--><div class="search"><input type="text" name="" id="" value="单反相机" /><button><i></i></button><em></em></div><!--搜索部分-->

base.css:

.search em{position: absolute;top: 10px;right: 65px;width: 19px;height: 15px;/*background-color: blue;*/cursor: pointer;background: url(../img/sprite-search.png) no-repeat;
}
.search em:hover{background-position: -30px 0;
}

效果：

下面做一下热词搜索：
index.html:

<!--热词部分--><div class="hotwords"><a href="#" class="style-red">学生专享</a><a href="#">300减160</a><a href="#">七折返厂</a><a href="#">骑行运动</a><a href="#">家电榜单</a><a href="#">唇彩唇蜜</a><a href="#">微波炉</a><a href="#">巧克力</a><a href="#">多层保暖饭盒</a></div><!--热词部分-->

base.css:

.hotwords{position: absolute;top: 70px;left: 320px;}
.hotwords a{color: #9E9B99;font-size: 12px;
}
.hotwords a:hover{color: #F10215;
}

a{text-decoration: none;
}

效果：

⑩购物车制作
index.html:

<!--购物车--><div class="mycar"><i></i><a href="#">我的购物车</a><s>0</s></div><!--购物车-->

base.css:

.mycar{width: 188px;height: 33px;border: 1px solid #ccc;position: absolute;top: 25px;right: 100px;text-align: center;line-height: 33px;
}
.mycar a{font-size: 14px;color: #F10215;}
.mycar i{font-family: "icomoon";font-style: normal;color: #F10215;margin-right: 3px;
}
.mycar s{position: absolute;top: 5px;left: 140px;text-decoration: none;background-color: #F10215;height: 16px;line-height: 16px;font-size: 12px;padding: 0 3px;border-radius: 7px;
}

效果：

这里顺便把平板电脑大促做了：
index.html:

<!--电脑模块--><div class="computer"><a href="#"><img src="img/computer.jpg"/></a></div><!--电脑模块-->

base.css:

.computer{position: absolute;right: 0;bottom: 10px;
}

3.总结

本期学习到此结束。

前端学习从入门到高级全程记录之13 （京东项目一）相关推荐

  1. 前端学习从入门到高级全程记录之12 （CSS高级技巧）

    学习目标 本期主要学习字体,内容较少.下一期我们将做一个京东的项目,用到的知识将会非常多,非常的有综合性. 1.Web字体 字体格式 不同浏览器所支持的字体格式是不一样的,我们有必要了解一下有关字体格 ...

  2. 前端学习从入门到高级全程记录之1 （HTML基础知识）

    本次学习目标 掌握HTML的基本知识,能够写出简单的页面. 1. 开发工具 1.浏览器(chrome(谷歌浏览器),IE浏览器,火狐浏览器,QQ浏览器等等). 2.代码编辑器(sublime,HBui ...

  3. 前端学习从入门到高级全程记录之41 （PHP基础Ⅳ）

    学习目标 本期接上期内容继续学习php基础知识. HTTP 1. 概要 1.1. 定义 HTTP(HyperText Transfer Protocol,超文本传输协议)最早就是计算机与计算机之间沟通 ...

  4. 前端学习从入门到高级全程记录之16（CSS高级技巧）

    本期目标 本期我们继续学习一些CSS的高级技巧. 1.CSS W3C 统一验证工具 CssStats 是一个在线的 CSS 代码分析工具,可以分析你写的代码到底好不好,哪里出错. 网址是: http: ...

  5. 前端学习从入门到高级全程记录之8 （PS基本使用综合案例）

    本期学习目标 本期我们将学习PS的基本使用并且运用以前所学的CSS和HTML的技术来完成一个综合案例. 1.Photoshop基本使用 早在第一期我就让大家去安装PS,不知道安装了没有,没有安装的尽快 ...

  6. 前端学习从入门到高级全程记录之11 （云道页面例子后续）

    本期目标 本期学习的主要目标是:1.前几期"云道页面例子"的完善.2.CSS高级技巧的学习 1.云道页面完善 在前2期的云道案例中,我们完成了一半的布局,后面的内容需要用到定位等知 ...

  7. 前端学习从入门到高级全程记录之35（jQuery②）

    学习目标 本期继续学习jQuery,引入的jQuery文件用的还是上一期的. 1.jQuery操作样式 1.1 css操作 功能:设置或者修改样式,操作的是style属性  设置单个样式 //nam ...

  8. 前端学习从入门到高级全程记录之39 （PHP基础Ⅱ）

    学习目标 本期我们将继续学习php的相关知识,在了解了上一期的PHP的一些基本语法和方法,接下来就是实战做做小例子.如果还不会配置php的运行环境的,可以参考我的上一期内容.如果上一期内容看不懂的,可 ...

  9. 前端学习从入门到高级全程记录之45 （ajax---1）

    学习目标 本期开始我们学习Ajax. AJAX 1. 概述 Web程序最初的目的就是将信息(数据)放到公共的服务器,让所有网络用户都可以通过浏览器访问. 在此之前,我们可以通过以下几种方式让浏览器发出 ...

最新文章

  1. 700页的机器学习笔记火了！完整版开放下载
  2. C# SQL封装（一）
  3. sql语句的进化--原始篇
  4. Uboot分析（三）
  5. AcWing--2.01背包问题
  6. html实现动态多表单输入,使用javascript动态编辑多个相同的HTML表单
  7. jenkins 持续集成, 使用sbt多项目同时package
  8. 亚马逊ec2服务器上无法使用sudo执行npm命令的解决办法
  9. 2021回顾 | AI 领域十大研究趋势及必读论文
  10. 1-docker安装
  11. GTD时间管理学习心得(2)
  12. 新员工入职表_员工离职率过高，只要三步骤，就能轻松有效控制
  13. 2022高教社杯数学建模思路 - 案例：核方法(机器学习)
  14. oracle isnull使用索引,isnull（）用法总结
  15. Android系统优化实操总结
  16. 基于labview的打地鼠游戏制作
  17. AMD免驱显卡支持列表
  18. 葡聚糖修饰金纳米颗粒(Dex-AuNps)|聚环氧氯丙烷二甲胺修饰多孔磁性葡聚糖微球
  19. html访问MDB数据库,使用MDB Viewer打开和查看访问数据库 | MOS86
  20. 基于turtle生成彩虹糖棒棒糖（也可称为彩虹大饼，用python给你爱的人画个大饼吧）

热门文章

  1. python的单行注释以什么开头_python中单行注释以什么开头,
  2. Android到底凉不凉？34岁Android程序员用自己的故事告诉你
  3. Java打印流——PrintStream
  4. 【matlab】雷达成像系列 之 BP（BackProjection，后向投影) 成像算法
  5. 特殊数字符号整理 - 圆圈数字
  6. Python学习之绕圈圈题
  7. iOS 15增加更多新的小组件
  8. dede数据库的四张核心表
  9. jmeter报错 com/amazonaws/auth/AWSCredentials
  10. docker-compose 部署mysql一直重启