分享一个简单的前端实战案例——学成在线首页

一、准备阶段

1.准备工具

1. 一个前端IDE，推荐vscode。
2. PS软件并且安装cutterman插件（可以去我之前的博文中寻找——居然还在“手动”切图？ 一个PS插件让你爽翻天）
3. 使用浏览器（chrome或者Firefox）进行测试。

2. 准备操作

1. 首先建立一个文件夹，并且在vscode中打开。
2. 新建images文件夹，用于存储图片素材。
3. 新建index.html文件，编写结构代码。
4. 新建style.css文件，编写样式代码。
5. 将样式引入带HTML文件中，使用<link>标签。
6. 在样式文件中写入清楚内外边距的样式，用于判断样式是否引入成功。

3. CSS属性书写顺序

1. 布局定位属性：display/float/position/overflow
2. 自身属性： width/height/margin/padding/border/background
3. 文本属性： color/font/text-decoration/text-align
4. 其他属性： content/border-radius/box-shadow/text-shadow

4. 页面布局整体思路

1. 首先确定页面的版心，这一部分可以通过测量得知。
2. 分析页面中的行模块，以及每个行模块中的列模块。
3. 一行中的列模块经常采用浮动布局，先确定每个列模块的大小，之后确定列模块的位置。
4. 完成HTML结构的制作，这部分是整个工程的基础，最为重要的部分。

二、工程阶段

1. 确定版心 ·

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

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

2.头部制作

1. 1号是版心盒子header 1200*42的盒子水平居中对齐，上下各一个margin值
2. 版心盒子里面包含2号盒子logo
3. 版心盒子里面包含3号盒子nav导航栏
4. 版心盒子里面包含4号盒子search搜索栏
5. 版心盒子里面包含5号盒子user个人信息
6. 注意： 要求里面的4个盒子必须都是浮动的

导航栏：

实际开发中，不会直接引用链接a，而是用 li 包含链接（li+a）的做法。

1. li+a语义更加清晰
2. 如果直接用a，搜索引擎容易辨别为有堆砌关键字嫌疑，从而影响网站排名

注意：

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

search搜索框：

一个search大盒子里面含有两个表单。

3.banner制作

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

4.精品推荐小模块

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

5.精品推荐大模块

1. 1号盒子为最大的盒子，box 版心水平居中对齐
2. 2号盒子为上面部分，box-hd 里面左侧标题h3左浮动，右侧链接a右浮动
3. 3号盒子为底下部分，box-bd 里面是无序列表，有10个 li 组成。
4. li 外边距的距离：给box-hd宽度为1215就可以装下五个 li

精品推荐大模块中的小模块各个都类似。

6. 底部模块

1. 1号盒子是通栏大盒子，底部footer给高度，宽度是白色
2. 2号盒子版心水平居中
3. 3号盒子版权左对齐
4. 4号盒子链接组右对齐

三、制作完成

我将网站成品的代码和素材放在我上传的资源中，大家想看的可以去我主页免费下载。