PC端静态网页应用开发及项目

笔记来源：拉勾教育 - 大前端就业集训营

文章内容：学习过程中的笔记、感悟、经验

一、网页开发流程

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

二、网页开发基础

1、版心

网页中主要内容所在的区域，一般在浏览器窗口中水平居中显示，从而让用户的视线更集中

• 常见版心宽度包括960px、980px、1000px、1200px（目前常用）等
• 使用标准流中的margin居中方法 margin：0 auto

2、页面布局流程

• 确定页面的版心（可视区域）
• 分析页面中的行模块，以及每个行模块中的列模块
• 制作HTML页面、CSS文件
• CSS初始化，然后开始运用盒模型原理，通过DIV+CSS布局来控制网页的各个模块

3、常见的布局类型

• 一列固定宽度居中
  
• 两列左窄右宽
  
• 通栏平均分布
  

三、网页开发常见技巧和方法

1、文件结构

• 最基本结构包括
  

2、title：网页标题

3、标签页icon图标

• 图标文件名要求以favicon.ico命名，文件需要与index.html文件同级存储
• 通过link标签引入

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

4、CSS分级引入

引入多层css时，按照后面的层叠前面的css进行设置，使用页面独有的样式层叠公共的样式

（1）清除默认样式

• 所有网站都可使用，一般是自己工作中积累或者使用网络已有的资源
• 命名习惯：reset.css
• 引入时作为第一层引入，网页中独有的样式可以层叠掉reset中的样式

注：reset.css写完后不允许再次更改

（2）公共样式

• 单独的一个网站所有页面、几个页面可以使用，可以从设计图中观察，找到多个页面中公共的部分，划分成不同的模块分别进行.css文件书写
• 命名习惯：common.css或者模块名.css
• 多个页面的公共样式书写完之后不允许后期修改，一旦更改，可能会引起多个页面发生变化，需要注意类名的使用，公共文件的类名一般不要在其他css文件中使用，
• 一般在reset.css文件后面，单独样式文件的前面

（3）页面独有样式

• 适用于单独的一个HTML页面，找到页面独有的样式，单独书写在一个.css文件中，只能这个页面可以调用
• 命名习惯：一般和HTML名保持一致，例如index.css，如果拆分的更细致可以使用多个单词的拼写，比如index_banner.css等
• 一般在所有公共样式后面引入，注意选择器权重的问题

<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/common.css"">
<link rel="stylesheet" href="./css/index.css"">

5、header区域

通常包含logo和导航nav等内容，为避免更改公共版心样式，div需要重新添加一个class属性值

• logo：使用h1>a结构，适当添加SEO搜索的关键字（背景图写法）

<h1 class="logo">
    <a href="index.html">拉勾招聘|招聘|求职|互联网|培训|Java|前端a>
h1>

.header-c .header-left .logo a {
    /* logo 转成块元素 */
    display: block;
    width: 43px;
    height: 21px;
    /* logo图片 */
    background: url(../images/logo.png);
    /* a标签的字缩进飞出盒子然后隐藏 */
    text-indent: -999em;
    overflow: hidden;
}

• nav导航：常用ul>li>a列表结构搭建

<ul class="nav">
    <li class="current"><a href="index.html">首页a>li>
    <li><a href="company.html">公司a>li>
    <li><a href="school.html">校园招聘a>li>
    <li><a href="#">言职a>li>
    <li><a href="#">职位a>li>
    <li><a href="#">课程<span class="tips">newspan>a>li>
ul>

• 精灵图可以用padding形式，也可以做一个小标签当钩子（子盒子），定位子绝父相

<div class="header-right">
    <a href="#" class="upload">上传简历a>
    <a href="#" class="position">职位订阅a>
    
    <a href="#" class="login">登录<i>i>a>
    <span>|span>
    <a href="#" class="register">注册a>
    <a href="#" class="app">拉勾APP<i>i>a>
    <a href="#" class="enter">进入企业版a>
 div>

/* 小钩子 精灵图 定位 */
.header-c .header-right .app i {
    position: absolute;
    left: -20px;
    top: 11px;
    width: 12px;
    height: 18px;
    background: url(../images/sprite_01.png) no-repeat -64px -212px;
}

6、search区域

• 需要添加form标签，保证数据能够提交到数据库
• 文本框input标签可以通过一个placeholder属性，设置默认提示文本，点击文本框输入文字后，plaeholder属性的内容会自动消失

7、css3盒子阴影属性

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

8、多余文字显示成省略号

.word_cut {
	/* 不能换行 */
    white-space: nowrap;
    overflow: hidden;
    /* 超过部分显示三个小圆点 */
    text-overflow: ellipsis;
}