css基础笔记

最新推荐文章于 2022-10-25 11:11:35 发布

Kim丶

最新推荐文章于 2022-10-25 11:11:35 发布

阅读量583

点赞数

CC 4.0 BY-SA版权

分类专栏： web 文章标签： css css基础 css笔记 css基础笔记

本文链接：https://blog.youkuaiyun.com/u010689561/article/details/85043104

web 专栏收录该内容

22 篇文章

订阅专栏

本文详细介绍了CSS的基础知识，包括HTML结构解析、CSS选择器、边框与内边距属性、浮动与定位、背景属性等核心概念。还探讨了CSS的层叠性、继承性和特殊性，并讲解了如何清除浮动、定位元素以及使用伪类选择器实现链接样式。此外，还涵盖了CSS的高级技巧，如垂直对齐、溢出隐藏和字体图标等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html基础

注意语义化！！！

浏览器内核：

IE：trident；
Safari：webkit；
FireFox：gecko；
chrome、opera：blink；

结构解析

<!DOCTYPE html>代表是用什么标准，不可省略，会影响布局。
<html lang="en">代表页面主要是英文，zh-cn代表中文。

`<head>`标签

`<meta>`标签（后面有详细讲）

<meta charset="utf-8">代表页面用什么编码格式。utf-8包含全世界所有国家字符；gb2312简单中文；GBK中文、繁体；BIG5繁体；
<meta name="keywords" content="多个关键字">用于方便搜索引擎查找当前网页。
<meta name="description" content="页面描述">

`<link>`标签

引用css样式：<link rel="stylesheet" href="css地址">
设置DNS预解析（预加载在缓存，提高后续访问速度）：<link rel="dns-prefetch" href="预加载网页地址">
网站icon图标：<link rel="shortcut icon" href="图标地址">

`<base>` 标签为页面上的所有链接规定默认地址或默认目标。

知识点补充

自定义列表`<dl>`标签

<dl>
    <dt>标题</dt>
	<dd></dd>
</dl>

元素分类

块级标签（独占行）： p,div,ul,ol,dl,li,dt,h1-h6
行级标签（可以跟其他行内标签共用一行）：span,strong,em,
块级元素：可以设置宽度、高度、位置（独占一行）。
行内元素：不可设宽度、高度、位置（都是根据内容而定的），padding、margin可设；！！！注意规范：不可在行内元素放块级元素。
行内块元素：集合块级和行内的特点，如：img，input，td，（a特殊）。可以使用display修改（重点）。

了解

所有字相关的CSS都可以从父元素继承，如：color、text-系列、font-系列、line-系列、curor、
letter-spacing字间距
尽量为每一个input配一个label，label的作用为input解释说明的。
每一个表单都要含有name，因为后台php要用于取数据。

CSS基础

CSS基础选择器(重点)

标签选择器（元素选择器）

标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。其基本语法格式如下：

标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }  
    或者
元素名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

标签选择器最大的优点是能快速为页面中同类型的标签统一样式，同时这也是他的缺点，不能设计差异化样式。
标签选择器可以把某一类标签全部选择出来。

类选择器

类选择器使用“.”（英文点号）进行标识，后面紧跟类名，其基本语法格式如下：

.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

标签调用时 class=“类名” 即可。
类选择器最大的优势是可以为元素对象定义单独或相同的样式。 可以选择一个或者多个标签。

长名称或词组可以使用中横线来为选择器命名。
不建议使用“_”下划线来命名CSS选择器。能良好区分JavaScript变量命名(JS变量命名是用“_”)
不要纯数字、中文等命名，尽量使用英文字母来表示。

多类名选择器

给标签指定多个类名，从而达到更多的选择目的。
注意：

样式显示效果跟HTML元素中的类名先后顺序没有关系,受CSS样式书写的上下顺序有关。
各个类名中间用空格隔开。

id选择器

id选择器使用“#”进行标识，后面紧跟id名，其基本语法格式如下：

