优点：通俗易懂，书写方便

缺点：添加许多无意义的标签，结构化较差。我只能说，w3c你推荐的方法我不接受，你不值得拥有。。。

###父级添加overflow属性方法

可以通过触发BFC的方式，可以实现清除浮动效果。（BFC后面讲解）

~~~css可以给父级添加：overflow为hidden|auto|scroll都可以实现。~~~优点：代码简洁

缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

###使用after伪元素清除浮动

**:after方式为空元素的升级版，好处是不用单独加标签了**

使用方法：

```css.clearfix:after{content:"";display:block;height:0;clear:both;visibility:hidden;}

.clearfix{*zoom:1;}/*IE6、7专有*/```

优点：符合闭合浮动思想结构语义化正确

缺点：由于IE6-7不支持:after，使用zoom:1触发hasLayout。

代表网站：百度、淘宝网、网易等

注意：content:""尽量不带点

###使用before和after双伪元素清除浮动

```css.clearfix:before,.clearfix:after{content:"";display:table;/*这句话可以出发BFCBFC可以清除浮动,BFC我们后面讲*/}.clearfix:after{clear:both;}.clearfix{*zoom:1;}```

优点：代码更简洁

代表网站：小米、腾讯等

##Photoshop基本使用

##PS界面组成：

ctrl+r显示隐藏标尺右击标尺---把里面的单位一律改为像素

ctrl+d取消选区

菜单栏、选项栏、工具栏、浮动面板（拖拽名称，可单独操作面板）、绘图窗口窗口菜单，可显示隐藏所有面板

工作区：（新建）

调整浮动面板

##图层操作(重点)

图层面板快捷键F7其实图层就是一张张透明的纸可以实现叠加问题。

图层选择：使用移动工具V

1、图层缩览图判断

2、按住CTRL,在目标图像上单击

3、将光标放置在目标图像上右键，选择图层名称

图层面板中加选图层：

1、按SHIFT，单击另一目标图层中间所有图层被选中

2、按CTRL，单击另一目标图层只选中目标图层

复制图层：选中目标图层后（移动工具状态下）

1、按ALT拖拽图像

2、CTRL+J（重合）

案例：摆放一个自行车

##图层编组

选中目标图层，CTRL+G

取消编组：CTRL+SHIFT+G

双击图层名称可重新命名

双击组名称，可命名组

移动工具V选择组或图层时，需设置选项栏


##图层上下位置移动

1、选中目标图层，在图层面拖拽

