国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 或 在線咨詢 在線咨詢
15158846557 或 在線咨詢
所在位置： 首頁 > 營銷資訊 > 網(wǎng)站運(yùn)營 > part1.3.1靜態(tài)網(wǎng)頁開發(fā)流程

part1.3.1靜態(tài)網(wǎng)頁開發(fā)流程

時(shí)間：2023-07-26 01:27:01 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-07-26 01:27:01 來源：網(wǎng)站運(yùn)營

part1.3.1靜態(tài)網(wǎng)頁開發(fā)流程：

開發(fā)流程

靜態(tài)網(wǎng)頁開發(fā)基礎(chǔ)

版心

頁面布局流程

  1. 確定頁面版心
  2. 分析頁面中的行模塊，以及每個(gè)行模塊中的列模塊
  3. 制作HTML、css文件
  4. css初始化，然后開始運(yùn)用盒子模型的原理，通過div+css布局來控制網(wǎng)頁的各個(gè)模塊。

常見的布局類型

更多時(shí)候，一個(gè)網(wǎng)頁可能同時(shí)包括兩個(gè)及以上的頁面布局類型

文件結(jié)構(gòu)

<head>內(nèi)的配置

<link rel="shortcut icon"href="favicon.icon"type="image/x-icon">

CSS分級引入

css文件需要根據(jù)功能分層管理：目的是為了提取出多個(gè)頁面公共的部分，提供多個(gè)HTML同時(shí)引用。公共的部分也可以劃分范圍，有的是所有網(wǎng)站能用的，有的是某幾個(gè)網(wǎng)站公共的部分。

css常見的分層組織：清除默認(rèn)樣式 的css，網(wǎng)站的公共css，每個(gè)頁面自己獨(dú)有的css。

注意書寫順序，引入多層css時(shí)，需要按照后面的層疊前面的css進(jìn)行設(shè)置，使用頁面獨(dú)有的樣式層疊公共的樣式。

清除默認(rèn)樣式

公共樣式

頁面獨(dú)有樣式

header區(qū)域

header：網(wǎng)頁頂部結(jié)構(gòu)常用命名，通常包括logo、導(dǎo)航nav等內(nèi)容。

布局類型：通欄背景，內(nèi)部包含版心居中的主要內(nèi)容。內(nèi)容包含左、右浮動的兩部分。

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

注意：為了避免更改公共的版心樣式，<div>需要重新添加一個(gè)class屬性值

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

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

整體布局




login-banner區(qū)域

login：登錄。

布局類型：通欄背景，內(nèi)部包括版心居中的主要內(nèi)容，內(nèi)容包括左、右浮動的兩部分。

注意：實(shí)際網(wǎng)頁中，部分表單效果通常使用其他標(biāo)簽＋css樣式的效果進(jìn)行模擬，比如按鈕、下拉菜單等等。

placeholder屬性：做備注，點(diǎn)擊輸入后會消失。

cursor屬性

作用:定義鼠標(biāo)指針放在一個(gè)元素邊界范圍內(nèi)時(shí)所用的光標(biāo)的形狀 屬性值 在cursor中我們最常用到的屬性是default和pointer: default:默認(rèn)值,顯示一個(gè)箭頭光標(biāo)的樣式。 pointer:光標(biāo)呈現(xiàn)為指示鏈接的指針(小手的效果)

search區(qū)域

search：搜索框部分

布局類型：通欄背景，內(nèi)部包含居中的主要內(nèi)容。

搜索框區(qū)域表單：需要添加<form>標(biāo)簽，保證數(shù)據(jù)能夠提交數(shù)據(jù)庫

補(bǔ)充：文本框<input>標(biāo)簽可以通過一個(gè)placeholder屬性，設(shè)置默認(rèn)提示文本，點(diǎn)擊文本輸入文字后，placeholder屬性的內(nèi)容會自動消失。

content區(qū)域

content：網(wǎng)頁的主要區(qū)域，用于展示更多的產(chǎn)品、信息等

布局類型：通欄，底部設(shè)置邊框，內(nèi)容為版心居中

content內(nèi)部包含四個(gè)部分：.main主要區(qū)域列表焦點(diǎn)圖、.hotrecruit熱門職位、.hotcompany熱門公司、.hot_links熱門鏈接

.main部分

布局類型：左窄右寬的兩列布局，通過浮動實(shí)現(xiàn)

aside：側(cè)邊欄常用命名，整體為無序列表結(jié)構(gòu)。表現(xiàn)為一種特殊的下拉菜單效果，鼠標(biāo)移上<li>后顯示內(nèi)部的自己元素。下拉菜單的列表中，推薦使用定義列表結(jié)構(gòu)搭建。

注意：側(cè)邊欄aside這種結(jié)構(gòu)中的數(shù)據(jù)是可能動態(tài)發(fā)生變化的，我們需要搭建好HTML結(jié)構(gòu)和正確的CSS樣式，讓HTML結(jié)構(gòu)足夠清晰，放標(biāo)后端人員傳入數(shù)據(jù)。

banner：焦點(diǎn)圖部分為滾動輪播圖效果，點(diǎn)擊滾動特效后期用javasprict制作。

布局方式：整體用定位制作，與淡入淡出輪播圖不同的是圖片所在無序列表中，圖片需要浮動顯示，而不是定位到某一點(diǎn)。特殊的需要添加魔術(shù)替換圖片，方便后期js制作。

補(bǔ)充：box-shadow

css3中新增的陰影屬性box-shadow。

box-shadow：水平陰影位置 垂直陰影位置、模糊距離 陰影尺寸 陰影顏色 內(nèi)/外陰影；

box-shadow：3px 3px 5px 4px rgb(0,0,0)

補(bǔ)充：多余文字顯示為省略號：

.world_cut{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.hot_recruit部分

.hot-company部分

熱門公司部分與熱門職位結(jié)構(gòu)相似。

本模塊需要修改一些公共樣式，注意使用新的類名進(jìn)行覆蓋，保證選擇器權(quán)重足夠。

注意：鏈接內(nèi)容部分涉及后期js特效，鼠標(biāo)點(diǎn)擊顯示和隱藏，需要提前將HTML結(jié)構(gòu)和css樣式書寫完整，暫時(shí)設(shè)置為display:none

footer區(qū)域

footer：頁面底部的常用名。

布局類型：通欄背景，內(nèi)部包含版心居中的主要內(nèi)容，內(nèi)容包含左、右浮動的兩部分。

其他登錄方式部分：左浮動，注意：其中鼠標(biāo)移上顯示定位元素效果。

其他鏈接服務(wù)部分：使用定義列表制作結(jié)構(gòu)。

copyright區(qū)域

版權(quán)區(qū)域一般為文字信息

布局：通欄背景，內(nèi)部包含版心居中的主要內(nèi)容，內(nèi)容包含左右浮動的兩部分。

backtop區(qū)域

返回頂部的設(shè)置，通常使用<a>進(jìn)行結(jié)構(gòu)搭建。

定位方式：固定定位，位置保持與版心固定的位置，避免由于分辨率不同元素位置差異太大

動畫效果：后期使用js實(shí)現(xiàn)。

快速搭建公共結(jié)構(gòu)



關(guān)鍵詞：流程,靜態(tài)

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果，本站不支持IE9及以下版本的瀏覽器，建議您使用谷歌Chrome瀏覽器。 點(diǎn)擊下載Chrome瀏覽器
關(guān)閉