Part 1 · HTML5-03-PC 端靜態(tài)網(wǎng)頁

時間：2023-10-12 07:54:01 | 來源：網(wǎng)站運(yùn)營

時間：2023-10-12 07:54:01 來源：網(wǎng)站運(yùn)營

Part 1 · HTML5-03-PC 端靜態(tài)網(wǎng)頁：

Part 1 · HTML5 網(wǎng)頁開發(fā)-03

第三章、PC 端靜態(tài)網(wǎng)頁應(yīng)用開發(fā)及項(xiàng)目

第一節(jié)、PC端靜態(tài)網(wǎng)頁應(yīng)用開發(fā)及項(xiàng)目

1-2、網(wǎng)頁開發(fā)常見概念和布局流程

• 版心：網(wǎng)頁中主要內(nèi)容所在的位置，一般在瀏覽器水平居中區(qū)域
• 常見的寬度：960px 980px 1000px 1200px
• 制作方式，使用標(biāo)準(zhǔn)流中的margin居中法

頁面布局流程：

1. 確定頁面的版心（firework測量）
2. 分析頁面中的行模塊，以及每個航模塊中的列模塊
3. 制作HTML頁面，CSS文件
4. CSS初始化，開始運(yùn)用盒子模型遠(yuǎn)離，通過DIV+CSS布局來控制頁面的每個模塊 幾種常見的布局類型：
5. 一列固定寬度且居中
6. 兩列左窄右寬型
7. 通欄平均分部型 注：一個網(wǎng)頁可能同時包含2種以上的布局類型，注意分析

3、項(xiàng)目制作案例-文件結(jié)構(gòu)、head內(nèi)部配置

• 搭建文件結(jié)構(gòu)

1. 網(wǎng)站中包含多個.html文件和.css文件，image和多媒體文件
2. 文件夾最最基本的結(jié)構(gòu)包括（css 、images、index.html、favicon.ico）index.html是網(wǎng)站的首頁固定的命名，不能取其他名字，文件夾和文件名都不能取中文，最好都用英文

head內(nèi)部配置不會顯示它的內(nèi)容，但是會發(fā)揮它的作用（屬于網(wǎng)頁的配置內(nèi)容） 比如：

1. <title>網(wǎng)頁標(biāo)簽（是必不可少的），所有網(wǎng)站都有標(biāo)題，顯示在網(wǎng)頁標(biāo)簽里面 一般網(wǎng)站在標(biāo)題標(biāo)簽內(nèi)都會有個icon圖標(biāo)
2. 標(biāo)簽頁icon圖標(biāo)

• 大部分網(wǎng)站在標(biāo)簽頁標(biāo)題位置會添加網(wǎng)站的icon圖標(biāo)
• 圖標(biāo)的文件名要求以favicon.ico命名，文件需要與index.html文件同級存儲
• 使用方法 通過標(biāo)簽進(jìn)行引用（在head內(nèi)部） 設(shè)置的屬性包括： <link rel="shortcut icon" href"favicon.ico" type="image/x.icon">

CSS分級引入

• css文件需要根據(jù)功能進(jìn)行分層管理，頁面公共使用部分、頁面獨(dú)立使用部分
• css常見的分層組織（書寫順序）：清除默認(rèn)樣式的css，網(wǎng)站的公共樣式，每個頁面有自己的獨(dú)立的css 注意 ：注意書寫順序，引入多層，后面引入的的層疊前面的
• 清除默認(rèn)樣式的css：

1. 使用范圍（所有網(wǎng)站都能使用）
2. 引用reset.css （自己工作中積累，或者使用網(wǎng)上已有的資源保存在本地文件夾用于引用）
3. 引入時必須是第一層引入，后面網(wǎng)頁中有獨(dú)立樣式的時候，后期引入可以層疊reset中的樣式
4. reset.css文件寫完后不允許再次修改（因?yàn)閷儆谒芯W(wǎng)站所有頁面都在使用的，一旦改變一個代碼，所有網(wǎng)頁都會受到影響）

• 網(wǎng)站的公共樣式：

1. 使用范圍（單獨(dú)的一個網(wǎng)站所有的頁面或者幾個頁面）
2. 命名習(xí)慣：common.css，根據(jù)網(wǎng)頁頁面的公共部分，劃分不同的公共.css文件進(jìn)行書寫
3. 引入時一般在reset.css后面，頁面獨(dú)有樣式之前
4. 多個頁面的公共部分書寫完后補(bǔ)允許修改（一旦修改，多個頁面會受到影響） 注意：注意類名的使用，公共文件中類名，不要在其他的css文件中再使用 +頁面獨(dú)有樣式：
5. 使用范圍：單獨(dú)的一個html頁面
6. 命名習(xí)慣：通常和html中的文件名保持一致，便于后期查看
7. 引入順序：在所有公共樣式的后面 注意：使用單獨(dú)樣式文件去層疊前面公共樣式時，需要注意選擇器的權(quán)重

整個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、項(xiàng)目制作案例-base.css

根據(jù)網(wǎng)頁分析， 可以先設(shè)置一些基礎(chǔ)樣式（初始化樣式、公共樣式），比如body的設(shè)置，文字顏色樣式的設(shè)置等，如果有參照網(wǎng)頁，可以去復(fù)制粘貼

5、項(xiàng)目制作案例-header整體布局

分析網(wǎng)頁，一般header包含（logo、導(dǎo)航等內(nèi)容） 以某網(wǎng)站為例，布局類型為通欄背景，header的內(nèi)部包含版心居中的主要內(nèi)容（內(nèi)容包含左右浮動兩個部分）

header整體結(jié)構(gòu)：100%的div>版心的div

注意： logo可以使用h1>a的結(jié)構(gòu)，可以適當(dāng)添加seo搜索的關(guān)鍵字

nav 導(dǎo)航常常使用ul>li>a列表結(jié)構(gòu)搭建

6、項(xiàng)目制作中新增屬性

/* 設(shè)置盒子最大寬度值 */ max-width: 120px; /* 設(shè)置文字超出盒子最大寬度時候，超出部分用"..."表示 */ white-space: nowrap; (設(shè)置整個文本是否要換行) overflow: hidden; (溢出寬度的區(qū)域要隱藏) text-overflow: ellipsis;(設(shè)置文字溢出用... 表示)


/* 垂直方向的對齊 vertical-align: middle;*/ vertical-align: middle;