注意！静态网页开发的流程及步骤（静态网页设计图）静态网站建设，

PC端静态网页开发及项目

开发流程

需求分析：对要开发的产品进行定位对比如产品类型，产品功能，面向的客户群，达到的目的等。整体规划：根据需求分析的结论，确定网站中要展示的内容，层次，展示形式等，然后给出对应内容的文案。界面设计：由设计师根据整体规划的结果，将网站的各个页面进行设计，最终给出设计图，颜色，数据信息等。前端程序设计：前端开发人员将根据得到的设计图，进行代码的编写，实现网页的界面和功能。前后端系统整合：后端开发人员进行数据设计，将程序功能与界面进行整合，前后端配合进行功能调试。测试验收：项目经理和相关测试人员根据项目前期策划为指导对产品进行测试验收，测试产品的交互效果，功能实现效果等。

页面开发常见概念和布局流程

版心：是指网页中主要内容所在的区域。一般在浏览器窗口中水平居中显示，从而让用户的视线更集中。常见宽度：100px,1200px制作方法：margin居中。

布局流程：

1、确定页面的版心。2、分析页面中的行模块，以及每个行模块中的列模块。3、制作HTML页面，CSS文件。4、css初始化，然后开始利用盒子模型原理，通过DIV+CSS布局来控制网页的各个模块。

head内部配置

文件结构：

文件基本结构包括：css文件夹，inages文件夹，index.html。

标签页icon图标

大部分网页在标签页标题位置会添加网站的icon图标。

图标的文件名要求以favicon.ico命名，文件需要与index.htmhttps://www.lgstatic.com/lg-www-fed/common/static/favicon_faed927.icol文件同级存储。

使用方法，通过link标签进行引用，设置的属性包括：

<link rel="dhortcut icon" href="favicon.ico" type="image/x-icon">

CSS分级引入

css文件设置需要根据功能进行分层管理：目的是为了提取出多个页面公共部分，提供讴多个HTML同时引用。公共部分也可以划分范围，有的是所有网站能用，有的是某几个网站的公共部分。

css常见分层组织：清除默认样式的css，每个页面自己独有的css。

清除默认样式：

使用范围：所有的网站都能使用。制作方法：自己工作中进行积累，或者使用网络已有资源。命名习惯：reset.css

引入时必须作为第一层引入，网页中独有的样式可以层叠掉reset中的样式。

注意：reset.css写完后不允许更改。

公共样式：

适用范围：单独的一个网站所有的页面，几个页面。制作方法：从设计图观察，找到所有页面或者多个页面公共部分，划分成不同的模块分别进行.css文件书写。命名习惯：common.css或者模块名.css

多个网站页面的公共部分书写完之后不允许后期更改，一旦更改，多个运用的HTML页面都会发生变化。需要注意类名的使用，公共文件的类名一般不要在其他的css文件中再用。

引入顺序：一般在reset.css后面，单独样式文件前面。

首页布局

header区域

header：网页顶部结构常用命名，通常包括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_links热门链接。

main部分

布局类型：左窄右宽的两列布局，通过浮动实现。aside：侧边栏常用命名，整体为无序列表结构，表现为一种特殊的下拉菜单效果，鼠标移上li之后显示内部的子级元素。下拉菜单列表中，推荐使用定义列表结构搭建。

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

banner：焦点图部分为滚动轮播图效果，点击滚动特效等待学完JavaScript后制作。布局方式：整体使用定位制作，与淡入淡出轮播图不同的是图片所在的无序列表中，图片需要浮动显示，而不是定位到同一点。特殊的需要添加魔术替换图片。

补充：box-shadow

CSS3新增的盒子属性box-shadow

box-shadow：水平阴影位置 垂直阴影位置 模糊距离 阴影尺寸 阴影颜色 内、外阴影；box-shadow：3px 3px 5px 4px rgb(0,0,0);

.hot_recruit部分

热门职位部分是一种tab选项卡结构，并且与后面的热门公司和热门链接有类似的结构和样式，需要谨慎提取公共样式通过公共类名设置CSS，热门职位独有的样式需要独立的类名设置，避免影响其他的两个部分。

布局类型：tab栏选项卡结构，整体为上下对齐的版心结构。标题部分：浮动设置，当前展示的部分标签使用current的类名进行标记，设置特殊样式。详细内容布局类型：平均分步型，使用浮动制作。

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

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

.word_cut{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; <!-- 文字溢出以小圆点形式 --> }

footer区域

footer：页面底部的常用名布局类型：通栏背景，内部包含版心居中的主要内容，内容包含左右浮动的两部分。其他登录方式：左浮动，注意其中鼠标移上显示定位元素效果。其他链接服务：使用定义列表制作结构。

backtop区域

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

定位方式：固定定位，位置保持与版心固定的位置，避免由于分辨率标题元素位置差异太大。动画效果：后期用javascript实现。

快速搭建公共结构

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

方法：直接复制index.html文件，删除不需要的结构，保留公司页需要的公共结构结构，同时删除不需要的css文件引入的link标签，保留需要的公共样式。

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

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

作者：小辉同学的笔记本

链接：https://juejin.cn/post/6894045433220464654来源：掘金