typora-copy-images-to: media

第01阶段.WEB基础：css-day06笔记-学成在线网页制做css

1、学成在线页面制做

目标

• 理解
  • 可以说写单页面咱们基本的流程
  • 能说出常见的css初始化语句
  • 能说出咱们CSS属性书写顺序
• 应用
  • 能利用ps切图
  • 能引入外部样式表
  • 能把psd文件转换为html页面

学成在线的目的就是为了串联前面的全部知识。来一个春晚大联欢。html

pink老师：web

取义学有所成，为师之指望，君等成才者也，故曰学成网是也~~chrome

1. 前期准备

1) 前期准备素材

• 学成在线PSD源文件
• 开发工具 = PS（切图） + sublime（代码） + chrome（测试）

2) 前期准备工做

欲先善其事，必先利其器。 先把咱们的前期准备工做作好， 咱们本次采起结构与样式相分离思想。浏览器

1. 建立 study 目录文件夹 (用于存放咱们这个页面的相关内容)
2. study目录内新建images 文件夹 用于保存图片。
3. 新建index.html 首页html 文件（之后咱们的网站首页统一规定为index.html)
4. 新建style.css 样式文件。 咱们本次采用外链样式表。
5. 将样式引入到咱们HTML页面文件中。
6. 样式表写入 清除内外边距样式，来检测样式表是否引入成功。

2. CSS属性书写顺序(重点)

建议遵循如下顺序：cookie

1. 布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）
2. 自身属性：width / height / margin / padding / border / background
3. 文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
4. 其余属性（CSS3）：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;
    color: #333;
    background: rgba(0,0,0,.5);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -o-border-radius: 10px;
    -ms-border-radius: 10px;
    border-radius: 10px;
}

3. 布局流程

为了提升网页制做的效率，布局时一般有如下的布局流程，具体以下：svg

一、必须肯定页面的版心（可视区）， 咱们测量可得知。工具

二、分析页面中的行模块，以及每一个行模块中的列模块。其实页面布局，就是一行行罗列而成布局

三、制做HTML结构。咱们仍是遵循，先有结构，后有样式的原则。结构永远最重要。开发工具

四、而后开始运用盒子模型的原理，经过DIV+CSS布局来控制网页的各个模块。

4. 页面制做

这个页面的版心是 1200像素 每一个版心都要水平居中对齐，因此，咱们干脆把版心定义为：

.w {
    width: 1200px;
    margin: auto;
}

1) 头部制做

结构图以下：

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

以上的章节，上次课讲过，今天从下面的开始讲：

2) banner制做

结构图以下：

• 1号盒子是通栏的大盒子banner， 不给宽度，给高度，给一个蓝色背景，还有一个背景图，注意背景图片要水平居中center，垂直top，不平铺。

• **2号盒子是版心 w ** ， 要水平居中对齐。

• 3号盒子版心内，左对齐 subnav侧导航栏。

• 4号盒子版心内，右对齐 course 课程。

3) 课程表模块

结构图以下：

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

4) 精品推荐小模块

结构图以下：

• 复习点： 由于里面三个盒子都要垂直居中，咱们利用 继承性，给 最大的盒子 一个垂直居中的代码就行了，还记得 那些 样式能够继承吗？？？ font- line- text- color
• 大盒子水平居中 goods 精品 ，注意此处有个盒子阴影
• 1号盒子是标题 H3 左侧浮动
• 2号盒子 里面放连接 左侧浮动 goods-item 距离能够控制连接的 左右外边距（注意行内元素只给左右内外边距）
• 3号盒子 右浮动 mod 修改

5) 精品推荐大模块

结构图以下：

• 1号盒子为最大的盒子 box 版心水平居中对齐
• 2号盒子为上面部分 box-hd – 里面 左侧标题H3 左浮动 右侧 连接 a 右浮动
• 3号盒子为底下部分 box-bd — 里面是无序列表 有 10个 小li 组成
• 小li 外边距的问题， 这里有个小技巧。 给box-hd 宽度为 1215 就能够一行装开5个 li了
• 复习点： 咱们用到清除浮动 由于 box-hd 里面的盒子个数不必定多少，咱们就不给高度了，可是里面的盒子浮动了， 影响下面的布局，此时须要浮动

6) 底部模块制做

结构图以下：

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

2、chrome调试工具

“工欲善其事，必先利其器”

Chrome浏览器不只能够调试页面、JS、请求、资源、cookie，还能够模拟手机进行调试。咱们如今只是使用html和css，咱们先讲一下如今经常使用的调试。

1. 怎样打开Chrome的开发者工具？

直接在页面上点击右键，而后选择 “检查” 快捷键 F12 或者 ctrl+shift+i

基本的结构布局是左边html 右边是 css

1) chrome调试数值

能够鼠标点击后面的数值， 按下键盘 上箭头 是 调大 数值， 下箭头是 调小数值

2) 快速定位css所在行数

2. Chrome提示的常见布局错误

1) css单词书写错误提示

用下图所示的黑色箭头，点击咱们须要的 html 元素。

2) css无显示

声明类名和html调用名不一致 或者 css文件引入不对 或者 这个样式的前面 多余了一些符号影响的

3) html 结构不匹配(重要)

左侧 展开能够看到html 标签是否匹配

4) 经过颜色判断盒子

蓝色是 盒子的 宽度高度 青色是 内边距 橙色 是外边距 经过这个很方便的看到盒子给的范围

5) 看看你有以下错误吗