学成在线页面制作页面展示：
学习在线是典型的企业级网站。
学习互联网的目的是为了从整体上感知企业级网站的布局流程，并复习以前的知识
1 .前期准备素材在线PSD源文件开发工具=PS (切割) sublime (代码) chrome (测试) )2.前期准备工作首先做好我们的前期准备工作。 我们这次采用分离结构和样式的思想。
创建study目录文件夹。 用于存储此页面的相关内容。
在vs代码中打开study目录文件夹。
创建新的images文件夹以在study目录中存储图像。
首页文件index.html (以下简称本公司网站首页统一命名规定为index.html。
创建新的style.css样式文件。 这次采用外侧链条样式表。
将样式引入到我们的HTML页面文件中。
为了检测样式表是否成功部署，样式表将写入清除内部和外部边距的样式。
3 .页面布局的总体思路为了提高网页制作的效率，布局时通常有以下总体思路，具体如下：
1 .必须确定页面的版心。 我们可以在测量上得知。
2 .分析页面的行模块和各行模块的列模块。 其实页面布局的首要标准
3.1行中的列模块始终浮动布局，以调整每一列的大小，然后定位列。 页面布局第二标准
制作HTML结构。 我们还是遵循先有结构，后有样式的原则。 结构永远是最重要的
5 .所以，在熟悉布局结构之后再写代码是特别重要的.这需要多写多积累.
4 .页面制作确定版心
此页面的版心为1200像素，每个版心必须水平居中，因此您可以将版心定义为公共类。
. w {
width: 1200px；
margin :自动；
}
4.1 .头部制作
结构图如下：
1号把版心箱header1200 * 42的箱子水平居中，上下给margin值就可以了。 版心盒有2号盒logo图标版心盒有3号盒nav导航栏版心盒有4号盒3358www.Sina.com/搜索框版心盒有5号盒3358
在实际开发中，为search
1.li a的意思更清楚，一看这个就是有条理的列表型内容。
2 .如果直接使用a，搜索引擎就容易判断为涉嫌积累关键字(存在故意积累关键字会导致搜索引擎降低权限的风险)，从而影响网站排名
user
1 .在一行中显示导航栏，使li浮动。 li是块级元素，因此必须在一行中显示。
2 .这个nav导航栏可以不提供宽度，将来可以继续添加剩下的字符
3 .导航栏中的文字不一样，所以不要指定宽度，最好在链接a的左右两侧展开箱子
4个子盒子 必须都浮动
搜索搜索框的含义：一个搜索大箱子中包含两个表单
技巧： input和button都是行中的块元素，并且都有间隙。 使用浮动可以消除间隙。
banner制作的结构图如下。
1号箱为通栏大箱导航栏注意点：，不加宽，加高，加蓝背景。 2号框为版心重要的导航栏，必须水平居中。 3号框版心内，左对齐用 li 包含链接(li+a)的做法侧面导航栏。 4号箱版心内，右对齐注意：路线。 侧面导航栏(左侧的)
subnav框背景色黑色半透明的重要导航栏，沥包a，行高45pxa包含字符和span，当span向右浮动时，鼠标通过a，a的内容(字符和span )为蓝色course
课程表模块 (右侧的)结构图如下：
1号盒子 是 228 * 300 的盒子 右浮动 注意 浮动的元素 不会有外边距塌陷的问题1号盒子内 分为 上下 两个 子盒子2号子盒子是 上部分 我们命名为 course-hd (hd 是 head 的简写 头部的意思，我们经常用)3号子盒子是 下部分 我们命名为 course-bd (bd 是 body 的简写 主体的意思，我们经常用)精品推荐小模块
结构图如下：
复习点： 因为里面三个盒子都要垂直居中，我们利用 继承性，给 最大的盒子 一个垂直居中的代码就好了，还记得 那些 样式可以继承吗？？？ font- line- text- color大盒子水平居中 goods 精品 ，注意此处有个盒子阴影1号盒子是标题 H3 左侧浮动2号盒子 里面放链接 左侧浮动 goods-item 距离可以控制链接的 左右外边距（注意行内元素只给左右内外边距）3号盒子 右浮动 mod 修改精品推荐大模块结构图如下：
1号盒子为最大的盒子 box 版心水平居中对齐2号盒子为上面部分 box-hd -- 里面 左侧标题H3 左浮动 右侧 链接 a 右浮动3号盒子为底下部分 box-bd --- 里面是无序列表 有 10个 小li 组成小li 外边距的问题， 这里有个小技巧。 给box-hd 宽度为 1215 就可以一行装开5个 li了复习点：我们用到清除浮动，因为 box-hd 里面的盒子个数不一定是多少，所以我们就不给高度了，但是里面的盒子浮动会影响下面的布局，因此需要清除浮动。底部模块制作结构图如下：
1号盒子通栏大盒子 底部 footer 给高度 底色是白色2号盒子版心水平居中3号盒子版权 copyright 左对齐 4号盒子 链接组 links 右对齐