1. 学成在线页面制作
目标
- 理解
- 能够说写单页面我们基本的流程
- 能说出常见的css初始化语句
- 能说出我们CSS属性书写顺序
- 应用
- 能利用ps切图
- 能引入外部样式表
- 能把psd文件转换为html页面
1.2 CSS属性书写顺序(重点)
建议遵循以下顺序:
- 布局定位属性:display / position / float / clear / visibility / overflow(建议 display 第一个写,毕竟关系到模式)
- 自身属性:width / height / margin / padding / border / background
- 文本属性:color / font / text-decoration / text-align / vertical-align / white- space / break-word
- 其他属性(CSS3):content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …
1.3 布局流程
为了提高网页制作的效率,布局时通常有以下的布局流程,具体如下:
1、必须确定页面的版心(可视区), 我们测量可得知。
2、分析页面中的行模块,以及每个行模块中的列模块。其实页面布局,就是一行行罗列而成
3、制作HTML结构。我们还是遵循,先有结构,后有样式的原则。结构永远最重要。
4、然后开始运用盒子模型的原理,通过DIV+CSS布局来控制网页的各个模块。
1.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, 不给宽度,给高度,给一个蓝色背景。
- 2号盒子是版心, 要水平居中对齐。
- 3号盒子版心内,左对齐 subnav侧导航栏。
- 4号盒子版心内,右对齐 course 课程。
3)课程表模块
结构图如下:
- 1号盒子 是 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号盒子版心水平居中
- 3号盒子版权 copyright 左对齐
- 4号盒子 链接组 links 右对齐
快速定位css所在行数
2.2 Chrome提示的常见布局错误
1). css单词书写错误提示
用下图所示的黑色箭头,点击我们需要的 html 元素。
2). css无显示
声明类名和html调用名不一致 或者 css文件引入不对 或者 这个样式的前面 多余了一些符号影响的
3). html 结构不匹配(重要)
左侧 展开可以看到html 标签是否匹配