前端学习（7月20日——7月23日）

学习目标：

• 7月20日：无
• 7月21日：P70-81
• 7月22日：P82-94
• 7月23日：综合案例、笔记整理

---

学习内容：

（四）、标准流、浮动、Flex布局

1、标准流（文档流）

标签在页面中默认的排布规则

2、浮动

• 作用：让块元素水平排列
• 属性名：float
• 属性值
  • left：左对齐
  • right：右对齐
• 特点
  • 浮动后的盒子顶对齐
  • 浮动后的盒子具备行内块特点
  • 父级宽度不够，浮动的子级会换行
  • 浮动后的盒子脱标
• 本质：实现图文混排效果
• 产品区域布局
• 清除浮动
  • 场景：浮动元素会脱标，如果父级没有高度，子级无法撑开父级高度（可能导致页面布局错乱）
  • 解决方法：清除浮动（清除浮动带来的影响）
    • 额外标签法：在父元素内容的最后添加一个块级元素，设置CSS属性clear：both
    • 单伪元素法
      
    • 双伪元素法
      
    • overflow：父元素添加CSS属性overflow：hidden

3、Flex布局（弹性布局）

浏览器提倡的布局模型，非常适合结构化布局，提供了强大的空间分布和对齐能力
Flex模型不会产生浮动布局中脱标现象，布局网页更简单、更灵活

• 组成
  • 设置方式：给父元素设置display：flex，子元素可以自动挤压或拉伸
  • 组成部分
    • 弹性容器
    • 弹性盒子
    • 主轴：默认在水平方向
    • 侧轴/交叉轴：默认在垂直方向

• 主轴对齐方式
  

  • 侧轴对齐方式

    • align- items：当前弹性容器内所有弹性盒子的侧轴对齐方式（给弹性容器设置）
    • align- self：单独控制某个弹性盒子的侧轴对齐方式（给弹性盒子设置）
      

  • 修改主轴方向
    主轴默认在水平方向，侧轴默认在垂直方向

    • 属性名：flex- direction
    • 属性值
      

  • 弹性伸缩比

    • 作用：控制弹性盒子的主轴方向的尺寸
    • 属性值：整数数字，表示占用父级剩余尺寸的份数

默认情况下，主轴方向尺寸是靠内容撑开，侧轴默认拉伸

• 弹性盒子换行
  弹性盒子可以自动挤压或拉伸，默认情况下，所有弹性盒子都在一行显示
  • 属性值
    • wrap：换行
    • nowrap：不换行（默认）
• 行对齐方式
  

（五）、网页制作

1、准备工作

• 项目目录
  网站根目录是指存放网站的第一层文件夹，内部包含当前网站的所有素材，包含HTML、CSS、图片、JavaScript等等
  • 新建文件夹-命名
    • images文件夹：存放固定使用的图片素材，例如：logo、样式修饰图等
    • uploads文件夹：存放非固定使用的图片素材，例如：商品图、宣传图需要上传的图片
    • css文件夹：存放CSS文件夹（link标签引入）
      • base.css：基础公共样式，例如：清除默认样式、设置网页基本样式
      • index.css：首页CSS样式
    • index.html：首页HTML文件
• 版心效果

2、网页制作思路

• 布局思路：先整体再局部，从外到内，从上到下，从左到右
• CSS实现思路
  • 画盒子，调整盒子范围——宽高背景色
  • 调整盒子位置——flex布局、内外边距
  • 控制图片、文字内容样式

3、header区域

• 布局
  • 通栏：宽度与浏览器窗口相同的盒子
  • 标签结构：通栏>版心>logo+导航+搜索+用户
• logo制作技巧
  • logo功能
    • 单击跳转到首页
    • 搜索引擎优化：提升网站百度搜索排名
  • 实现方法
    • 标签结构：h1>a>网站名称（搜索关键字）
    • CSS样式
• 导航制作技巧（nav）
  • 导航功能
    • 单击跳转页面
  • 实现方法
    • 标签结构：ul>li*3>a
    • 优势：避免堆砌a标签，网站搜索排名降级
    • 布局思路
      • li设置右侧margin
      • a设置左右padding
• 搜索区域（search）
  • 实现方法
    • 标签结构：.search>input+a/button
• 用户区域（user）
  • 实现方法
    • 标签结构：.user>a>img+span
• banner区域
  • 布局
    • 结构：通栏banner>版心>.left+.right
  • 左侧侧导航（left）
    • 实现方法
      • 标签结构：.left>ul>li*9>a
      • 布局思路
        a默认状态：背景图为白色右箭头
• 精品推荐（recommend）
  • 实现方法
    • 标签结构：.recommend > h3+ul+a.modify
• 精品课程（course）
  • 实现方法
    • 标签结构：.hd+.bd
    • 布局思路：盒子模型
• 前端开发工程师
• 版权区域

---

学习时间：

• 7月20日：摆烂的一天
• 7月21日：下午2点—5点
• 7月22日：上午9点—12点
• 7月23日：晚上6点-9点

---

学习产出：

• CSDN 博客笔记 1 篇