一、网页制作

根目录

• 图片文件夹：images

• 样式文件夹：CSS

• 首页：index.html

二、项目样式补充

1. 精灵图

• 场景：项目中将多张小图片，合并成一张大图片，这张大图片称之为精灵图

• 优点：减少服务器发送次数，减轻服务器的压力，提高页面加载速度

• 精灵图的使用步骤

  • 创建一个盒子，设置盒子的尺寸和小图尺寸相同

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

  • 修改背景图位置

2. 背景图片大小

• 作用：设置背景图片的大小

• 语法：background-size:宽度 高度;

• 取值

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

• background连写拓展

  • 完整连写：background:color image repeat position/size;
  • 注意点：background-size和background连写同时设置时，需要注意覆盖问题
  • 解决：
    1. 要么单独的样式写在连写的下面
    2. 要么单独的样式写在连写的里面

3. 文字阴影

• 作用：给文字添加阴影效果，吸引用户注意

• 属性名：text-shadow

• 取值

  参数	作用
  h-shadow	必须，水平偏移量。允许负值
  v-shadow	必须，垂直偏移量。允许负值
  blur	可选，模糊度
  color	可选，阴影颜色

4. 盒子阴影

• 作用：给盒子添加阴影效果，吸引用户注意，体现页面的制作细节

• 属性名：box-shadow

• 取值

  参数	作用
  h-shadow	必须，水平偏移量。允许负值
  v-shadow	必须，垂直偏移量。允许负值
  blur	可选，模糊度
  spread	可选，阴影扩大
  color	可选，阴影颜色
  inset	可选，将阴影改为内部阴影

5. 过渡

• 作用：让元素的样式慢慢的变化，常配合hover使用，增强网页交互体验

• 属性名：transition

• 常见取值

  参数	取值
  过渡的属性	all:所有能过渡的属性都过渡，具体属性名如：width：只有width有过渡
  过渡的时长	数字+s（秒）

• 注意点：

  1. 过渡需要：默认状态 和 hover状态样式不同，才能有过渡效果

  2. transition属性给需要过渡的元素本身加

  3. transition属性设置在不同状态中，效果不同的

     ① 给默认状态设置，鼠标移入移出都有过渡效果

     ② 给hover状态设置，鼠标移入有过渡效果，移出没有过渡效果

三、项目前置认知

1. 网站与网站的关系

2. 骨架结构标签

1）DOCTYPE文档说明

• 文档类型声明，告诉浏览器该网页的HTML版本

• 注意点：DOCTYPE需要写在页面的第一行，不属于HTML标签

2）网页语言

• 识网页使用的语言
• 作用：搜索引擎归类+浏览器翻译
• 常见语言：zh-CN 简体中文 / en 英文

3）字符编码（了解）

• 识网页使用的字符编码

• 作用：保存和打开的字符编码需要统一设置，否则可能会出现乱码

• 常见字符编码：

  1. UTF-8：万国码，国际化的字符编码，收录了全球语言的文字
  2. GB2312：6000+汉字
  3. GBK：20000+汉字

• 注意点：开发中统一使用UTF-8字符编码即可

3. SEO三大标签

• SEO（Search Engine Optimization）：搜索引擎优化

• 作用：让网站在搜索引擎上的排名靠前

• 提升SEO的常见方法：

  1. 竞价排名

  2. 将网页制作成html后缀

  3. 标签语义化（在合适的地方使用合适的标签）

  4. ……

• SEO三大标签

  • title：网页标题标签

  • description：网页描述标签

  • keywords：网页关键词标签

4. ico图标设置

• 场景：显示在标签页标题左侧的小图标，习惯使用.ico格式的图标
• 常见代码：

5. 版心

• 场景：把页面的主题内容约束在网页中间

• 作用：让不同大小的屏幕都能看到页面的主体内容

• 代码：

  /* 版心 */
  .container {width: 1240px;margin: 0 auto;
  }
  

• 注意点：版心类名常用container、wrapper、w等

6. CSS书写顺序

四、项目结构搭建

1. 文件和目录准备

• 新建项目文件夹xtx-pc-client，在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：首页样式

2. 完成后的目录及文件结构

3. 基础公共样式

• 场景：一般项目开始前，首先会去除掉浏览器默认样式，设置为当前项目需要的初始化样式

• 作用：防止不同浏览器中标签默认样式不同的影响，统一不同浏览器的默认显示效果，方便后续项目开发

4. index页面骨架

2022/9/9 Caroline finish