CSS上升

一.精灵图

    将多张图片合为一张图片（一张图片n处使用，但只传一次）
1、创建一个小盒子（按需要设大小）
2、用CSS把精灵图设置为背景图：

background:url( ... ) 0 -264px;

3、用 PxCook 测出坐标

 

二、背景图设置

1、背景图缩放

background:url( ... )
background-size: xxpx / 百分比 / contain(等比缩放，直至盒子边缘) 
               / cover(横竖拉伸，填满整个盒子）

2、background连写：

background: color images no-repeat position/size;
eg.
background: #333 url( ... ) no-repeat center/400px 400px

三、SEO

    搜索引擎优化（使网站被搜索排名靠前）
1、网站常见的靠前方式：
    ① 花钱
    ② 网页使用 html 后缀
    ③ 标签语法

2、三大标签
    ① title 网页标题
    ② description 网页描述
    ③ keywords 网页关键字

四、网页常见布局标签

（可以约定俗成地命名）

命名方式	网页部位
.header	头部
.nav	导航栏
.footer	底部
.aside	侧边栏
.section	区块
.article	文章
.contain 、.wrapper	版心

五、项目文件夹（公司缩写+项目名称）

1、各区域网页代码文件夹

2、CSS文件夹

    ① base.css 公共基础样式

    ② common.css 多网页相同的样式（如头部、底部）

    ③ index.css 首页样式

3、images文件夹

        固定不变的图片

4、uploads文件夹

        放可能经常变化更换的图片

5、index.html

        首页文件也放在根目录
 

五、ico图标

    网页标题左侧的小图标（一般习惯放在项目根目录）

<link rel="shortcut icon" href="ico图标路径" type="images/x-icon">
简写：
<link rel="icon" href="ico图标地址">

    引用字体图标（企业有专门字体库，直接整个文件夹放入项目包中）

<link rel="stylesheet" href="./iconfont/iconfont.css">

<i class="iconfont 该图标名字"> </i>

    iconfont 指 iconfont类，如果需要改样式：iconfont{ ... }即可，通过标签的方式改，是无法修改的

六、