介绍网站首页的主体内容样式设计过程

24.3.4　编写网站首页主体布局

下面详细介绍网站首页的主体内容样式设计过程。

【操作步骤】

第1步，设计网站首页（index.html）的主体布局。

网站首页主体部分HTML结构如下：

第2步，可以使用float浮动方式来达到布局需求，CSS代码如下：

第3步，向往主体结构中放置HTML代码来充实网页，从而达到前面的设计图效果。首先从左边开始，在前面的设计图中，左侧有一个模块，即“商品分类”，其HTML结构如下：

第4步，为这个模块添加相应的样式，使之能满足需求。另外，在“商品分类”模块中，有部分商品是热销产品，那么需要为这些元素添加高亮（hot）样式，代码如下：

应用样式后，页面呈现效果如图24.5所示。

图24.5　左侧主体内容设计效果

第5步，左侧完成后，接下来完成首页主体内容的右侧部分的布局。从前面的设计图中可以知道，右侧部分分为上下两个部分，而上面部分又分为左右两个部分。下面先来完成上面的部分，它们的HTML结构如下：

第6步，在“大屏广告”部分，先为它设置固定的高度和宽度，然后使用overflow:hidden来隐藏溢出的部分，接下来为它添加position:relative属性，然后为里面的img元素分别添加position:absolute属性。CSS代码如下：

第7步，对“大屏广告”下方的缩略图设置样式。可以使用position:absolute和bottom:0的方式让缩略图处于最下方，然后使用float:left的方式让缩略图以水平方式排列。CSS代码如下：

应用样式后，网页呈现如图24.6所示的效果。

图24.6　“大屏广告”设计效果

第8步，“最新动态”部分由于也都是一些列表元素，所以布局可以借鉴之前模块的样式设计。CSS代码如下：

应用样式后，网页呈现如图24.7所示的效果。

图24.7　“最新动态”设计效果

第9步，在首页还有最后一块内容，那就是“品牌活动”部分，其HTML代码如下：

第10步，从代码可知，“品牌活动”分为jnBrandTab和jnBrandContent两部分。jnBrandTab是品牌活动分类，而jnBrandContent则是品牌活动的内容。jnBrandTab部分的CSS代码如下：

第11步，jnBrandContent的内容比较多，但宽度有限，所以可以使用overflow:hidden来隐藏多余部分。在后面的内容中将通过脚本来显示多余的部分，CSS代码如下：

应用样式后，网页呈现如果24.8所示的效果。

图24.8　“品牌活动”设计效果

24.3.5　编写详细页主体布局

详细页（detail.htrnl）的头部和左侧样式与首页（index.html）一样，因此只需要修改内容右侧即可。下面介绍网站详细页的主体内容样式设计过程。

【操作步骤】

第1步，根据前面设计的效果图可以把右侧结构分为左列和右列。在左列有一张大图片、几张小图片和一个选项卡。右列则是一些商品信息介绍，详细页主体布局的HTML结构代码如下：

第2步，前面已经为商品分类设置了样式，接下来只要为jnProitem和jnDetails设置样式即可，分别为左右两个模块设置float属性和width属性，从而达到布局目的。CSS代码如下：

第3步，设计产品大图和产品缩略图。继续使用float:left;让缩略图以水平方式排列，CSS代码如下：

第4步，在前面章节示例中曾经设计过选项卡，所以可以移植设计，代码如下：

第5步，设计颜色、尺寸和评分。这些元素的样式原理和前面类似，这里不再赘述，读者可以在源代码中查看相关CSS样式。

应用样式后，网页呈现如图24.9所示的效果。

图24.9　详细页设计效果

此时，网站所需的两个页面的样式都已经完成，与之前设计的效果图一致。接下来将用jQuery给网站添加一些交互效果。