拉勾网项目制作-首页index.html结构布局

注意：侧边栏aside这种结构中的数据是可能动态发生变化的，我们需要搭建好HTML结构和正确的css样式，让HTML结构足够清晰，方便后期后端开发人员传入数据。

banner：焦点图部分为滚动轮播图效果，点击滚动特效待后期学完JavaScript后制作。

布局方式：整体使用定位制作，与淡入淡出轮播图不同的是图片所在无序列表中，

图片需要浮动显示，而不是定位到同一点。特殊的需要添加魔术替换图片，方便后期JavaScript制作。

补充：box-shadow

CSS3中新增的盒子阴影属性box-shadow

box-shadow：水平阴影位置 垂直阴影位置 模糊距离 阴影尺寸 阴影颜色 内/外阴影；

box-shadow：3px 3px 5px4px rgb（0，0，0）；

补充：多余文字显示成…省略号

.hot_recruit部分

热门职位部分是一种tab选项卡结构，并且与后面的热门公司和热门链接有类似的结构和样式，

需要谨慎提取公共样式，通过公共类名设置CSS，热门职位独有的样式需要使用单独的类名设置，避免影响其他两个部分。

布局类型：tab栏选项卡结构，整体为上下对齐的版心结构。

标题部分：浮动制作，当前展示的部分标签使用current的类名进行标记，设置特殊样式。

详细内容布局类型：平均分步型，使用浮动制作。

补充：多余文字显示成..省略号形式，通过三行代码实现。

.hot-company部分

热门公司部分与热门职位结构类似。

本模块需要更改一些公共样式，注意使用新的类名进行覆盖，保证选择器的权重足够。

.hot-company部分

热门公司部分与热门职位结构类似。

注意：链接内容部分涉及到后期JavaScript特效，鼠标点击显示和隐藏，

需要提前将HTML结构和css样式书写完整，暂时设置为display:none；

footer区域

footer：页面底部的常用名。

布局类型：通栏背景，内部包含版心居中的主要内容，内容包含左、右浮动的两部分。

其他登录方式部分：左浮动，注意其中的鼠标移上显示定位元素效果。

鼠标移上，设置为block，默认设置为none隐藏

其他链接服务部分：使用定义列表制作结构。

copyright区域

版权区域一般是一些文字性信息，样式较为简单。

布局类型：通栏背景，内部包含版心居中的主要内容，内容包含左、右浮动的两部分。

backtop区域

返回顶部的设置，通常使用进行结构搭建。

快速搭建公共结构

首页制作完毕后，分析与其他页面的共同之处，按照模块进行拆分复制选择。

方法：直接复制index.html文件，删除不需要的结构，保留公司页需要的公共结构部分，

同时删除不需要的css文件引入的标签，保留需要的公共样式文件。

注意：记得更改nav导航中的当前选中页的class。

公共结构搭建完毕后，可以继续书写公司页面独有的结构和样式。