前端
一.精灵图
将多张图片合为一张图片(一张图片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{ ... }
即可,通过标签的方式改,是无法修改的