|
@@ -0,0 +1,239 @@
|
|
|
+# 1. 学成在线页面制作
|
|
|
+
|
|
|
+### 目标
|
|
|
+
|
|
|
+- **理解**
|
|
|
+ - 能够说写单页面我们基本的流程
|
|
|
+ - 能说出常见的css初始化语句
|
|
|
+ - **能说出我们CSS属性书写顺序**
|
|
|
+- **应用**
|
|
|
+ - 能利用ps切图
|
|
|
+ - 能引入外部样式表
|
|
|
+ - 能把psd文件转换为html页面
|
|
|
+
|
|
|
+学成在线的目的就是为了串联前面的所有知识。来一个春晚大联欢。
|
|
|
+
|
|
|
+**pink老师:**
|
|
|
+
|
|
|
+取义**学有所成**,为师之期望,君等成才者也,故曰学成网是也~~
|
|
|
+
|
|
|
+## 1.1 前期准备素材
|
|
|
+
|
|
|
+* 学成在线PSD源文件
|
|
|
+* 开发工具 = PS(切图) + sublime(代码) + chrome(测试)
|
|
|
+
|
|
|
+## 1.2 前期准备工作
|
|
|
+
|
|
|
+欲先善其事,必先利其器。 先把我们的前期准备工作做好, 我们本次采取结构与样式相分离思想。
|
|
|
+
|
|
|
+1. 创建 study 目录文件夹 (用于存放我们这个页面的相关内容)
|
|
|
+2. study目录内新建images 文件夹 用于保存图片。
|
|
|
+3. 新建index.html 首页html 文件(以后我们的网站首页统一规定为index.html)
|
|
|
+4. 新建style.css 样式文件。 我们本次采用外链样式表。
|
|
|
+5. 将样式引入到我们HTML页面文件中。
|
|
|
+6. 样式表写入 清除内外边距样式,来检测样式表是否引入成功。
|
|
|
+
|
|
|
+## 1.2 CSS属性书写顺序(重点)
|
|
|
+
|
|
|
+建议遵循以下顺序:
|
|
|
+
|
|
|
+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 …
|
|
|
+
|
|
|
+```css
|
|
|
+.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;
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+## 1.3 布局流程
|
|
|
+
|
|
|
+为了提高网页制作的效率,布局时通常有以下的布局流程,具体如下:
|
|
|
+
|
|
|
+1、必须确定页面的版心(可视区), 我们测量可得知。
|
|
|
+
|
|
|
+2、分析页面中的行模块,以及每个行模块中的列模块。其实页面布局,就是一行行罗列而成
|
|
|
+
|
|
|
+3、制作HTML结构。我们还是遵循,先有结构,后有样式的原则。结构永远最重要。
|
|
|
+
|
|
|
+4、然后开始运用盒子模型的原理,通过DIV+CSS布局来控制网页的各个模块。
|
|
|
+
|
|
|
+## 1.4 页面制作
|
|
|
+
|
|
|
+这个页面的版心是 1200像素 每个版心都要水平居中对齐,所以,我们干脆把版心定义为:
|
|
|
+
|
|
|
+~~~css
|
|
|
+.w {
|
|
|
+ width: 1200px;
|
|
|
+ margin: auto;
|
|
|
+}
|
|
|
+~~~
|
|
|
+
|
|
|
+#### 1) 头部制作
|
|
|
+
|
|
|
+结构图如下:
|
|
|
+
|
|
|
+<img src="media/1.png" />
|
|
|
+
|
|
|
+* 1号是版心盒子header 1200 * 42 的盒子水平居中对齐, 上下给一个margin值就好了。
|
|
|
+* 版心盒子 里面包含 2号盒子 logo
|
|
|
+* 版心盒子 里面包含 3号盒子 nav导航栏
|
|
|
+* 版心盒子 里面包含 4号盒子 search搜索框
|
|
|
+* 版心盒子 里面包含 5号盒子 user个人信息
|
|
|
+* 注意,要求里面的 4个盒子 必须都浮动
|
|
|
+
|
|
|
+#### 2)banner制作
|
|
|
+
|
|
|
+结构图如下:
|
|
|
+
|
|
|
+<img src="media/2.png" />
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+* 1号盒子是通栏的大盒子banner, 不给宽度,给高度,给一个蓝色背景。
|
|
|
+* 2号盒子是版心, 要水平居中对齐。
|
|
|
+* 3号盒子版心内,左对齐 subnav侧导航栏。
|
|
|
+* 4号盒子版心内,右对齐 course 课程。
|
|
|
+
|
|
|
+#### 3)课程表模块
|
|
|
+
|
|
|
+结构图如下:
|
|
|
+
|
|
|
+ <img src="media/6.png" />
|
|
|
+
|
|
|
+* 1号盒子 是 228 * 300 的盒子 右浮动 注意 浮动的元素 不会有外边距塌陷的问题
|
|
|
+* 1号盒子内 分为 上下 两个 子盒子
|
|
|
+* 2号子盒子是 上部分 我们命名为 course-hd (hd 是 head 的简写 头部的意思,我们经常用)
|
|
|
+* 3号子盒子是 下部分 我们命名为 course-bd (bd 是 body 的简写 主体的意思,我们经常用)
|
|
|
+
|
|
|
+#### 4)精品推荐小模块
|
|
|
+
|
|
|
+结构图如下:
|
|
|
+
|
|
|
+<img src="media/3.png" />
|
|
|
+
|
|
|
+* **复习点:** 因为里面三个盒子都要垂直居中,我们利用 继承性,给 最大的盒子 一个垂直居中的代码就好了,还记得 那些 样式可以继承吗??? font- line- text- color
|
|
|
+* 大盒子水平居中 goods 精品 ,注意此处有个盒子阴影
|
|
|
+* 1号盒子是标题 H3 左侧浮动
|
|
|
+* 2号盒子 里面放链接 左侧浮动 goods-item 距离可以控制链接的 左右外边距(注意行内元素只给左右内外边距)
|
|
|
+* 3号盒子 右浮动 mod 修改
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+#### 5)精品推荐大模块
|
|
|
+
|
|
|
+结构图如下:
|
|
|
+
|
|
|
+<img src="media/4.png" />
|
|
|
+
|
|
|
+* 1号盒子为最大的盒子 box 版心水平居中对齐
|
|
|
+* 2号盒子为上面部分 box-hd -- 里面 左侧标题H3 左浮动 右侧 链接 a 右浮动
|
|
|
+* 3号盒子为底下部分 box-bd --- 里面是无序列表 有 10个 小li 组成
|
|
|
+* 小li 外边距的问题, 这里有个小技巧。 给box-hd 宽度为 1215 就可以一行装开5个 li了
|
|
|
+* 复习点: 我们用到清除浮动 因为 box-hd 里面的盒子个数不一定多少,我们就不给高度了,但是里面的盒子浮动了, 影响下面的布局,此时需要浮动
|
|
|
+
|
|
|
+#### 6) 底部模块制作
|
|
|
+
|
|
|
+结构图如下:
|
|
|
+
|
|
|
+<img src="media/5.png" >
|
|
|
+
|
|
|
+* 1号盒子通栏大盒子 底部 footer 给高度 底色是白色
|
|
|
+* 2号盒子版心水平居中
|
|
|
+* 3号盒子版权 copyright 左对齐
|
|
|
+* 4号盒子 链接组 links 右对齐
|
|
|
+
|
|
|
+
|
|
|
+# 2. chrome调试工具
|
|
|
+
|
|
|
+“工欲善其事,必先利其器”
|
|
|
+
|
|
|
+Chrome浏览器不仅可以调试页面、JS、请求、资源、cookie,还可以模拟手机进行调试。我们现在只是使用html和css,我们先讲一下现在常用的调试。
|
|
|
+
|
|
|
+## 2.1 怎样打开Chrome的开发者工具?
|
|
|
+
|
|
|
+直接在页面上点击右键,然后选择 “检查” 快捷键 F12 或者 ctrl+shift+i
|
|
|
+
|
|
|
+ <img src="media/chrome1.png" />
|
|
|
+
|
|
|
+基本的结构布局是左边html 右边是 css
|
|
|
+
|
|
|
+<img src="media/chrome2.png" />
|
|
|
+
|
|
|
+### chrome调试数值
|
|
|
+
|
|
|
+可以鼠标点击后面的数值, 按下键盘 上箭头 是 调大 数值, 下箭头是 调小数值
|
|
|
+
|
|
|
+<img src="C:\Users\itcast\Desktop\前端基础CSS第五天\笔记\media\chrome5.png" />
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+### 快速定位css所在行数
|
|
|
+
|
|
|
+<img src="C:\Users\itcast\Desktop\前端基础CSS第五天\笔记\media\chrome6.png" />
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+## 2.2 Chrome提示的常见布局错误
|
|
|
+
|
|
|
+### 1). css单词书写错误提示
|
|
|
+
|
|
|
+用下图所示的黑色箭头,点击我们需要的 html 元素。
|
|
|
+
|
|
|
+<img src="media/chrome3.png" />
|
|
|
+
|
|
|
+### 2). css无显示
|
|
|
+
|
|
|
+声明类名和html调用名不一致 或者 css文件引入不对 或者 这个样式的前面 多余了一些符号影响的
|
|
|
+
|
|
|
+<img src="media/chrome4.png" />
|
|
|
+
|
|
|
+### 3). html 结构不匹配(重要)
|
|
|
+
|
|
|
+左侧 展开可以看到html 标签是否匹配
|
|
|
+
|
|
|
+ <img src="media/chrome7.png" />
|
|
|
+
|
|
|
+### 4). 通过颜色判断盒子
|
|
|
+
|
|
|
+蓝色是 盒子的 宽度高度 青色是 内边距 橙色 是外边距 通过这个很方便的看到盒子给的范围
|
|
|
+
|
|
|
+ <img src="media/chrome8.png" />
|
|
|
+
|
|
|
+### 5)看看你有如下错误吗
|
|
|
+
|
|
|
+ <img src="media/a.png" />
|
|
|
+
|
|
|
+ <img src="media/b.png" />
|
|
|
+
|
|
|
+ <img src="media/c.png" />
|
|
|
+
|
|
|
+ <img src="media/d.png" />
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ <img src="media/e.png" />
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|