前端基础-CSS-05

前端CSS基础系列
前端基础-CSS-01
前端基础-CSS-02
前端基础-CSS-03
前端基础-CSS-04
前端基础-CSS-05
前端基础-CSS-06
前端基础-CSS-07

7.1. CSS属性书写顺序

• 顺序：

  1. 布局定位属性：display / position / float / clear / visibility / overflow
  2. 自身属性：width / height / margin / padding / border / background
  3. 文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
  4. 其他属性：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …

• 代码示例：

  .jdc {
      display: block;
      position: relative;
      float: left;
      width: 100px;
      height: 100px;
      margin: 0 10px;
      padding: 20px 0;
      font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
    	background: rgba(0,0,0,.5);
      color: #333;
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      -o-border-radius: 10px;
      -ms-border-radius: 10px;
      border-radius: 10px;
  }
  

7.2. 布局流程

• 为了提高网页制作的效率，布局时通常有以下的布局流程，具体如下：
  1. 必须确定页面的版心（可视区）， 我们测量可得知
  2. 分析页面中的行模块，以及每个行模块中的列模块. 其实页面布局，就是一行行罗列而成
  3. 制作HTML结构，我们还是遵循，先有结构，后有样式的原则
  4. 运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块

7.3. 制作流程

7.3.1. 头部制作

• 1号是版心盒子header 1200 * 42 的盒子水平居中对齐, 上下给一个margin值就好了。
• 版心盒子 里面包含 2号盒子 logo
• 版心盒子 里面包含 3号盒子 nav导航栏
• 版心盒子 里面包含 4号盒子 search搜索框
• 版心盒子 里面包含 5号盒子 user个人信息
• 注意，要求里面的 4个盒子 必须都浮动

7.3.2. banner制作

• 1号盒子是通栏的大盒子banner， 不给宽度，给高度，给一个蓝色背景。
• 2号盒子是版心， 要水平居中对齐。
• 3号盒子版心内，左对齐 subnav侧导航栏。
• 4号盒子版心内，右对齐 course 课程。

7.3.3. 课程表制作

• 1号盒子 是 228 * 300 的盒子 右浮动 注意 浮动的元素 不会有外边距塌陷的问题
• 1号盒子内 分为 上下 两个 子盒子
• 2号子盒子是 上部分 我们命名为 course-hd (hd 是 head 的简写 头部的意思，我们经常用)
• 3号子盒子是 下部分 我们命名为 course-bd (bd 是 body 的简写 主体的意思，我们经常用)

7.3.4. 精品推荐小模块制作

• 大盒子水平居中 goods 精品 ，注意此处有个盒子阴影
• 1号盒子是标题 H3 左侧浮动
• 2号盒子 里面放链接 左侧浮动 goods-item 距离可以控制链接的 左右外边距（注意行内元素只给左右内外边距）
• 3号盒子 右浮动 mod 修改

7.3.5. 精品推荐大模块制作

• 1号盒子为最大的盒子 box 版心水平居中对齐
• 2号盒子为上面部分 box-hd – 里面 左侧标题H3 左浮动 右侧 链接 a 右浮动
• 3号盒子为底下部分 box-bd — 里面是无序列表 有 10个 小li 组成
• 小li 外边距的问题， 这里有个小技巧。 给box-hd 宽度为 1215 就可以一行装开5个 li了

7.3.6. 底部制作

• 1号盒子通栏大盒子 底部 footer 给高度 底色是白色
• 2号盒子版心水平居中
• 3号盒子版权 copyright 左对齐
• 4号盒子 链接组 links 右对齐

7.3.7. 具体效果图展示

7.3.8. 原图

7.3.9. PSD文件链接

链接：https://pan.baidu.com/s/1YBGVnurWXI86paLjWjmAIg?pwd=hdjz
提取码：hdjz