阅读 364

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

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

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

复制代码

一、网页开发流程

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

二、网页开发基础

1、版心

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

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

2、页面布局流程

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

3、常见的布局类型

  • 一列固定宽度居中

image.png

  • 两列左窄右宽

image.png

  • 通栏平均分布

image.png

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

1、文件结构

  • 最基本结构包括

image.png

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搜索的关键字(背景图写法)
<!-- logo 区域 -->
<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">new</span></a></li>
</ul>
复制代码
  • 精灵图可以用padding形式,也可以做一个小标签当钩子(子盒子),定位子绝父相
<div class="header-right">
    <a href="#" class="upload">上传简历</a>
    <a href="#" class="position">职位订阅</a>
    <!-- i标签就是钩子 -->
    <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;
}
复制代码

image.png

文章分类
前端
文章标签