接下来我们进行剩下部分的制作，这一块区域背景色是灰色的，不再是纯白#ffffff色的。先制作前两块块区域。顺便把左边的悬浮导航制作一下。

1.这一块我原以为只有图片的上半部分是图片，下半部分红色区域是css实现的，结果在网页扒图的时候发现，这两部分是一个整体，是一张图片。 2.只需要往其中添加一个ul列表，定位到合适的位置就行。这么一来就简单多了。

1.这个背景图是一张大图，同时还有一张上半部分的图，便于添加ul列表，撑开内容。 2.我们发现这整个区域都是插入了链接，包括图片的上半部分。显然链接不能添加到整块背景图上。所以分开进行链接的添加。

下来就是图片底部ul列表的添加。因为li内容大同小异，我们只拷贝了一块代码，li 是由一张图片两行字组成的，分别给图片和文字添加了链接

先确定presale的大小，进行定位

然后就是分区域进行设置调整，先将背景图添加好。通过绝对定位的方法定位到页面中间。

小图片的插入，宽度设置100%，就是宽度继承父容器的宽度。

ul列表区域大小的设定，将其定位到背景图的底部，并且另文本居中。

列表的每一项li大小，利用浮动让li排列在一行

li中的小图片的设置

两行文字的设置，大小，颜色等直接扒网站的就可以，可以节省一点时间。

因为代码繁多，我只将结构进行分析，对一些比较有难度的css样式进行一个叙述，对于简单的就不进行叙述了，减少篇幅。

这块区域大致分为左右两块，左边分为一个top和下面的ul列表，右边同样分为两块上面和下面。

left-top的结构，这一块可细分为四块，一个图片，两段文字，以及最右边的两段文字。

left-bottom的结构制作，这一块区域是一个ul列表，li中还是比较复杂的，可以分为4块内容，图片，标题，价格，进度条。同样li大同小异，只拷贝其中一个li

right的制作和left类似。特别需要注意的一点就是大图的中间又嵌套了一个div标签 悬浮导航的制作，主体由ul构成。再添加图标到导航的顶部就可以，也是比较简单的。

确定first区域的大小，另其居中

设置左区域的大小，背景色。border-radius是给区域添加圆角，一般是写像素大小。50%就是一个圆区域。

top的下面有一条类似下边框的横线，注意：这一条横线并不是下边框，如果是下边框的话，这条横线的长度是整个top区域的宽度，而不是我们所看到的长度较短的横线。 那么这个横线是怎么制作的呢？是通过::after 伪类选择器，是通过content添加的页面中的，

在top的右边，文字有一个背景色，这个背景色不是通过添加背景图实现，而是通过css样式的颜色渐变实现的。 这个渐变是横向渐变的。llinear-gardient 渐变默认是纵向渐变。我们可以添加一个角度 90 deg，至于具体的渐变过程，在开发过程中，在设计稿中应该可以找到。例如蓝湖等平台。

如果遇到超长的文本，不想超出标签设定区域，可以添加溢出隐藏，word-break是针对文本折行。break-all 可以在文本的任意位置进行折行。

下面我们说一下进度条的实现 首先呢进度条分为两块，颜色亮暗不同，给父容器添加一个暗的进度条，设置长度为100，给子容器添加亮的进度条，长度我们根据需求进行设置，例如想要达到56%的效果，我们就设置长度为56px，为了方便，我将长度直接添加在了标签上面。

右边有一块有意思的区域，div嵌套在了图片之中，并且div区域还有外边框，他是通过给父容器添加一个边框设置圆角，子容器区域设置圆角，实现了这一功能。

首页制作暂时先到这里。。。