【53】静态网页开发(3)——首页index.html结构布局技巧

★文章内容学习来源：拉勾教育大前端就业集训营

本篇目录：

语义化标签的使用
以拉勾网页为例分析：

准备工作	确定版心、分析页面中行模块及其中列模块
1	`<header>`区域
2	`.login-banner`区域
3	`.search`区域
4	`<main>`区域
5	`.hot-recruit`区域
6	`.hot-company`区域
7	`.more`区域
8	`<footer>`区域
9	`.back-top`区域

一、语义化标签的使用

点击回顾【48】HTML5(2)——新增①标签语义化

二、以拉勾网页为例分析

点击查看完整网页

（以下只展示了部分）

确定版心、分析页面中行模块及其中列模块

页面布局：两列左窄右宽型+通栏平均分布型

1. `<header>`区域

header : 网页顶部结构常用标签，通常包含logo、小导航等内容;
布局类型∶通栏背景，内部包含版心居中的主要内容：
100%的 div > 版心的 div;
注意∶为了避免更改公共的版心样式，<div> 需要重新添加一个class 属性值。
logo ∶ 使用 h1 > a结构，可以适当添加 SEO 搜索的关键字;
nav 导航∶常用 ul > li > a 列表结构搭建；
代码部分可以参见我上传的资源部分，链接：拉勾网pc端静态页面仿写
拉勾网的header区域分为左右浮动两大块,具体区分如图：

2. `.login-banner`区域

这一区域用div标签区分，类名为.login-banner；
布局类型：通栏背景，内容在版心内，分为左右两部分；
左边是广告图，右边是登录部分；
划分区域思路与<header>区域是类似的；
具体代码可以参见：拉勾网pc端静态页面仿写

3.`.search`区域

搜索框部分；
布局类型：通栏背景，内容水平居中；
搜索框区域表单：需要添加<form>标签，保证数据能够提交；
文本框可以添加一个placeholder属性，设置默认提示文本，点击文本框输入文字后，placeholder属性的内容会自动消失；

<input type="text" placeholder="搜索职位、公司或地点">

代码参见：拉勾网pc端静态页面仿写
区域划分思路与之前都是类似的，

4. `<main>`区域

布局类型∶左窄右宽的两列布局，通过浮动实现。
左边，<aside>侧边栏常用命名，整体为无序列表结构，表现为一种特殊的下拉菜单效果，鼠标移上 <li> 后显示内部的子级元素。下拉菜单的列表中，推荐使用定义列表结构搭建。
注意∶侧边栏 aside 这种结构中的数据是可能动态发生变化的，我们需要搭建好HTML 结构和正确的 css 样式，让HTML 结构足够清晰，方便后期后端开发人员传入数据。焦点图部分为滚动轮播图效果，点击滚动特效待后期学完 JavaScript 后制作。
右边.banner，布局方式∶ 整体使用定位制作，与淡入淡出轮播图不同的是图片所在无序列表中，图片需要浮动显示，而不是定位到同一点。
代码参见：拉勾网pc端静态页面仿写

5. `.hot-recruit`区域

热门职位部分是一种tab 选项卡结构，并且与后面的热门公司和热门链接有类似的结构和样式，需要谨慎提取公共样式，通过公共类名设置 CSS，热门职位独有的样式需要使用单独的类名设置，避免影响其他两个部分。
布局类型∶ tab 栏选项卡结构，整体为上下对齐的版心结构。
标题部分∶浮动制作，当前展示的部分标签可以使用 current 的类名进行标记，设置特殊样式。
详细内容布局类型∶平均分步型，使用浮动制作。
补充∶ 多余文字显示成…省略号形式，通过三行代码实现。

  /*这三行是用来设置如果超过就以...显示*/  
    white-space: nowrap;/*不换行，一直往后写*/            
    overflow: hidden;   /*溢出隐藏*/
    text-overflow: ellipsis; /*溢出后以...显示*/