一、项目样式补充
- 精灵图
- 场景：项目中将多张小图片，合并成一张大图片，这张大图片称之为精灵图
- 优点：减少服务器发送次数，减轻服务器压力，提高页面加载速度
- 使用步骤：
- 创建一个盒子，设置盒子的尺寸和小图的尺寸相同
- 将精灵图设置为盒子的背景图片
- 修改背景图的位置：通过Pxcook测量小图片左上角坐标，分别取负值设置给盒子的background-position：x y
- 背景图片大小
- 作用：设置背景图片的大小
- 语法：background-size：宽度 高度;
- 取值：
取值 场景 数字+px 简单方便，常用 百分比 相对于当前盒子自身的宽高百分比 contain 包含，将背景图片等比例缩放，直到不会超出盒子的最大 cover 覆盖，将背景图片等比例缩放，直到刚好填满整个盒子没有空白 -
background连写拓展
-
完整连写：background：color image repeat position/size
-
注意点：background-size和background连写同时设置时，需要注意覆盖问题
-
解决：
-
要么单独的样式写在连写的下面
-
要么单独的样式写在连写里面
-
-
- 文字阴影：text-shadow
- 盒子阴影：
- 作用：给盒子添加阴影效果，吸引用户注意，体现页面制作细节
- 属性名：box-shadow
- 取值：
参数 作用 h-shadow 必须，水平偏移量，允许负值 v-shadow 必须，垂直偏移量，允许负值 blur 可选，模糊度 spread 可选，阴影扩大 color 可选，阴影颜色 inset 可选，将阴影改为内部阴影
- 过渡
- 作用：让元素的样式慢慢变化，常配合hover使用，增强网页交互体验
- 属性名：transition
- 常见取值：
参数 取值 过渡的属性 all：所有能过渡的属性都过渡、具体属性名如：width：只有width有过渡 过渡的长度 数字+s（秒） -
注意点：
-
过渡需要：默认状态和hover状态样式不同，才能有过渡的效果
-
transition属性给需要过渡的元素本身加
-
transition属性设置在不同状态中，效果不同
-
给默认状态设置，鼠标移入移出都有过渡效果
-
给hover状态设置，鼠标移入有过渡效果，移出没有过渡效果
-
-
二、项目前置认知
- 网页与网站的关系
- 骨架结构标签
- DOCTYPE文档说明：<!DOCTYPE html>文档类型声明，告诉浏览器该网页的HTML版本
- 网页语言：
-
<html lang="en">标识网页使用的语言
-
作用：搜索引擎归类+浏览器翻译
-
常见语言：zh-CN简体中文/en英文
-
- SEO三大标签
- SEO:搜索引擎优化
- 作用：让网站在搜素引擎上的排名靠前
- 提升SEO的常见方法：
- 竞价排名
- 将网页制作成html后缀
- 标签语义化（在合适的地方使用合适的标签）
- title：网页标题标签
- description：网页描述标签
- keywords：网页关键词标签
- ico图标设置
- 场景：显示在标签页标题左侧的小图标，习惯使用.ico格式的图标
- 常见代码：<link rel="stylesheet" href="ico图标路径" type="image/x-icon">
- 版心
三、项目结构搭建
- 文件和目录准备
- 新建项目文件夹xtx-pc-cline，在VScode中打开
- 在实际开发中，项目文件夹不建议使用中文
- 所有项目相关文件都保存在xtx-pc-client目录中
- 复制favicon。ico到xtx-pc-client目录中：一般习惯将ico图标放在项目根目录中
- 复制images和uploads目录到xtx-pc-client目录中
- images：存放网站固定使用的图片素材，如：logo、样式修饰图片等
- uploads：存放网站非固定使用的图片素材，如：商品图片、宣传图片等
- 新建index.html在根目录
- 新建css文件夹保存网站的样式，并新建以下CSS文件：
- base.css:基础公共样式
- common.css:该网站中多个页面相同模块的重复样式：如：头部、底部
- index.css:首页样式
- 新建项目文件夹xtx-pc-cline，在VScode中打开
- 基础公共样式
- index页面骨架
扫一扫
1107
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
