Part 1 · HTML5-03-PC 端静态网页

时间：2023-10-12 07:54:01 | 来源：网站运营

时间：2023-10-12 07:54:01 来源：网站运营

Part 1 · HTML5-03-PC 端静态网页：

Part 1 · HTML5 网页开发-03

第三章、PC 端静态网页应用开发及项目

第一节、PC端静态网页应用开发及项目

1-2、网页开发常见概念和布局流程

• 版心：网页中主要内容所在的位置，一般在浏览器水平居中区域
• 常见的宽度：960px 980px 1000px 1200px
• 制作方式，使用标准流中的margin居中法

页面布局流程：

1. 确定页面的版心（firework测量）
2. 分析页面中的行模块，以及每个航模块中的列模块
3. 制作HTML页面，CSS文件
4. CSS初始化，开始运用盒子模型远离，通过DIV+CSS布局来控制页面的每个模块 几种常见的布局类型：
5. 一列固定宽度且居中
6. 两列左窄右宽型
7. 通栏平均分部型 注：一个网页可能同时包含2种以上的布局类型，注意分析

3、项目制作案例-文件结构、head内部配置

• 搭建文件结构

1. 网站中包含多个.html文件和.css文件，image和多媒体文件
2. 文件夹最最基本的结构包括（css 、images、index.html、favicon.ico）index.html是网站的首页固定的命名，不能取其他名字，文件夹和文件名都不能取中文，最好都用英文

head内部配置不会显示它的内容，但是会发挥它的作用（属于网页的配置内容） 比如：

1. <title>网页标签（是必不可少的），所有网站都有标题，显示在网页标签里面 一般网站在标题标签内都会有个icon图标
2. 标签页icon图标

• 大部分网站在标签页标题位置会添加网站的icon图标
• 图标的文件名要求以favicon.ico命名，文件需要与index.html文件同级存储
• 使用方法 通过标签进行引用（在head内部） 设置的属性包括： <link rel="shortcut icon" href"favicon.ico" type="image/x.icon">

CSS分级引入

• css文件需要根据功能进行分层管理，页面公共使用部分、页面独立使用部分
• css常见的分层组织（书写顺序）：清除默认样式的css，网站的公共样式，每个页面有自己的独立的css 注意 ：注意书写顺序，引入多层，后面引入的的层叠前面的
• 清除默认样式的css：

1. 使用范围（所有网站都能使用）
2. 引用reset.css （自己工作中积累，或者使用网上已有的资源保存在本地文件夹用于引用）
3. 引入时必须是第一层引入，后面网页中有独立样式的时候，后期引入可以层叠reset中的样式
4. reset.css文件写完后不允许再次修改（因为属于所有网站所有页面都在使用的，一旦改变一个代码，所有网页都会受到影响）

• 网站的公共样式：

1. 使用范围（单独的一个网站所有的页面或者几个页面）
2. 命名习惯：common.css，根据网页页面的公共部分，划分不同的公共.css文件进行书写
3. 引入时一般在reset.css后面，页面独有样式之前
4. 多个页面的公共部分书写完后补允许修改（一旦修改，多个页面会受到影响） 注意：注意类名的使用，公共文件中类名，不要在其他的css文件中再使用 +页面独有样式：
5. 使用范围：单独的一个html页面
6. 命名习惯：通常和html中的文件名保持一致，便于后期查看
7. 引入顺序：在所有公共样式的后面 注意：使用单独样式文件去层叠前面公共样式时，需要注意选择器的权重

整个CSS分层引入的顺序

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

4、项目制作案例-base.css

根据网页分析， 可以先设置一些基础样式（初始化样式、公共样式），比如body的设置，文字颜色样式的设置等，如果有参照网页，可以去复制粘贴

5、项目制作案例-header整体布局

分析网页，一般header包含（logo、导航等内容） 以某网站为例，布局类型为通栏背景，header的内部包含版心居中的主要内容（内容包含左右浮动两个部分）

header整体结构：100%的div>版心的div

注意： logo可以使用h1>a的结构，可以适当添加seo搜索的关键字

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

6、项目制作中新增属性

/* 设置盒子最大宽度值 */ max-width: 120px; /* 设置文字超出盒子最大宽度时候，超出部分用"..."表示 */ white-space: nowrap; (设置整个文本是否要换行) overflow: hidden; (溢出宽度的区域要隐藏) text-overflow: ellipsis;(设置文字溢出用... 表示)


/* 垂直方向的对齐 vertical-align: middle;*/ vertical-align: middle;