学成在线案例（开发具体步骤）

目录

 

一、准备素材和工具

二、案例准备工作

三、CSS属性书写顺序(重点)

四、页面布局整体思路

五、具体开发

5.1 确定版心

5.2 头部制作

5.3 banner制作

5.4 精品推荐小模块制作

5.5精品推荐大模块

5.6底部模块

六、具体代码以及效果图如下

6.1 HTML文件：

6.2 CSS文件：

---

 

一、准备素材和工具

1．学成在线PSD源文件。

2．开发工具=PS(切图)/cutterman插件+vscode(代码) + chrome(测试)。

二、案例准备工作

我们本次采取结构与样式相分离思想:

1.创建study目录文件夹（用于存放这个页面的相关内容）。

2.用vscode打开这个目录文件夹。

3. study目录内新建images文件夹，用于保存图片。

4.新建首页文件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 / backgroung:linear-gradient...

四、页面布局整体思路

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

1.必须确定页面的版心（可视区），通过测量可得知。

2.分析页面中的行模块，以及每个行模块中的列模块。其实页面布局第一准则。

3.一行中的列模块经常浮动布局,先确定每个列的大小之后确定列的位置，页面布局第二准则4．制作HTML结构。我们还是遵循，先有结构，后有样式的原则。结构永远最重要。

5.所以先理清楚布局结构,再写代码尤为重要.这需要我们多写多积累。

五、具体开发

5.1 确定版心

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

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

5.2 头部制作

1号是版心盒子header 1200*42的盒子水平居中对齐，上下给一个margin值就可以

版心盒子里面包含2号盒子logo

版心盒子里面包含3号盒子nav导航栏

版心盒子里面包含4号盒子search搜索框

版心盒子里面包含5号盒子user个人信息

注意：要求里面的4个盒子必须都是浮动

导航栏注意点:
实际开发中，不会直接用链接a而是用li包含链接(li+a)的做法。
1.li+a语义更清晰，一看这就是有条理的列表型内容。
2.如果直接用a，搜索引擎容易辨