前端html和css筆記---pc靜態(tài)網(wǎng)頁編寫總結

時間：2023-09-27 07:54:01 | 來源：網(wǎng)站運營

時間：2023-09-27 07:54:01 來源：網(wǎng)站運營

1. 靜態(tài)網(wǎng)頁開發(fā)

1.1 開發(fā)流程

• a. 需求分析
• 對要開發(fā)的產(chǎn)品進行定位，比如功能、類型等
• b. 整體規(guī)劃
• 根據(jù)需求分析，確定要展示的內(nèi)容、層次等
• c. 界面設計
• 由設計師根據(jù)整體規(guī)劃的結果，將網(wǎng)頁進行設計
• d. 前端程序設計
• 前端開發(fā)人員根據(jù)得到的設計圖進行代碼編寫
• e. 前后端系統(tǒng)整合
• 后端人員進行數(shù)據(jù)庫設計，將程序與界面進行整合
• f. 測試驗收
• 項目經(jīng)理及相關測試人員，根據(jù)前期要求測試驗收

1.2 頁面開發(fā)的常見概念和布局流程

1.2.1 版心

• 讓頁面清晰、有條理
• 頁面中主要內(nèi)容所在的區(qū)域、一般在瀏覽器中水平居中顯示，從而讓用戶實現(xiàn)更集中
• 常見版心寬度：960 px、980 px、1000 px、1200 px等

1.2.2 布局流程

1. 操作流程：
1. 確定版心（可視區(qū)域）
2. 分析頁面中的行模塊，以及每個行模塊中的列模塊
3. 制作html頁面和css文件
4. css初始化，然后開始用盒模型的原理，通過div+css布局來控制各個模塊


2. 常用布局：
3. top、banner、main、footer全部固定寬度居中顯示
4. 同上，main區(qū)域左窄右寬
5. 通欄平均分布型

1.2.3 項目準備階段

• 文件結構
• 我們需要使用不同的文件夾進行管理
• 最基本的結構 css文件夾、圖片文件夾、index.html（文件入口）、內(nèi)部最好不要出現(xiàn)中文

1.2.4 head配置

1.2.4.1 title標簽內(nèi)容是網(wǎng)頁標題

• 標簽頁icon圖標
• 需要link標簽進行引用，屬性
• rel：快捷圖標
• href：圖標
• type：類型

1.2.4.2 css分級引入

• 根據(jù)功能進行分層管理
• 目的是提供多個公共的部分，提供多個html同時引用，有的是所有網(wǎng)站可用，有的是某幾個網(wǎng)站可用
• 清除默認是樣式css，網(wǎng)站的公共樣式css，每個網(wǎng)站獨有的css
• 清除默認樣式
• 命名習慣：reset.css
• 適用范圍：所有網(wǎng)站都能使用
• 制作方法：自己工作時制作，或者使用網(wǎng)絡資源
• 引入時必須是第一層，引入后不允許再次改動
• 公共樣式
• 使用范圍：單獨一個網(wǎng)站的多有頁面、幾個頁面
• 制作方法：根據(jù)設計圖觀察，找到所有頁面或多個頁面的公共部分，劃分成不同的模塊進行css的書寫
• 命名習慣：common.css
• 不允許后期更改
• 一般在reset.css后面引入
• 頁面獨有的樣式
• 適用范圍：單獨的一個html頁面
• 制作方法：根據(jù)其他頁面沒有的樣式進行制作
• 命名習慣：一般和html文件一致，例如index.css
• 引入順序：所有公共樣式后面
• 注意選擇器的權重

1.3 實用方法

1.3.1 多出文字省略號顯示

• 防止寬度太大而影響盒子結構

1.3.2 文字圖片居中顯示

• 作用：改變圖片和文字對齊的位置
• 屬性名：vertical-align
• 屬性值：
• middel：中線對齊
• top：頂部對齊
• bottom：底部對齊
• baseline：基線對齊