PC端静态网页应用开发流程

eg:拉勾网
版心：是指网页中主要内容所在的区域。一般在浏览器窗口中水平居中显示，从而让用户的实现更集中。
制作方法：使用标准流中的margin居中方法。
页面布局流程
1.确定页面的版心(可视区域)。
2.分析页面的行模块，以及每个行模块中的列模块。
3.制作HTML页面，CSS文件。
4.CSS初始化，然后开始运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块。
常见的布局类型
一列固定宽度且居中
两列左窄右宽型
通栏平均分布型
实际应用中可能同时包括两种以上的类型
文件结构
网站中会包含多个.html文件和.css文件以及图片等多媒体文件，我们需要使用不同的文件夹分类进行整理。
文件夹最基本的结构包括：.html,.css,.images
head内部配置

• <title>网页标题
• 标签页icon图标
  图标的文件名要求以favicon.ico命名，文件需要与index.html文件同级存储。
  使用方法，通过<link>标签进行引用，设置的属性包括：
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
• css分级引入
  css文件设置需要根据功能进行分层管理：目的是为了提取相互多个页面公共的部分，提供多个HTML同时引用。公共的部分也可以划分范围，有的是所有网站能用的，有的是某几个网站公共的部分。
  css常见的分层组织：清除默认样式的css，网站的公共样式css，每个页面自己独有的css。
  注意书写顺序，引入多层css时，需要按照后面的层叠前面的css进行设置，使用页面独有的样式层叠公共的样式。
  清除默认样式
• 使用范围：所有网站
• 制作方法：工作积累，或使用网上已有资源。
• 命名习惯：reset.css
• 引入时必须作为第一层引入，网页中独有的样式可以层叠掉reset中的样式。
• 注意：reset.css文件写完后不允许再次更改。
  公共样式
• 使用范围：单独的一个网站所有的页面、几个页面。
• 制作方法：从设计图中观察，找到所有页面或多个页面公共的部分，划分成不同的模块分别进行.css文件的书写。
• 命名习惯：common.css或者模块名.css
• 多个网站页面的公共部分写完之后不允许后期更改，一旦更改，多个引用的HTML页面都会法神变化。需要注意类名的使用，公共文件名的类名一般不要在其他的css文件中再用
• 引入顺序：一般在reset.css文件后面，单独样式文件前面。
  页面独有样式
• 使用范围：单独的一个HTML页面
• 制作方法：找到页面独有的二其他页面没有的样式，单独书写在一个.css文件中，只有对应的HTML文件能够引用。
• 命名习惯：一般文件名与HTML的文件名保持一致，例如index.css，如果拆分的更细致可以使用多个单词的拼写，例如index_banner.css等。
• 引入顺序：在所有公共样式后面。
• 注意：使用单独样式文件去层叠前面共偶那个样式是，需要注意选择器权重。
  整个css分层引入的顺序：reset.css/common.css/index.css
  header区域
• header：网页顶部结构常用命令，同名GV长包含logo、导航nav等内容。
• 布局类型：通栏北京，内部暗含版心居中的主要内容，内容包含左、右浮动的两部分。
• 整体结构：100%的div>版心的div
• 注意：为了避免更改公共的版心样式，<div>需要重新添加一个class属性值。
• logo：使用h1>a结构，可以适当添加SEO搜索的关键字。
• nav导航：常用ul>li>a列表结构搭建。
  login-banner区域
• login：登录
• 布局类型：通栏背景，内部包含版心居中的主要内容，内容包含左、右浮动的两部分
• 注意：实际网页中，部分表单效果通常使用其他标签+css样式的效果进行模拟，比如按钮、下拉菜单等
  search区域
• search：搜索框部分
• 布局类型：通栏背景，内部包含居中的主要内容
• 搜索框区域表单：需要添加<form>标签，保证数据能够提交数据库
• 补充：文本框<input>标签通过一个placeholder属性，设置默认提示文本，点击文本框输入文字后，placeholder属性的内容会自动消失
  content区域
  *content：网页的主要内容区域，用于展示更多的产品、信息等。
  *布局：通栏，底部设置边框，内容版心居中。
  *content内部包含四个部分：.main主要区域列表焦点图，.hot_recruit热门职位，.hot_company热门公司，.hot_linnks热门链接。
  .main
  布局类型：左窄右宽的两列布局，通过浮动实现。
  aside：侧边栏常用类名，整体为无序列表结构，表现为一种特殊的下拉菜单效果，鼠标移上<li>后显示内部的子级元素。下拉菜单的列表中，推荐使用定义列表结构搭建。
  注意：侧边栏aside这种结构中的数据是可能动态发生变化的，我们需要搭建HTML结构和正确的CSS样式，让HTML结构足够清晰，方便后期后端开发人员传入数据。
  banner：焦点图部分为滚动轮播图效果。
  布局方式：整体使用定位制作，与淡入淡出轮播图不同的是图片所在无序列表中，图片需要浮动显示，而不是定位到同一点，特殊的需要添加魔术替换图片，方便后期JS制作。
  （css3新增的盒子阴影属性box-shadow：水平阴影位置 垂直阴影位置 模糊距离 阴影尺寸 阴影颜色 内/外阴影;box-shadow:3px 3px 5px 4px rgb(0,0,0);)
  .hot_recruit部分
  热门职位部分是一种tab选项卡结构，并且与后面的热门公司和热门链接有类似的结构和样式，需要谨慎提取公共样式，通过公共类名设置CSS，热门职位独有的样式需要使用单独的类名设置，避免影响其他两个部分。
  布局类型：tab栏选项卡结构，整体为上下对齐的版心结构。
  标题部分：浮动制作，当前展示的部分标签使用current的类名进行标记，设置特殊样式。
  详细内容布局类型：平均分布型，使用浮动制作。
  （多余文字显示成…省略号形式，通过三行代码实现:white-space:nowrap;overflow:hidden;text-overflow:ellipsis;）
  footer区域
  footer：页面底部的常用名。
  布局类型：通栏背景，内部包含版心居中的主要内容，内容包含左、右浮动的两部分。
  其他登录方式部分：左浮动，注意七种的鼠标移上显示定位元素效果。
  其他链接服务部分：使用定义列表制作结构。
  copyright区域
  版权区域一般是一些文字性信息，样式比较简单。
  布局类型：通栏北京，内部包含版心居中的主要内容，内容包含左、右浮动的两部分。
  backtop区域
  返回顶部的设置，通常使用<a>进行结构搭建。
  定位方式：固定定位，位置保持与版心固定的位置，避免由于分辨率不同元素位置差异太大。
  动画效果：使用JS实现
  快速搭建公共结构
  首页制作完毕后，分析与其他页面的共同之处，按照模块进行拆分负值选择。
  方法：直接负值index,html文件，删除不需要的结构，保留公司也需要的公共结构部分，同时删除不需要的css文件引入的<link>标签，保留需要的公共样式文件。
  注意：记得更改nav导航中的当前选中也得class。
  公共结构搭建完毕后，可以继续书写公司页面独有的结构和样式。

原文：https://www.cnblogs.com/lw-wp/p/14141745.html