CSS基础(8)CSS样式补充+项目前置认知+项目结构搭建
CSS样式补充
目标:能够 使用精灵图,能够给元素 添加阴影效果 ,能够让元素完成 过渡效果
学习路径:
1. 精灵图
2. 背景图片大小
3. 文字阴影
4. 盒子阴影
5. 过渡
1.1 精灵图的介绍
Ø 场景:项目中将多张小图片,合并成一张大图片,这张大图片称之为精灵图
Ø 优点:减少服务器发送次数,减轻服务器的压力,提高页面加载速度
Ø 例如:需要在网页中展示8张小图片
• 8张小图片分别发送 → 发送8次
• 合成一张精灵图发送 → 发送1次
1.2 精灵图的使用
1. 创建一个盒子
2. 通过PxCook量取小图片大小,将小图片的宽高设置给盒子
3. 将精灵图设置为盒子的背景图片
4. 通过PxCook测量小图片左上角坐标,分别取负值设置给盒子的background-position:xy
2.1 背景图片大小
Ø 作用:设置背景图片的大小,
Ø 语法:background-size:宽度 高度;
Ø 取值:
2.2 background连写拓展
Ø 完整连写:
backgeound:color image repeat position/size;
Ø 注意点:
• background-size和background连写同时设置时,需要注意覆盖问题
Ø 解决:
1. 要么单独的样式写连写的下面
2. 要么单独的样式写在连写的里面
3.1 文字阴影
Ø 作用:给文字添加阴影效果,吸引用户注意
Ø 属性名:text-shadow
Ø 取值:
Ø 拓展:
• 阴影可以叠加设置,每组阴影取值之间以逗号隔开
4.1 盒子阴影
Ø 作用:给盒子添加阴影效果,吸引用户注意,体现页面的制作细节
Ø 属性名:box-shadow
Ø 取值:
5.1 过渡
Ø 作用:让元素的样式慢慢的变化,常配合hover使用,增强网页交互体验
Ø 属性名:transition
Ø 常见取值
Ø 注意点:
1. 过渡需要:默认状态 和 hover状态样式不同,才能有过渡效果
过度需要配合hover使用
2. transition属性给需要过渡的元素本身加
3. transition属性设置在不同状态中,效果不同的
① 给默认状态设置,鼠标移入移出都有过渡效果
② 给hover状态设置,鼠标移入有过渡效果,移出没有过渡效果
谁变化给谁加过度属性:transition:all 时间;
项目前置认知
目标:能够知道 SEO三大标签,能够设置网页的 ico图标 ,能够书写 版心公共类代码
学习路径:
1. 网页与网站的关系
2. 骨架结构标签
3. SEO三大标签
4. ico图标设置
5. 版心
1. 网页与网站的关系
Ø 网页:相当于是每页纸
Ø 网站:相当于一本书籍
• 用户翻阅的时候,看的是每页纸上的内容
• 由多页纸整合在一起,就是完整的一本书籍了
1.2 网页与网站的关系
Ø 在互联网中,网站类似于是一本书,网页就是这本书的每一页
• 比如:淘宝、京东、黑马程序员等就是一个网站,类似于是一本书
• 这些网站中的每一个网页,如:主页、登录页面、商品页面就是每一个单独的页面,类似于每一页纸
• 多个同主题网页整合在一起,就称之为网站。
1.3 网页与网站的概念
Ø 网页:网站中的每一“页” 。例如:淘宝的主页、淘宝的登录页、淘宝的商品页等。
Ø 网站:提供特定服务的一组网页集合。例如:百度、淘宝、京东、黑马程序员等;
2.骨架结构标签
2.1 DOCTYPE文档说明
Ø <!DOCTYPE html>文档类型声明,告诉浏览器该网页的 HTML版本
Ø 注意点:DOCTYPE需要写在页面的第一行,不属于HTML标签
2.2 网页语言
Ø 标识
网页 使用的 语言
Ø 作用:搜索引擎归类 + 浏览器翻译
Ø 常见语言:zh-CN 简体中文 / en 英
2.3 字符编码(了解)
Ø 标识
网页 使用的字符编码
Ø 作用:保存和打开的字符编码需要统一设置,否则可能会出现 乱码
Ø 常见字符编码:
1. UTF-8:万国码,国际化的字符编码,收录了全球语言的文字
2. GB2312:6000+ 汉字
3. GBK:20000+ 汉字
Ø 注意点:开发中 统一使用 UTF-8 字符编码 即可
3.1 SEO简介
Ø SEO(Search Engine Optimization):搜索引擎优化
Ø 作用:让网站在搜索引擎上的排名靠前
Ø 提升SEO的常见方法:
1. 竞价排名
2. 将网页制作成html后缀
3. 标签语义化(在合适的地方使用合适的标签)
4. …
3.2 SEO三大标签
1. title:网页标题标签
2. description:网页描述标签
3. keywords:网页关键词标签
(拓展补充) 有语义的布局标
Ø 场景:在HTML5新版本中,推出了一些有语义的布局标签,可以增强网页的语义化
Ø
以上标签显示特点和div一致,但是比div多了不同的语义
常见有语义的布局标签有哪些?
• header:网页头部
• nav:网页导航
• footer:网页底部
• aside:网页侧边栏
• section:网页 区块
• article:网页文章
4.1 ico图标设置
Ø 场景:显示在标签页标题左侧的小图标,习惯使用.ico格式的图标
Ø 常见代码:
图标路径一般放到根目录
<link rel="shortcut icon" href="图标路径" type="image/x-icon">
5.1 版心的介绍
Ø 场景:把页面的主体内容约束在网页中间
Ø 作用:让不同大小的屏幕都能看到页面的主体内容
Ø 代码
//公共版心
.wrapper{
width:1240xp;
margin:0 auto;
}
(拓展补充) CSS书写顺序
Ø 衡量程序员的能力,除了要看实现业务需求的能力,还要看平时书写代码的规范(专业性)
Ø 不同的CSS书写顺序会影响浏览器的渲染性能,推荐前端工程师使用专业的书写顺序习惯
Ø 注意点:
• 开发中推荐多用类 + 后代,但不是层级越多越好,一个选择器中的类选择器的个数推荐 不要超过 3 个
项目结构搭建
目标:能够使用专业方式完成 项目结构搭建 和 基础公共样式
学习路径:
1. 文件和目录准备
2. 基础公共样式
3. index页面骨架
1.1 文件和目录准备
1. 新建项目文件夹 xtx-pc-client,在VScode中打开
• 在实际开发中,项目文件夹不建议使用中文
• 所有项目相关文件都保存在 xtx-pc-client 目录中
2. 复制 favicon.ico 到 xtx-pc-client 目录
• 一般习惯将ico图标放在项目根目录
3. 复制 images 和 uploads 目录到 xtx-pc-client 目录中
• images :存放网站 固定使用 的图片素材,如:logo、样式修饰图片… 等
• uploads:存放网站 非固定使用 的图片素材,如:商品图片、宣传图片…等
4. 新建 index.html 在根目录
5. 新建 css 文件夹保存网站的样式,并新建以下CSS文件:
• base.css:基础公共样式,清除基础样式文件
• common.css:该网站中多个网页相同模块的重复样式,如:头部、底部
• index.css:首页样式
1.2 完成后的目录及文件
2.1 基础公共样式
Ø 场景:一般项目开始前,首先会 去除掉浏览器默认样式,设置为 当前项目需要的初始化样式
Ø 作用:防止不同浏览器中标签默认样式不同的影响,统一不同浏览器的默认显示效果,方便后续项目开发
Ø 要求:
• 已经准备好base.css代码,同学们需要认识,项目中可以直接引入使用
Ø 基础公共样式的作用是什么?
• 防止不同浏览器中标签默认样式不同的影响,统一不同浏览器的默认显示效果,方便后续项目开发
3.1index页面骨架
总结
u 能够在网页中使用 精灵图
u 能够使用 背景大小属性 ,设置背景图片的大小
u 能够认识 CSS书写顺序,提高代码专业性和浏览器渲染性能
u 能够使用的专业方式完成 项目结构搭建 和 基础公共样式
u 能够应用已学技术知识 完成小兔鲜儿项目
背景图位置负责两件事,改变幻灯片箭头在盒子里面的位置,改变精灵图的位置
导致在精灵图中的测量位置不准确
解决方案有两种:(推荐使用第一种)
1.书写背景图位置,使用浏览器调试工具,调试具体的位置。
2.书写标签时a负责盒子,里面添加一个span负责箭头的位置,这样盒子和箭头分开可以随便调整span箭头的位置。
填写li做内容时,如果位置不符,就检查与第一个li对齐的上面的标签,检查其宽高看看是否占用
版权声明:
作者:zhuim521
链接:https://zhuimwl.com/58.html
来源:追梦博客
文章版权归作者所有,未经允许请勿转载。

共有 0 条评论