1.精灵图的使用

创建一个盒子

通过PxCook量取图片大小,将小图片的宽高设置给盒子

将精灵图设置为盒子的背景图片

通过PxCook测量小图片左上角坐标,分别取负值设置给盒子的 background-color: x y

2.背景图片大小

作用:设置背景图片的大小

语法:background-color: 宽 高;

取值:

  • 数字+px 简单方便,常用
  • 百分比 相对于当前盒子自生的宽高百分比
  • contain 包含,将背景图片等比例缩放,直到不会超出盒子的最大
  • cover 覆盖,将背景图片等比例缩放,直到刚好填满整个盒子没有空白

3.background连写拓展

完整连写:

background: color image repeat position/sizi;

5.SEO三大标签

title:网页标题

description:网页描述

keywords:网页关键词

6.语义标签

header 网页头部

nav 网页导航

footer 网页底部

aside 网页侧边栏

section 网页区域块

article 网页文章

7.ico标签

<link rel="shortcut icon" href="ico图标路径" type="image/x-icon">

8.版心的介绍

场景:把页面的主体内容约束在网页中间

作用:让不同大小的屏幕都能看到页面的主体

代码:

.container {
  width: 1240px;
  margin: 0 auto;
}

注意点:版心常见的类名:container,wrapper,w 等

9.CSS书写顺序

CSS书写顺序

10.骨架

骨架

11.命名规范

ClassName含义
about关于
account账户
arrow箭头图标
article文章
aside边栏
audio音频
avatar头像
bg,background背景
bar栏(工具类)
branding品牌化
crumb,breadcrumbs面包屑
btn,button按钮
caption标题,说明
category分类
chart图表
clearfix清除浮动
close关闭
col,column
comment评论
community社区
container容器
content内容
copyright版权
current当前态,选中态
default默认
description描述
details细节
disabled不可用
entry文章,博文
error错误
even偶数,常用于多行列表或表格中
fail失败(提示)
feature专题
fewer收起
field用于表单的输入区域
figure
filter筛选
first第一个,常用于列表中
footer页脚
forum论坛
gallery画廊
group模块,清除浮动
header页头
help帮助
hide隐藏
hightlight高亮
home主页
icon图标
info,information信息
last最后一个,常用于列表中
links链接
login登录
logout退出
logo标志
main主体
menu菜单
meta作者、更新时间等信息栏,一般位于标题之下
module模块
more更多(展开)
msg,message消息
nav,navigation导航
next下一页
nub小块
odd奇数,常用于多行列表或表格中
off鼠标离开
on鼠标移过
output输出
pagination分页
pop,popup弹窗
preview预览
previous上一页
primary主要
progress进度条
promotion促销
rcommd,recommendations推荐
reg,register注册
save保存
search搜索
secondary次要
section区块
selected已选
share分享
show显示
sidebar边栏,侧栏
slide幻灯片,图片切换
sort排序
sub次级的,子级的
submit提交
subscribe订阅
subtitle副标题
success成功(提示)
summary摘要
tab标签页
table表格
txt,text文本
thumbnail缩略图
time时间
tips提示
title标题
video视频
wrap容器,包,一般用于最外层
wrapper容器,包,一般用于最外层
最后修改:2021 年 10 月 05 日
谢谢老板打赏