所在位置：
首页 >
营销资讯 >
网站运营 > 前端html和css笔记---pc静态网页编写总结
前端html和css笔记---pc静态网页编写总结
时间：2023-09-27 07:54:01 | 来源：网站运营
时间：2023-09-27 07:54:01 来源：网站运营
前端html和css笔记---pc静态网页编写总结：
1. 静态网页开发
1.1 开发流程
- a. 需求分析
- 对要开发的产品进行定位，比如功能、类型等
- b. 整体规划
- 根据需求分析，确定要展示的内容、层次等
- c. 界面设计
- 由设计师根据整体规划的结果，将网页进行设计
- d. 前端程序设计
- 前端开发人员根据得到的设计图进行代码编写
- e. 前后端系统整合
- 后端人员进行数据库设计，将程序与界面进行整合
- f. 测试验收
- 项目经理及相关测试人员，根据前期要求测试验收
1.2 页面开发的常见概念和布局流程
1.2.1 版心
- 让页面清晰、有条理
- 页面中主要内容所在的区域、一般在浏览器中水平居中显示，从而让用户实现更集中
- 常见版心宽度：960 px、980 px、1000 px、1200 px等
1.2.2 布局流程
- 操作流程：
- 确定版心（可视区域）
- 分析页面中的行模块，以及每个行模块中的列模块
- 制作html页面和css文件
- css初始化，然后开始用盒模型的原理，通过div+css布局来控制各个模块
- 常用布局：
- top、banner、main、footer全部固定宽度居中显示
- 同上，main区域左窄右宽
- 通栏平均分布型
1.2.3 项目准备阶段
- 文件结构
- 我们需要使用不同的文件夹进行管理
- 最基本的结构 css文件夹、图片文件夹、index.html（文件入口）、内部最好不要出现中文
1.2.4 head配置
1.2.4.1 title标签内容是网页标题
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">1.2.4.2 css分级引入
- 根据功能进行分层管理
- 目的是提供多个公共的部分，提供多个html同时引用，有的是所有网站可用，有的是某几个网站可用
- 清除默认是样式css，网站的公共样式css，每个网站独有的css
- 清除默认样式
- 命名习惯：reset.css
- 适用范围：所有网站都能使用
- 制作方法：自己工作时制作，或者使用网络资源
- 引入时必须是第一层，引入后不允许再次改动
- 公共样式
- 使用范围：单独一个网站的多有页面、几个页面
- 制作方法：根据设计图观察，找到所有页面或多个页面的公共部分，划分成不同的模块进行css的书写
- 命名习惯：common.css
- 不允许后期更改
- 一般在reset.css后面引入
- 页面独有的样式
- 适用范围：单独的一个html页面
- 制作方法：根据其他页面没有的样式进行制作
- 命名习惯：一般和html文件一致，例如index.css
- 引入顺序：所有公共样式后面
- 注意选择器的权重
1.3 实用方法
1.3.1 多出文字省略号显示
.hot-recruit .detail ul li .top .position .name { float: left; max-width: 120px; height: 22px; font-size: 16px; color: #333; /* 后三步 */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}1.3.2 文字图片居中显示
- 作用：改变图片和文字对齐的位置
- 属性名：vertical-align
- 属性值：
- middel：中线对齐
- top：顶部对齐
- bottom：底部对齐
- baseline：基线对齐
.footer .login-method .login-method-btn i { display: inline-block; width: 12px; height: 15px; background: url(../images/sprite_02.png) no-repeat -150px -220px; vertical-align: middle;}
在线咨询