2、CTRL+]向上移动图层CTRL+[向下移动图层

3、CTRL+SHIFT+]图层置顶CTRL+SHIFT+[图层置底

移动选区或图像时：

移动过程中，没释放鼠标，按住SHIFT，可同一水平线、同一垂线、45度移动。

ps中的撤销操作是：

ctrl+z撤销一步

ctrl+alt+z撤销多步

##Photoshop切图

PS切图可以分为手动利用切片切图以及利用PS的插件快速切图

###切片工具


1.利用切片工具手动划出

2.图层菜单---新建基于图层的切片

3.利用标尺基于参考线的切片（选择切片工具）


4.先选个一个整个的切片，切片选择工具--属性面板中有“划分”--可以等分数平分切图

导出切片：文件--存储为web设备所用格式

###辅助线和切片使用及清除

视图菜单--清除辅助线/清除切片

###切图插件

Cutterman是一款运行在photoshop中的插件，能够自动将你需要的图层进行输出，以替代传统的手工"导出web所用格式"以及使用切片工具进行挨个切图的繁琐流程。它支持各种各样的图片尺寸、格式、形态输出，方便你在pc、ios、Android等端上使用。它不需要你记住一堆的语法、规则，纯点击操作，方便、快捷，易于上手。

注意：cutterman插件要求你的ps必须是完整版，不能是绿色版，所以大家需要从新安装完整版本。

#项目案例：云道页面

案例练习目的是总结以前的css和html

还有ps的使用。

制作步骤：

#定位(position)

background-position背景定位

如果，说浮动，关键在一个“浮”字上面，那么我们的定位，关键在于一个“位”上。

PS:定位是我们CSS算是数一数二难点的了，但是，你务必要学好它，我们CSS离不开定位，特别是后面的js特效，天天和定位打交道。不要抵触它，反而要爱上它，它可以让我们工作更加轻松哦！

##为什么要用定位？

那么定位，最长运用的场景再那里呢？来看几幅图片，你一定会有感悟！

第一幅图，小黄色块可以再图片上移动：

第二幅图，左右箭头压住图片：

第三幅图,hot再盒子外面多出一块，更加突出：

以上三个小地方，如果用标准流或者浮动，实现会比较复杂或者难以实现，此时我们用定位来做，justsoso！

##元素的定位属性

元素的定位属性主要包括定位模式和边偏移两部分。

1、边偏移

|边偏移属性|描述||------|-----------------------||top|顶端偏移量，定义元素相对于其父元素上边线的距离||bottom|底部偏移量，定义元素相对于其父元素下边线的距离||left|左侧偏移量，定义元素相对于其父元素左边线的距离||right|右侧偏移量，定义元素相对于其父元素右边线的距离|

也就说，以后定位要和这边偏移搭配使用了，比如top:100px;left:30px;等等

2、定位模式(定位的分类)

在CSS中，position属性用于定义元素的定位模式，其基本语法格式如下：

选择器{position:属性值;}

position属性的常用值

|值|描述||--------|------------------------||static|自动定位（默认定位方式）||relative|相对定位，相对于其原文档流的位置进行定位||absolute|绝对定位，相对于其上一个已经定位的父元素进行定位||fixed|固定定位，相对于浏览器窗口进行定位|

##静态定位(static)

静态定位是所有元素的默认定位方式，当position属性的取值为static时，可以将元素定位于静态位置。所谓静态位置就是各个元素在HTML文档流中默认的位置。

上面的话翻译成白话：就是网页中所有元素都默认的是静态定位哦！其实就是标准流的特性。

在静态定位状态下，无法通过边偏移属性（top、bottom、left或right）来改变元素的位置。

PS：静态定位其实没啥可说的。

静态定位唯一的用处：就是取消定位。position:static;

##相对定位relative(自恋型)

相对定位是将元素相对于它在标准流中的位置进行定位，当position属性的取值为relative时，可以将元素定位于相对位置。

对元素设置相对定位后，可以通过边偏移属性改变元素的位置，但是它在文档流中的位置仍然保留。如下图所示，即是一个相对定位的效果展示：

1.相对定位最重要的一点是，它可以通过边偏移移动位置，但是原来的所占的位置，继续占有。2.其次，每次移动的位置，是以自己的左上角为基点移动（相对于自己来移动位置）

就是说，相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待它。（相对定位不脱标）

如果说浮动的主要目的是让多个块级元素一行显示，那么定位的主要价值就是移动位置，让盒子到我们想要的位置上去。

##绝对定位absolute(拼爹型)

~~~小笑话：

吃早饭时，老婆往儿子碗里放了两个煎蛋，儿子全给了我，还一本正经地说：“爸爸，多吃点，男人养家不容易。”

我一阵感动，刚想夸他两句。

儿子接着说：“以后全靠你让我拼爹了！”~~~

[注意]如果文档可滚动，绝对定位元素会随着它滚动，因为元素最终会相对于正常流的某一部分定位。

当position属性的取值为absolute时，可以将元素的定位模式设置为绝对定位。

注意：绝对定位最重要的一点是，它可以通过边偏移移动位置，但是它完全脱标，完全不占位置。

###父级没有定位

若所有父元素都没有定位，以浏览器当前屏幕为准对齐(document文档)。

###父级有定位

绝对定位是将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。

###子绝父相

这个“子绝父相”太重要了，是我们学习定位的口诀，时时刻刻记住的。

这句话的意思是子级是绝对定位的话，父级要用相对定位。

首先，我们说下，绝对定位是将元素依据最近的已经定位绝对、固定或相对定位）的父元素（祖先）进行定位。

就是说，子级是绝对定位，父亲只要是定位即可（不管父亲是绝对定位还是相对定位，甚至是固定定位都可以），就是说，子绝父绝，子绝父相都是正确的。

但是，在我们网页布局的时候，最常说的子绝父相是怎么来的呢？请看如下图：

所以，我们可以得出如下结论：

因为子级是绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方。

父盒子布局时，需要占有位置，因此父亲只能是相对定位.

这就是子绝父相的由来。

##绝对定位的盒子水平/垂直居中

普通的盒子是左右margin改为auto就可，但是对于绝对定位就无效了

定位的盒子也可以水平或者垂直居中，有一个算法。

1.首先left50%父盒子的一半大小

2.然后走自己外边距负的一半值就可以了margin-left。

##固定定位fixed(认死理型)

固定定位是绝对定位的一种特殊形式，类似于正方形是一个特殊的矩形。它以浏览器窗口作为参照物来定义网页元素。当position属性的取值为fixed时，即可将元素的定位模式设置为固定定位。

当对元素设置固定定位后，它将脱离标准文档流的控制，始终依据浏览器窗口来定义自己的显示位置。不管浏览器滚动条如何滚动也不管浏览器窗口的大小如何变化，该元素都会始终显示在浏览器窗口的固定位置。

固定定位有两点：

1.固定定位的元素跟父亲没有任何关系，只认浏览器。2.固定定位完全脱标，不占有位置，不随着滚动条滚动。

记忆法：就类似于孙猴子，无父无母，好不容易找到一个可靠的师傅（浏览器），就听的师傅的，别的都不听。

ie6等低版本浏览器不支持固定定位。

##叠放次序（z-index）

当对多个元素同时设置定位时，定位元素之间有可能会发生重叠。

在CSS中，要想调整重叠定位元素的堆叠顺序，可以对定位元素应用z-index层叠等级属性，其取值可为正整数、负整数和0。

比如：z-index:2;font-weight:700

1.z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居上。

2.如果取值相同，则根据书写顺序，后来居上。

3.后面数字一定不能加单位。

4.只有相对定位，绝对定位，固定定位有此属性，其余标准流，浮动，静态定位都无此属性，亦不可指定此属性。

#四种定位总结

|定位模式|是否脱标占有位置|是否可以使用边偏移|移动位置基准||------------|----------|---------|----------------||静态static|不脱标，正常模式|不可以|正常模式||相对定位relative|脱标，占有位置|可以|相对自身位置移动（自恋型）||绝对定位absolute|完全脱标，不占有位置|可以|相对于定位父级移动位置（拼爹型）||固定定位fixed|完全脱标，不占有位置|可以|相对于浏览器移动位置（认死理型）|

#定位模式转换

跟浮动一样，元素添加了绝对定位和固定定位之后，元素模式也会发生转换，都转换为行内块模式，

行内块的宽度和高度跟内容有关系

**因此比如行内元素如果添加了绝对定位或者固定定位后浮动后，可以不用转换模式，直接给高度和宽度就可以了。**

#CSS高级技巧

##元素的显示与隐藏

在CSS中有三个显示和隐藏的单词比较常见，我们要区分开，他们分别是displayvisibility和overflow。

###display显示

display设置或检索对象是否及如何显示。

display:none隐藏对象与它相反的是display:block除了转换为块级元素之外，同时还有显示元素的意思。

特点：隐藏之后，不再保留位置。

###visibility可见性

设置或检索是否显示对象。

visible:对象可视

hidden:对象隐藏

特点：隐藏之后，继续保留原有位置。（停职留薪）

###overflow溢出

检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。

visible:不剪切内容也不添加滚动条。

auto:超出自动显示滚动条，不超出不显示滚动条

hidden:不显示超过对象尺寸的内容，超出的部分隐藏掉

scroll:不管超出内容否，总是显示滚动条

##CSS用户界面样式

所谓的界面样式，就是更改一些用户操作样式，比如更改用户的鼠标样式，表单轮廓等。但是比如滚动条的样式改动受到了很多浏览器的抵制，因此我们就放弃了。防止表单域拖拽

###鼠标样式cursor

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。

```htmlcursor:default小白|pointer小手|move移动|text文本```

鼠标放我身上查看效果哦：

```html

我是小白我是小手我是移动我是文本

尽量不要用hand因为火狐不支持pointerie6以上都支持的尽量用

###轮廓outline

是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

~~~cssoutline:outline-color||outline-style||outline-width~~~

但是我们都不关心可以设置多少，我们平时都是去掉的。

最直接的写法是：outline:0;或者outline:none;

```html```

###防止拖拽文本域resize

resize：none这个单词可以防止火狐谷歌等浏览器随意的拖动文本域。

右下角可以拖拽：

右下角不可以拖拽：

```html```

##vertical-align垂直对齐

以前我们讲过让带有宽度的块级元素居中对齐，是margin:0auto;

以前我们还讲过让文字居中对齐，是text-align:center;

但是我们从来没有讲过有垂直居中的属性，我们的妈妈一直很担心我们的垂直居中怎么做。

vertical-align垂直对齐，这个看上去很美好的一个属性，实际有着不可捉摸的脾气，否则我们也不会这么晚来讲解。

~~~cssvertical-align:baseline|top|middle|bottom~~~

设置或检索对象内容的垂直对其方式。

vertical-align不影响块级元素中的内容对齐，它只针对于行内元素或者行内块元素，特别是行内块元素，**通常用来控制图片/表单与文字的对齐**。


###图片、表单和文字对齐

所以我们知道，我们可以通过vertical-align控制图片和文字的垂直关系了。默认的图片会和文字基线对齐。

###去除图片底侧空白缝隙

有个很重要特性你要记住：图片或者表单等行内块元素，他的底线会和父级盒子的基线对齐。这样会造成一个问题，就是图片底侧会有一个空白缝隙。

解决的方法就是：

1.给imgvertical-align:middle|top等等。让图片不要和基线对齐。

1.给img添加display：block;转换为块级元素就不会存在问题了。

#溢出的文字隐藏

##white-space

white-space设置或检索对象内文本显示方式。通常我们使用于强制一行显示内容

normal:默认处理方式nowrap:强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行。

可以处理中文

##text-overflow文字溢出

text-overflow:clip|ellipsis

设置或检索是否使用一个省略标记（...）标示对象内文本的溢出

clip:不显示省略标记（...），而是简单的裁切

ellipsis:当对象内文本溢出时显示省略标记（...）

注意一定要首先强制一行内显示，再次和overflow属性搭配使用

#CSS精灵技术（sprite）小妖精雪碧

##精灵技术产生的背景

图所示为网页的请求原理图，当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。

然而，一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度。为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称CSSSprites、CSS雪碧）。

###精灵技术本质

简单地说，CSS精灵是一种处理网页背景图像的方式。它将一个页面涉及到的所有零星背景图像都集中到一张大图中去，然后将大图应用于网页，这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来。通常情况下，这个由很多小的背景图像合成的大图被称为精灵图（雪碧图），如下图所示为京东网站中的一个精灵图。

###精灵技术的使用

CSS精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图，就需要使用CSS的background-image、background-repeat和background-position属性进行背景定位，其中最关键的是使用background-position属性精确地定位。

###制作精灵图

CSS精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），那我们要做的，就是把小图拼合成一张大图。

大部分情况下，精灵图都是网页美工做。

~~~我们精灵图上放的都是小的装饰性质的背景图片。插入图片不能往上放。我们精灵图的宽度取决于最宽的那个背景。我们可以横向摆放也可以纵向摆放，但是每个图片之间，间隔至少隔开偶数像素合适。在我们精灵图的最低端，留一片空隙，方便我们以后添加其他精灵图。~~~

结束语：小公司，背景图片很少的情况，没有必要使用精灵技术，维护成本太高。如果是背景图片比较多，可以建议使用精灵技术。

#滑动门

先来体会下现实中的滑动门,或者你可以叫做推拉门：

##滑动门出现的背景

为了使各种特殊形状的背景能够自适应元素中文本内容的多少，出现了CSS滑动门技术。它从新的角度构建页面，使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，可用性更强。最常见于各种导航栏的滑动门。

##核心技术

核心技术就是利用CSS精灵（主要是背景位置）和盒子padding撑开宽度,以便能适应不同字数的导航栏。

一般的经典布局都是这样的：

总结：

1.a设置背景左侧，padding撑开合适宽度。2.span设置背景右侧，padding撑开合适宽度剩下由文字继续撑开宽度。3.之所以a包含span就是因为整个导航都是可以点击的。

#web字体

##字体格式

不同浏览器所支持的字体格式是不一样的，我们有必要了解一下有关字体格式的知识。

1、TureType(.ttf)格式

.ttf字体是Windows和Mac的最常见的字体，是一种RAW格式，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOSMobile、Safari4.2+；

2、OpenType(.otf)格式

.otf字体被认为是一种原始的字体格式，其内置在TureType的基础上，支持这种字体的浏览器有Firefox3.5+、Chrome4.0+、Safari3.1+、Opera10.0+、iOSMobile、Safari4.2+；

3、WebOpenFontFormat(.woff)格式

woff字体是Web字体中最佳格式，他是一个开放的TrueType/OpenType的压缩版本，同时也支持元数据包的分离，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+；

4、EmbeddedOpenType(.eot)格式

.eot字体是IE专用字体，可以从TrueType创建此格式字体，支持这种字体的浏览器有IE4+；

5、SVG(.svg)格式

.svg字体是基于SVG字体渲染的一种格式，支持这种字体的浏览器有Chrome4+、Safari3.1+、Opera10.0+、iOSMobileSafari3.2+；

了解了上面的知识后，我们就需要为不同的浏览器准备不同格式的字体，通常我们会通过字体生成工具帮我们生成各种格式的字体，因此无需过于在意字体格式间的区别差异。

#字体图标

##字体图标优点

```可以做出跟图片一样可以做的事情,改变透明度、旋转度，等..但是本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果等等...本身体积更小，但携带的信息并没有削减。几乎支持所有的浏览器移动端设备必备良药...```

##字体图标使用流程

总体来说，字体图标按照如下流程：

###设计字体图标

假如图标是我们公司单独设计，那就需要第一步了，这个属于UI设计人员的工作，他们在illustrator或Sketch这类矢量图形软件里创建icon图标，比如下图：

之后保存为svg格式，然后给我们前端人员就好了。

其实第一步，我们不需要关心，只需要给我们这些图标就可以了，如果图标是大众的，网上本来就有的，可以直接跳过第一步，进入第三步。

###上传生成字体包

当UI设计人员给我们svg文件的时候，我们需要转换成我们页面能使用的字体文件，而且需要生成的是兼容性的适合各个浏览器的。

**icomoon字库**

IcoMoon成立于2011年，推出的第一个自定义图标字体生成器，它允许用户选择他们所需要的图标，使它们成一字型。内容种类繁多，非常全面，唯一的遗憾是国外服务器，打开网速较慢。

**阿里iconfont字库**

这个是阿里妈妈M2UX的一个iconfont字体图标字库，包含了淘宝图标库和阿里妈妈图标库。可以使用AI制作图标上传生成。一个字，免费，免费！！

**fontello**

在线定制你自己的iconfont字体图标字库，也可以直接从GitHub下载整个图标集，该项目也是开源的。

**Font-Awesome**

这是我最喜欢的字库之一了，更新比较快。目前已经有369个图标了。

**GlyphiconHalflings**

这个字体图标可以在Bootstrap下免费使用。自带了200多个图标。

**Icons8**

提供PNG免费下载，像素大能到500PX


###下载兼容字体包

刚才上传完毕，网站会给我们把UI做的svg图片转换为我们的字体格式，然后下载下来就好了

当然，我们不需要自己专门的图标，是想网上找几个图标使用，以上2步可以直接省略了，直接到刚才的网站上找喜欢的下载使用吧。

###字体引入到HTML

得到压缩包之后，最后一步，是最重要的一步了，就是字体文件已经有了，我们需要引入到我们页面中。

1.首先把以下4个文件放入到fonts文件夹里面。通俗的做法


```css@font-face{font-family:'icomoon';src:url('fonts/icomoon.eot7kkyc2');src:url('fonts/icomoon.eot7kkyc2#iefix')format('embedded-opentype'),url('fonts/icomoon.ttf7kkyc2')format('truetype'),url('fonts/icomoon.woff7kkyc2')format('woff'),url('fonts/icomoon.svg7kkyc2#icomoon')format('svg');font-weight:normal;font-style:normal;}```

#####第二步：给盒子使用字体

```cssspan{font-family:"icomoon";}```

#####第三步：盒子里面添加结构

```cssspan::before{content:"\e900";}或者```

###追加新图标到原来库里面

如果工作中，原来的字体图标不够用了，我们需要添加新的字体图标，但是原来的不能删除，继续使用，此时我们需要这样做

把压缩包里面的selection.json从新上传，然后，选中自己想要新的图标，从新下载压缩包，替换原来文件即可。

##

#京东项目(一)

##京东项目介绍

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

##项目背景

现阶段电商类网站很流行，很多同学毕业之后会进入电商类企业工作，同时电商类网站需要的技术也是较为复杂的，这里用京东电商网站复习、总结、提高前面所学布局技术。其实，最主要的原因还是，为啥写京东？因为刘强东，赚了我们的钱，抢了我们的女神，我们也要学刘强东，赚别人的钱，抢别人..额，自己的女神。。。

##设计目标

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

##几点思考

(1).开发工具sublime、fireworks（ps）、各种浏览器(ie6.7要测看心情)

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

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

-保护有用的浏览器默认样式而不是完全去掉它们

-一般化的样式：为大部分HTML元素提供

-修复浏览器自身的bug并保证各浏览器的一致性

-优化CSS可用性：用一些小技巧

-解释代码：用注释和详细的文档来```

(3).技术栈

```HTML结构+CSS布局(因为我们就会这些。。。嘻嘻)```

(4).低版本浏览器单独制作一个跳转页面(都是孩子，也舍不得打，舍不得扔)

##目录说明

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

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

##运用知识点

###引入ico图标

1.她(它)不是iconfont字体哦也不是图片。

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

3.后面的type="image/x-icon"属性可以省略。（我相信你也愿意省略。）

4.为了兼容性，请将favicon.ico这个图标放到根目录下。（我们就不要任性了，听话放位置，省很多麻烦。。你好，我也好）

###转换ico图标

###网站优化三大标签

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

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

####网页title标题

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

建议：

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

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

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

####Description网站说明

京东网：

``````

注意点：

``````

####Keywords关键字

``````

小米网：

``````

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

|知识点|说明||-------------------|----------------------------------------||通栏的盒子|不用给宽度默认为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:2pxsolid#ccc;||定位重点|绝对定位不占位置相对定位占有位置||标签语义化dl|dl也是块级元素dt是定义标题dd是定义描述，dd是围绕这dt来描述的，也就是说，dd算是dt的解释说明详细分解。||标题标签h|尽量少用h1，可以多用h2和h3等标签|

##页面底部所用知识点

|名称|说明||-----------|----------------------------------------||绝对定位的盒子居中对齐|盒子left50%然后通过margin负值自己的宽度一半（固定定位也是如此）|

###固定定位的盒子靠近版心右侧对齐

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

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

学习目标:

-掌握京东中间部分制作

-理解BFC使用

-了解优雅降级和渐进增强

-了解CSS压缩和验证工具

typora-copy-images-to:media

------

#京东项目(二)

##焦点图部分所用知识点

|名称|说明||----|--------------------------------||圆角矩形|border-radius:左上角右上角右下角左下角。|

负值自己的宽度一半（固定定位也是如此）

##背景半透明

1.强烈推荐：background:rgba(r,g,b,alpha);

r,g,b是红绿蓝的颜色，alpha是透明度的意思，取值范围是0~1之间。

2.了解ie低版本浏览器半透明

filter:Alpha(opacity=50)；//opacity值为0到100

但是此属性是盒子半透明，不是背景半透明哦，因为里面的内容也一起半透明了

因此，低版本的ie6.7浏览器，我们不需要透明了，直接采用优雅降级的做法。

background:gary;

background:rgba(0,0,0,.2);

写上两句背景，低版本ie只执行gray，其他浏览器执行半透明下面这一句。

##BFC(块级格式化上下文)

BFC(Blockformattingcontext)

直译为"块级格式化上下文"。

###元素的显示模式

我们前面讲过元素的显示模式display。

分为块级元素行内元素行内块元素，其实，它还有很多其他显示模式。

###那些元素会具有BFC的条件

不是所有的元素模式都能产生BFC，w3c规范：

display属性为block,list-item,table的元素，会产生BFC.

大家有么有发现这个三个都是用来布局最为合理的元素，因为他们就是用来可视化布局。

注意其他的，display属性，比如line等等，他们创建的是IFC，我们暂且不研究。

这个BFC有着具体的布局特性：

有宽度和高度，有外边距margin有内边距padding有边框border。

就好比，你有了练习武术的体格了。有潜力，有资质。

###什么情况下可以让元素产生BFC

以上盒子具有BFC条件了，就是说有资质了，但是怎样触发才会产生BFC，从而创造这个封闭的环境呢？

在好比，你光有资质还不行，你需要一定额外效果才能出发的武学潜力，要么你掉到悬崖下面，捡到了一本九阴真经，要么你学习葵花宝典，欲练此功必先....

同样，要给这些元素添加如下属性就可以触发BFC。

-float属性不为none

-position为absolute或fixed

-display为inline-block,table-cell,table-caption,flex,inline-flex

-overflow不为visible。

###BFC元素所具有的特性

BFC布局规则特性：

1.在BFC中，盒子从顶端开始垂直地一个接一个地排列.

2.盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻盒子的margin会发生重叠

3.在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘）。

1.BFC的区域不会与浮动盒子产生交集，而是紧贴浮动边缘。2.计算BFC的高度时，自然也会检测浮动或者定位的盒子高度。

它是一个独立的渲染区域，只有Block-levelbox参与，它规定了内部的Block-levelBox如何布局，并且与这个区域外部毫不相干。

白话文：孩子在家里愿意怎么折腾都行，但是出了家门口，你就的乖乖的，不能影响外面的任何人。

###BFC的主要用途

BFC能用来做什么？

(1)清除元素内部浮动

只要把父元素设为BFC就可以清理子元素的浮动了，最常见的用法就是在父元素上设置overflow:hidden样式，对于IE6加上zoom:1就可以了。

主要用到

```计算BFC的高度时，自然也会检测浮动或者定位的盒子高度。```

(2)解决外边距合并问题

外边距合并的问题。

```盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻盒子的margin会发生重叠```

属于同一个BFC的两个相邻盒子的margin会发生重叠，那么我们创建不属于同一个BFC，就不会发生margin重叠了。

(3)制作右侧自适应的盒子问题

```普通流体元素BFC后，为了和浮动元素不产生任何交集，顺着浮动边缘形成自己的封闭上下文```

###BFC总结

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。包括浮动，和外边距合并等等，因此，有了这个特性，我们布局的时候就不会出现意外情况了。

##优雅降级和渐进增强

什么是渐进增强（progressiveenhancement）、优雅降级（gracefuldegradation）呢？

渐进增强progressiveenhancement：

针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

类似爬山，由低出往高处爬

优雅降级gracefuldegradation：

一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

类似蹦极，由高处往低处下落

区别：渐进增强是向上兼容，优雅降级是向下兼容。

个人建议：现在互联网发展很快，连微软公司都抛弃了ie浏览器，转而支持edge这样的高版本浏览器，我们很多情况下没有必要再时刻想着低版本浏览器了，而是一开始就构建完整的效果，根据实际情况，修补低版本浏览器问题。

##浏览器前缀

|浏览器前缀|浏览器||--------|--------------------------------------||-webkit-|GoogleChrome,Safari,AndroidBrowser||-moz-|Firefox||-o-|Opera||-ms-|InternetExplorer,Edge||-khtml-|Konqueror|

后面我们会有常用的解决H5和C3的兼容解决文件，我们这里暂且不涉及。

##背景渐变

在线性渐变过程中，颜色沿着一条直线过渡：从左侧到右侧、从右侧到左侧、从顶部到底部、从底部到顶部或着沿任何任意轴。如果你曾使用过制作图件，比如说Photoshop，你对线性渐变并不会陌生。

兼容性问题很严重，我们这里之讲解线性渐变

```cssbackground:-webkit-linear-gradient(渐变的起始位置，起始颜色，结束颜色)；```

```cssbackground:-webkit-linear-gradient(渐变的起始位置，颜色位置，颜色位置....)；```

##CSSW3C统一验证工具

CssStats是一个在线的CSS代码分析工具

如果你想要更全面的，这个神奇，你值得拥有：

因为它可以检测本地文件哦！！

#HTML5新标签与特性

##文档类型设定

-document-HTML:sublime输入html:4s-XHTML:sublime输入html:xt-HTML5sublime输入html:5

##字符设定

##常用新标签

-header：定义文档的页眉头部

-nav：定义导航链接的部分

-footer：定义文档或节的页脚底部

-section：定义文档中的节（section、区段）

-aside：定义其所处内容之外的内容侧边

-datalist标签定义选项列表。请与input元素配合使用该元素

```html刘德华刘若英刘晓庆郭富城张学友郭郭```

##新增的inputtype属性值：

##常用新属性

|**属性******|**用法******|**含义******||--------------------|----------------------------------------|----------------------------------------||**placeholder******||占位符当用户输入的时候里面的文字消失删除所有文字，自动返回||**autofocus******||规定当页面加载时input元素应该自动获得焦点||**multiple******||多文件上传||**autocomplete******||规定表单是否应该启用自动完成功能有2个值，一个是on一个是offon代表记录已经输入的值1.autocomplete首先需要提交按钮
2.这个表单您必须给他名字||**required******||必填项内容不能为空||**accesskey******||规定激活（使元素获得焦点）元素的快捷键采用alt+s的形式|

##综合案例

##多媒体标签

-embed：标签定义嵌入的内容-audio：播放音频-video：播放视频

###多媒体embed（会使用）

embed可以用来插入各种多媒体，格式可以是Midi、Wav、AIFF、AU、MP3等等。url为音频或视频文件及其路径，可以是相对路径或绝对路径。

因为兼容性问题，我们这里只讲解插入网络视频，后面H5会讲解audio和video视频多媒体。

优酷，土豆，爱奇艺，腾讯、乐视等等

###多媒体audio

HTML5通过

使用相当简单，如下图所示


并且可以通过附加属性可以更友好控制音频的播放，如：

autoplay自动播放

controls是否显不默认播放控件

loop循环播放如果这个属性不写默认播放一次loop或者loop=“loop”表示无限循环


多浏览器支持的方案，如下图

标签允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择


###多媒体video

同音频播放一样，


同样，通过附加属性可以更友好的控制视频的播放

controls是否显示默认播放控件

loop循环播放

width设置播放窗口宽度

height设置播放窗口的高度


**多浏览器支持的方案，如下图******


#

#CSS3新增选择器

###结构(位置)伪类选择器（CSS3)

-:first-child:选取属于其父元素的首个子元素的指定选择器-:last-child:选取属于其父元素的最后一个子元素的指定选择器-:nth-child(n)：匹配属于其父元素的第N个子元素，不论元素的类型-:nth-last-child(n)：选择器匹配属于其元素的第N个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。n可以是数字、关键词或公式-

```cssli:first-child{/*选择第一个孩子*/color:pink;}li:last-child{/*最后一个孩子*/color:purple;}li:nth-child(4){/*选择第4个孩子n代表第几个的意思*/color:skyblue;}```

###目标伪类选择器(CSS3)

:target目标伪类选择器:选择器可用于选取当前活动的目标元素

```css:target{color:red;font-size:30px;}```

##属性选择器

选取标签带有某些特殊属性的选择器我们成为属性选择器

```css/*获取到拥有该属性的元素*/div[class^=font]{/*class^=font表示font开始位置就行了*/color:pink;}div[class$=footer]{/*class$=footer表示footer结束位置就行了*/color:skyblue;}div[class*=tao]{/*class*=tao*=表示tao在任意位置都可以*/color:green;}```

```html属性选择器