学成在线项目

1.典型的企业级网站
2.目的是为了整体感知企业级网站布局流程以及复习以前知识。

一、准备素材和工具

1. 学成在线psd源文件
2. 开发工具=PS（切图）/cutterman插件+vscode（代码）+chrome（调试）

二、案例准备工作

采用结构与样式相分离思想：

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

三、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

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

四、页面布局整体思路

为了提高网页制作的效率，布局时通常有以下的整体思路

1. 必须确定页面的版心（可视区），测量可得知
2. 分析页面中的行模块，以及每个行模块中的列模块。页面布局第一准则
3. 一行中的列模块经常浮动布局，先确定每个列的大小，之后确定列的位置。页面布局第二准则
4. 制作HTML结构。遵守先有结构，后有样式的原则，结构永远最重要。
5. 先理清布局结构，再写代码尤为重要。多积累

五、确定版心

这个页面的版心时1200像素，每个版心都要水平居中对齐，可以定义版心为公共类：

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

六、头部制作

1. 1号是版心盒子header 1200*42的盒子水平居中对齐，上下给一个margin值就可以
2. 版心盒子里面包含2号盒子logo
3. 版型盒子里面包含3号盒子nav导航栏
4. 版心盒子里面包含4号盒子search搜索框
5. 版心盒子包含5号盒子user个人信息
6. 注意：要求里面四个盒子必须都是浮动
   
   导航栏注意点：
   实际开发中，不会直接用链接a而是用li包含链接（li+a）的做法
7. li+a语义更加清晰，一看这就是有条理的列表型内容
8. 如果直接用a，搜索引擎容易辨别为有堆砌关键字嫌疑（故意堆砌关键字容易被搜索引擎有降权的风险），从而影响网站排名

注意：

1. 让导航栏一行显示，给li加浮动，因为li是块级元素，需要一行显示。
2. 这个nav导航栏可以不给宽度，将来可以继续添加其余文字
3. 因为导航栏里面文字不一样多，所以最好给链接a左右padding撑开盒子，而不是指定宽度

search搜索框：
一个search大盒子包含2个表单：input文本框和button按钮

七、banner制作

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

八、精品推荐小模块

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

九、精品推荐大模块

1. 1号盒子为最大的盒子，box版心水平居中对齐
2. 2号盒子为上面部分，box-hd，里面左侧标题h3左浮动，右侧链接a右浮动
3. 3号盒子为底下部分，box-bd，里面是无序列表，由10个小li组成
4. 小li外边距