#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

该语法中，id名即为HTML元素的id属性值，大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应于文档中某一个具体的元素。
用法基本和类选择器相同。

通配符选择器

通配符选择器用 * 号表示，能匹配页面中所有的元素。其基本语法格式如下：

*{ 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

CSS复合选择器（重点）

复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签。

交集选择器

交集选择器由两个选择器构成，两个选择器之间不能有空格。
记忆技巧：
交集选择器是并且的意思。

比如：   p.one   选择的是： 类名为 .one  的 p标签。

用的相对来说比较少，不太建议使用。

并集选择器

多个选择器通过逗号连接而成的。例：

.one, p , #test {color: #F00;}
<!-- 表示 .one 和 p 和 #test 这三个选择器都会执行颜色为红色。  通常用于集体声明。-->

记忆技巧：
并集选择器和的意思，就是说，只要逗号隔开的，所有选择器都会执行后面样式。

后代选择器

后代选择器又称为包含选择器，用来选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。
在这里插入图片描述
子孙后代都可以这么选择。或者说，它能选择任何包含在内的标签。

子元素选择器

子元素选择器只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个>进行连接，注意，符号左右两侧各保留一个空格。
PS：这里的子指的是亲儿子不包含孙子重孙子之类。

伪类选择器

伪类选择器用于向某些选择器添加特殊的效果。比如给链接添加特殊效果，比如可以选择第1个，第n个元素。
类选择器是一个点比如 .demo {} 而伪类用 2个点就是冒号比如 :link{}

链接伪类选择器

:link 未访问的链接
:visited 已访问的链接
:hover 鼠标移动到链接上
:active 选定的链接

行高line-height

文本装饰text-decoration

opacity透明度

CSS的三大特性：层叠性、继承性、特殊性。

层叠性：多种同名css会叠加，重复则后替代前。
继承性：子标签会继承某些父标签属性。
特殊性：用于衡量权重大小。

specificity用一个四位的数字串(CSS2是三位)来表示，更像四个级别，值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。

继承或者* 的贡献值     	0,0,0,0
每个元素（标签）贡献值为   	0,0,0,1
每个类，伪类贡献值为     	0,0,1,0
每个ID贡献值为       	0,1,0,0
每个行内样式贡献值      	1,0,0,0
每个!important贡献值	∞ 无穷大

权重是可以叠加的
比如的例子：

div ul li   ------>      0,0,0,3
.nav ul li  ------>      0,0,1,2
a:hover     -----—>      0,0,1,1
.nav a      ------>      0,0,1,1   
#nav p      ----->       0,1,0,1

!important可以强制修改优先级，注意在属性后添加即可，如color: #f10215!important;

background属性

一般用于小图标或者超大背景图。

background-position:x, y;
- 只写一个时另一个默认center
background-repeat:
- 设置背景图片是否平铺

值	描述
no-repeat	不平铺
repeat	平铺(默认)
repeat-x	水平方向上平铺
repeat-y	垂直方向上平铺
inherit	继承父属性
round	会自动缩放平铺
space	不会缩放平铺，但会产生相同间距值

background-attachment:
- 设置背景是否跟内容滚动（一般用于做视差滚动效果）。

值	描述
scroll	背景图像会随着页面其余部分的滚动而移动（默认）
fixed	当页面的其余部分滚动时，背景图像不会移动
local	背景图片会跟随内容一起滚动，前提是滚动当前容器的内容

background:rgba(red, green, blue, alpha透明度)
background:背景颜色背景图片地址背景平铺背景滚动背景位置;

CSS3:

background-size: auto(原始图片大小) || number(数值) || percentage(百分比) || cover(方法铺满) || contain(缩小铺满);
background-origin:
- 属性规定 background-position 属性相对于什么位置来定位。
（一般和下面属性组成来做移动端按钮扩大选区）

值	描述
padding-box	背景图像相对于内边距框来定位。即与被边框重叠
border-box	背景图像相对于边框盒来定位。
content-box	背景图像相对于内容框来定位。

background-clip:
- 规定背景的绘制区域。

值	描述
padding-box	背景被裁剪到内边距框。即在内边框开始填充
border-box	背景被裁剪到边框盒。
content-box	背景被裁剪到内容框。

border边框属性（重点）

border-collapse: collapse; (合并边框)
border-radius : 左上角px 右上角px 右下角px 左下角px; (设置圆角)

CSS3：

boder-image: source slice / width /outst repeat; 设置边框图片（属简写属性）。
用于设置一下的值：

值	描述
border-image-source	用在边框的图片的路径。（单设默认只填充到容器的四个角点）
border-image-slice	图片边框向内偏移。单数值为内偏移，加fill做内容内部填充。
border-image-width	图片边框的宽度。（不影响内容放置，内容只会被容器border影响，一般设与border一样的大小）
border-image-outset	边框图像区域超出边框的量。（少用，影响大）
border-image-repeat	图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。

padding内边距属性（重点）

！！！注意：如果设置了盒子的width或height，设置padding会改变其宽度或高度。

margin外边距属性（重点）

外边距实现盒子居中

可以让一个盒子实现水平居中，需要满足一下两个条件：

必须是块级元素。
盒子必须指定了宽度（width），然后就给左右的外边距都设置为auto，就可使块级元素水平居中。

实际工作中常用这种方式进行网页布局，示例代码如下：

.header{ width:960px; margin:0 auto;}

相邻块元素垂直外边距的合并（注意）

当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。

嵌套块元素垂直外边距的合并（注意）

对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。
解决方案：

可以为父元素定义1像素的上边框或上内边距。
可以为父元素添加overflow:hidden。

content宽度和高度

使用宽度属性width和高度属性height可以对盒子的大小进行控制。

/*外盒尺寸计算（元素空间尺寸）*/
Element空间高度 = content height + padding + border + margin
Element 空间宽度 = content width + padding + border + margin
/*内盒尺寸计算（元素实际大小）*/
Element Height = content height + padding + border （Height为内容高度）
Element Width = content width + padding + border （Width为内容宽度）

注意：
1、宽度属性width和高度属性height仅适用于块级元素，对行内元素无效（ img 标签和 input除外）。
2、计算盒子模型的总高度时，还应考虑上下两个盒子垂直外边距合并的情况。
3、如果一个盒子没有给定宽度/高度或者继承父亲的宽度/高度，则padding 不会影响本盒子大小。

盒子模型布局稳定性

分不清内外边距的使用，什么情况下使用内边距，什么情况下使用外边距？
其实大部分情况下是可以混用的。就是说，你用内边距也可以，用外边距也可以。你觉得哪个方便，就用哪个。
按照 优先使用宽度（width）其次使用内边距（padding）再次外边距（margin）。
原因：

margin 会有外边距合并还有 ie6下面margin 加倍的bug（讨厌）所以最后使用。
padding 会影响盒子大小，需要进行加减计算（麻烦）其次使用。
width 没有问题，我们经常使用宽度剩余法高度剩余法来做。

浮动float（重点）

浮动脱离标准流，不占位置，会影响标准流。浮动只有左右浮动。
元素添加浮动后，元素会具有行内块元素的特性。元素的大小完全取决于定义的大小或者默认的内容多少浮动根据元素书写的位置来显示相应的浮动。

版心和布局流程（必须学会）

“版心”(可视区) 是指网页中主体内容所在的区域。一般在浏览器窗口中水平居中显示，常见的宽度值为960px、980px、1000px、1200px等。
布局流程
为了提高网页制作的效率，布局时通常需要遵守一定的布局流程，具体如下：

确定页面的版心（可视区）。
分析页面中的行模块，以及每个行模块中的列模块。
制作HTML结构。
CSS初始化，然后开始运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块。

一列固定宽度且居中（常用）

在这里插入图片描述

两列左窄右宽型

在这里插入图片描述

通栏平均分布型

在这里插入图片描述

清除浮动clear

由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响，为了解决这些问题，此时就需要在该元素中清除浮动。

清除浮动本质

清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。
在这里插入图片描述

清除浮动的方法

本质叫做闭合浮动更好一些, 记住，清除浮动就是把浮动的盒子圈到里面，让父盒子闭合出口和入口不让他们出来影响其他元素。
在CSS中，clear属性用于清除浮动，其基本语法格式如下：

选择器{clear:属性值;}

属性值	描述
left	不允许左侧有浮动元素（清除左侧浮动的影响）
right	不允许右侧有浮动元素（清除右侧浮动的影响）
both	同时清除左右两侧浮动的影响

额外标签法

<!--是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签，例如--> 
<div style=”clear:both”></div>，或则其他标签br等亦可。

优点：通俗易懂，书写方便
缺点：添加许多无意义的标签，结构化较差。

父级添加overflow属性方法

可以通过触发BFC的方式，可以实现清除浮动效果。

可以给父级添加： overflow为 hidden|auto|scroll  都可以实现。

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

使用after伪元素清除浮动(重点)

:after 选择器在被选元素的内容后面插入内容。
content 属性来指定要插入的内容。
使用方法：

.clearfix:after {  
    content: ""; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;  
}
.clearfix {*zoom: 1;}   /* *是IE6、7 专有，其他浏览器略过 */

优点：符合闭合浮动思想结构语义化正确
缺点：由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。
代表网站：百度、淘宝网、网易等

使用before和after双伪元素清除浮动（重点）

:before 选择器在被选元素的内容前面插入内容。
请使用 content 属性来指定要插入的内容。
使用方法：

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

优点：代码更简洁
缺点：由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。
代表网站：小米、腾讯等

定位(position)重要！！！

元素的定位属性

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

边偏移

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

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

定位模式(定位的分类)
在CSS中，position属性用于定义元素的定位模式，其基本语法格式如下：
```
选择器{position:属性值;}
```

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

静态定位(static)

静态定位是所有元素的默认定位方式，当position属性的取值为static时，可以将元素定位于静态位置。所谓静态位置就是各个元素在HTML文档流中默认的位置。
在静态定位状态下，无法通过边偏移属性（top、bottom、left或right）来改变元素的位置。
唯一的用处就是可以取消定位。

相对定位relative

相对定位是将元素相对于它在标准流中的位置进行定位，当position属性的取值为relative时，可以将元素定位于相对位置。
对元素设置相对定位后，可以通过边偏移属性改变元素的位置，但是它在文档流中的位置仍然保留。如下图所示，即是一个相对定位的效果展示：
在这里插入图片描述
注意：

相对定位最重要的一点是，它可以通过边偏移移动位置，但是原来的所占的位置，继续占有。
其次，每次移动的位置，是以自己的左上角为基点移动（相对于自己来移动位置）
相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待它。（相对定位不脱标）

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

绝对定位absolute

如果文档可滚动，绝对定位元素会随着它滚动，因为元素最终会相对于正常流的某一部分定位。
注意：绝对定位最重要的一点是，它可以通过边偏移移动位置，但是它完全脱标，完全不占位置。

父级没有定位

若所有父元素都没有定位，以浏览器为准对齐(document文档)。
在这里插入图片描述

父级有定位

绝对定位是将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。
在这里插入图片描述

子绝父相

子级是绝对定位的话，父级要用相对定位。（不一定，但经常是）

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

普通的盒子是左右margin 改为 auto就可，但是对于绝对定位就无效了
定位的盒子也可以水平或者垂直居中，有一个算法。

首先left 50% 父盒子的一半大小。
然后外边距负自己的一半值就可以了 margin-left或者使用transform的translate(-50%,-50%)。

固定定位fixed

它以浏览器窗口作为参照物来定义网页元素。当position属性的取值为fixed时，即可将元素的定位模式设置为固定定位。
当对元素设置固定定位后，它将脱离标准文档流的控制，始终依据浏览器窗口来定义自己的显示位置。不管浏览器滚动条如何滚动也不管浏览器窗口的大小如何变化，该元素都会始终显示在浏览器窗口的固定位置。
固定定位有两点：

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

定位模式转换

跟浮动一样，元素添加了绝对定位和固定定位之后，元素模式也会发生转换，都转换为行内块模式，
因此比如行内元素如果添加了绝对定位或者固定定位后浮动后，可以不用转换模式，直接给高度和宽度就可以了。

叠放次序（z-index）

当对多个元素同时设置定位时，定位元素之间有可能会发生重叠。
在CSS中，要想调整重叠定位元素的堆叠顺序，可以对定位元素应用z-index层叠等级属性，其取值可为正整数、负整数和0。
注意：

z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居上。
如果取值相同，则根据书写顺序，后来居上。
后面数字一定不能加单位。
只有相对定位，绝对定位，固定定位有此属性，其余标准流，浮动，静态定位都无此属性，亦不可指定此属性。

元素的显示与隐藏

分别是 display、visibility 和 overflow。
他们的主要目的是让一个元素在页面中消失，但是不在文档源码中删除。

display 显示

设置或检索对象是否及如何显示。特点：隐藏之后，不再保留位置。

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

visibility 可见性

设置或检索是否显示对象。特点：隐藏之后，继续保留原有位置。

visibility: visible 对象可视
visibility: hidden 对象隐藏

overflow 溢出

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

属性	描述
visible	不剪切内容也不添加滚动条。
auto	超出自动显示滚动条，不超出不显示滚动条
hidden	不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll	不管超出内容否，总是显示滚动条（少用）

CSS高级技巧

鼠标样式cursor

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

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

轮廓 outline

是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。因为不同浏览器默认不同，所以一般都去掉。

outline : outline-color | outline-style | outline-width

最直接的写法是： outline: 0; 或者 outline: none; 或者再加border统一。

防止拖拽文本域resize

resize：none；可以防止火狐谷歌等浏览器随意的拖动<textarea>文本域。

vertical-align 垂直对齐

vertical-align : baseline | top | middle | bottom

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

模式	单词
基线对齐：默认的是文字和图片基线对齐	vertical-align:baseline;
垂直居中：默认的是文字和图片中线对齐	vertical-align:middle;
顶部对齐：默认的是文字和图片顶线对齐	vertical-align:top;
底线对齐：默认的是文字和图片底线对齐	vertical-align:bottom

去除图片底侧空白缝隙(注意)

图片或者表单等行内块元素，他的底线会和父级盒子的基线对齐。这样会造成一个问题，就是图片底侧会有一个空白缝隙。
解决的方法：

给img设置 vertical-align:middle | top等等。让图片不要和基线对齐。
给img 添加 display：block; 转换为块级元素就不会存在问题了。

溢出的文字隐藏

word-break自动换行

主要处理英文单词

属性	描述
normal	使用浏览器默认的换行规则。
break-all	允许在单词内换行。
keep-all	只能在半角空格或连字符处换行。

white-space

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

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

text-overflow 文字溢出

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

属性	描述
clip	不显示省略标记（…），而是简单的裁切
ellipsis	当对象内文本溢出时显示省略标记（…）

注意：首先一定要强制一行内显示，再次和overflow属性搭配使用。（通常用于li标题）

精灵技术的使用

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

滑动门

利用CSS精灵（主要是背景位置）和盒子padding撑开宽度, 以便能适应不同字数的导航栏。
在这里插入图片描述
一般的经典布局都是这样的：(固定结构)

<li>
    <a href="#">
        <span>导航栏内容</span>
    </a>
</li>

总结：

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

字体图标（@font-family）

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

字体图标使用流程

在这里插入图片描述

上传生成字体包

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

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

阿里icon font字库
推荐网站： http://www.iconfont.cn/
这个是阿里妈妈M2UX的一个icon font字体图标字库，包含了淘宝图标库和阿里妈妈图标库。可以使用AI制作图标上传生成。一个字，免费，免费！！

fontello
http://fontello.com/
在线定制你自己的icon font字体图标字库，也可以直接从GitHub下载整个图标集，该项目也是开源的。

Font-Awesome
http://fortawesome.github.io/Font-Awesome/
这是我最喜欢的字库之一了，更新比较快。目前已经有369个图标了。

Glyphicon Halflings
http://glyphicons.com/
这个字体图标可以在Bootstrap下免费使用。自带了200多个图标。

Icons8
https://icons8.com/
提供PNG免费下载，像素大能到500PX

下载兼容字体包

刚才上传完毕，网站会给我们把UI做的svg图片转换为我们的字体格式，然后下载下来就好了。
如果不是需要专门的图标，是想网上找几个图标使用，以上2步可以直接省略了，直接到刚才的网站上找喜欢的下载使用吧。

字体引入到HTML

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

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

第一步：在样式里面声明字体：告诉别人我们自己定义的字体(通用复制即可)

@font-face {
   font-family: 'icomoon';
    src:  url('fonts/icomoon.eot?7kkyc2');
    src:  url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
        url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
        url('fonts/icomoon.woff?7kkyc2') format('woff'),
        url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

第二步：给盒子使用字体

span {
    font-family: "icomoon";
}

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

span::before {
    content: "\e900";
    font-family: "icomoon";
}
    或者  
<span></span>

追加新图标到原来库里面

如果工作中，原来的字体图标不够用了，我们需要添加新的字体图标，但是原来的不能删除，继续使用，此时我们需要这样做。
把压缩包里面的selection.json 从新上传，然后，选中自己想要新的图标，从新下载压缩包，替换原来文件即可。
在这里插入图片描述

网页css初始化文件

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

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

项目注意

目录说明

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

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

引入ico图标

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

注意：

她(它)不是iconfont字体哦。
位置是放到 head 标签中间。
后面的type=“image/x-icon” 属性可以省略。
为了兼容性，请将favicon.ico 这个图标放到根目录下。

网站优化三大标签

SEO是由英文Search Engine Optimization缩写而来，中文意译为“搜索引擎优化”！SEO是指通过对网站进行站内优化、网站结构调整、网站内容建设、网站代码优化等)和站外优化，从而提高网站的关键词排名以及公司产品的曝光度。
在这里插入图片描述

网页title 标题

title具有不可替代性，是我们的内页第一个重要标签，是搜索引擎了解网页的入口，和对网页主题归属的最佳判断点。
在这里插入图片描述
建议：
首页标题：网站名（产品名）- 网站的介绍

Description 网站说明

注意点：

描述中出现关键词，与正文内容相关，这部分内容是给人看的，所以要写的很详细，让人感兴趣，吸引用户点击。
同样遵循简短原则，字符数含空格在内不要超过 120 个汉字。
补充在 title 和 keywords 中未能充分表述的说明.
用英文逗号关键词1,关键词2

Keywords 关键字

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

浏览器前缀（重要）

浏览器前缀	浏览器
-webkit-	Google Chrome, Safari, Android Browser
-moz-	Firefox
-o-	Opera
-ms-	Internet Explorer, Edge
-khtml-	Konqueror

logo固定写法

<div class="logo">
    <h1>
        <a href="#" title="京东网">京东</a>
    </h1>
</div>

轮播图固定写法

<div class="jd-col2-hd">
    <a href="#" class="arr-l"></a>
    <a href="#" class="arr-r"></a>
    <ol>
        <li class="current"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ol>
    <ul>
        <li><a href=""><img src="images/banner.jpg" alt=""></a></li>
    </ul>
</div>