目標(biāo)：

• 能會(huì)引入ico圖標(biāo)
• 能簡(jiǎn)單看懂網(wǎng)站優(yōu)化的三大標(biāo)簽
• 能使用字體圖標(biāo) ( 重點(diǎn) )
• 能說出我們css屬性書寫順序

1. 品優(yōu)購(gòu)項(xiàng)目介紹

• 復(fù)習(xí)、總結(jié)领猾、提高前面所學(xué)布局技術(shù)米同，完成首頁(yè)骇扇、列表頁(yè)、詳情頁(yè)面粮、注冊(cè)頁(yè)面的制作
• 技術(shù)棧：HTML 結(jié)構(gòu) + CSS 布局

2. 設(shè)計(jì)目標(biāo)

• 保證瀏覽器 ie7及以上, 火狐, 360, safari少孝，chrome等
• 熟悉CSS+DIV布局，頁(yè)面的搭建工作
• 了解常用電商類網(wǎng)站的布局模式
• 為后期品優(yōu)購(gòu)移動(dòng)端做鋪墊

3. 前期準(zhǔn)備工作

要實(shí)現(xiàn)結(jié)構(gòu)和樣式相分離的設(shè)計(jì)思想

目錄文件夾

樣式文件的分類

• 初始化css (css reset) 讓瀏覽器風(fēng)格統(tǒng)一熬苍，把常用的初始化語(yǔ)句放入 base.css里面

• 公共的樣式 放入common.css里面

4. ?網(wǎng)站ico圖標(biāo)

1). 使用ico圖標(biāo)

• 把favicon.ico 這個(gè)圖標(biāo)放到根目錄下

• 再 head 之間引入代碼稍走。

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

2). 制作ico圖標(biāo)

方法步驟：

• 首先把我們想要的切成圖片
• 要把圖片轉(zhuǎn)換為 ico 圖標(biāo)，借助于第三方轉(zhuǎn)換網(wǎng)站 http://www.bitbug.net/ 比特蟲

總結(jié)：

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

注意：

1. 她（它）是顯示在瀏覽器中的網(wǎng)頁(yè)圖標(biāo)
2. 它是圖標(biāo)形式柴底，不是一個(gè)圖片
3. 位置是放到 head 標(biāo)簽中間
4. 后面的type="image/x-icon" 屬性可以省略
5. 為了兼容性婿脸，請(qǐng)將favicon.ico 這個(gè)圖標(biāo)放到根目錄下

5. ?網(wǎng)站優(yōu)化三大標(biāo)簽

SEO是由英文Search Engine Optimization縮寫， 中文意譯為“搜索引擎優(yōu)化”柄驻！

SEO是指通過對(duì)網(wǎng)站進(jìn)行站內(nèi)優(yōu)化狐树、網(wǎng)站結(jié)構(gòu)調(diào)整、網(wǎng)站內(nèi)容建設(shè)鸿脓、網(wǎng)站代碼優(yōu)化等和站外優(yōu)化抑钟，從而提高網(wǎng)站的關(guān)鍵詞排名以及公司產(chǎn)品的曝光度。 簡(jiǎn)單的說就是答憔，把產(chǎn)品做好味赃，搜索引擎就會(huì)介紹客戶來

我們現(xiàn)在階段主要進(jìn)行站內(nèi)優(yōu)化。網(wǎng)站優(yōu)化虐拓，我們應(yīng)該要懂title心俗、keyword、description三大標(biāo)簽

1). 網(wǎng)頁(yè)title 標(biāo)題

title具有不可替代性蓉驹，是搜索引擎了解網(wǎng)頁(yè)的入口城榛，和對(duì)網(wǎng)頁(yè)主題歸屬的最佳判斷點(diǎn)

建議：

?首頁(yè)標(biāo)題：網(wǎng)站名（產(chǎn)品名）- 網(wǎng)站的介紹

例如：

品優(yōu)購(gòu)-綜合網(wǎng)購(gòu)首選-正品低價(jià)、品質(zhì)保障态兴、配送及時(shí)狠持、輕松購(gòu)物！

小米商城 - 小米5s瞻润、紅米Note 4喘垂、小米MIX、小米筆記本官方網(wǎng)站

2). Description 網(wǎng)站說明

作為搜索結(jié)果的“內(nèi)容摘要”绍撞。 就是簡(jiǎn)要說明我們網(wǎng)站的主要做什么的
我們提倡正勒，Description作為網(wǎng)站的總體業(yè)務(wù)和主題概括，多采用“我們是…”“我們提供…”“×××網(wǎng)作為…”“電話：010…”之類語(yǔ)句

品優(yōu)購(gòu)網(wǎng)：

?<meta name="description" content="品優(yōu)購(gòu)JD.COM-專業(yè)的綜合網(wǎng)上購(gòu)物商城,銷售家電傻铣、數(shù)碼通訊章贞、電腦、家居百貨非洲、服裝服飾鸭限、母嬰蜕径、圖書、食品等數(shù)萬(wàn)個(gè)品牌優(yōu)質(zhì)商品.便捷败京、誠(chéng)信的服務(wù)兜喻，為您提供愉悅的網(wǎng)上購(gòu)物體驗(yàn)!" />

注意點(diǎn)：

1. 這部分內(nèi)容是給人看的，所以要寫的很詳細(xì)喧枷，讓人感興趣虹统， 吸引用戶點(diǎn)擊
2. 同樣遵循簡(jiǎn)短原則弓坞，字符數(shù)含空格在內(nèi)不要超過 120 個(gè)漢字
3. 補(bǔ)充在 title 和 keywords 中未能充分表述的說明
4. 用英文逗號(hào) 關(guān)鍵詞1,關(guān)鍵詞2

<meta name="description" content="小米商城直營(yíng)小米公司旗下所有產(chǎn)品隧甚，囊括小米手機(jī)系列小米MIX、小米Note 2渡冻，紅米手機(jī)系列紅米Note 4戚扳、紅米4，智能硬件族吻，配件及小米生活周邊帽借，同時(shí)提供小米客戶服務(wù)及售后支持。" />

3). Keywords 關(guān)鍵字

Keywords是頁(yè)面關(guān)鍵詞超歌，Keywords應(yīng)該限制在6～8個(gè)關(guān)鍵詞左右砍艾，電商類網(wǎng)站可以多 少許

品優(yōu)購(gòu)網(wǎng)：

<meta name="Keywords" content="網(wǎng)上購(gòu)物,網(wǎng)上商城,手機(jī),筆記本,電腦,MP3,CD,VCD,DV,相機(jī),數(shù)碼,配件,手表,存儲(chǔ)卡,品優(yōu)購(gòu)" />

小米網(wǎng)：

<meta name="keywords" content="小米,小米6,紅米Note4,小米MIX,小米商城" />

4). 總結(jié)

1. 我們的網(wǎng)頁(yè)要做的優(yōu)秀，符合搜索引擎的要求巍举，才可以讓搜索引擎優(yōu)先顯示我們的網(wǎng)頁(yè)

所以我們的網(wǎng)站要做很多的優(yōu)化脆荷， 其中就有這三大標(biāo)簽

2. 一般情況下，三大標(biāo)簽里面的優(yōu)化詞懊悯，都是專門的優(yōu)化人員寫的蜓谋，我們大概了解一下規(guī)范就可以了
3. 我們的主要任務(wù)是，能寫出這三大標(biāo)簽炭分， 然后把優(yōu)化人員給我們的內(nèi)容桃焕，添加到里面

6. 字體圖標(biāo)

圖片不但增加了總文件的大小，還增加了很多額外的"http請(qǐng)求"捧毛，圖片放大和縮小會(huì)失真

此時(shí)观堂，一個(gè)非常重要的技術(shù)出現(xiàn)了， 這就是字體圖標(biāo)（iconfont)

1). 字體圖標(biāo)優(yōu)點(diǎn)

可以做出跟圖片一樣可以做的事情,改變透明度呀忧、旋轉(zhuǎn)度师痕，等..
但是本質(zhì)其實(shí)是文字，可以很隨意的改變顏色荐虐、產(chǎn)生陰影七兜、透明效果等等...
本身體積更小，但攜帶的信息并沒有削減福扬。
幾乎支持所有的瀏覽器
移動(dòng)端設(shè)備必備良藥...

2). 設(shè)計(jì)字體圖標(biāo)

UI設(shè)計(jì)人員在 illustrator 或 Sketch 這類矢量圖形軟件里創(chuàng)建 icon圖標(biāo)腕铸，之后保存為svg格式惜犀，交給前端人員

3). 上傳生成字體包

前端人員收到svg文件，轉(zhuǎn)換成頁(yè)面能使用的字體文件狠裹， 而且需要生成的是兼容性的適合各個(gè)瀏覽器的

? 推薦網(wǎng)站： http://icomoon.io

• icomoon字庫(kù)

IcoMoon成立于2011年虽界，推出的第一個(gè)自定義圖標(biāo)字體生成器，它允許用戶選擇他們所需要的圖標(biāo)涛菠，使它們成一字型莉御。 內(nèi)容種類繁多，非常全面俗冻，唯一的遺憾是國(guó)外服務(wù)器礁叔，打開網(wǎng)速較慢

• 阿里icon font字庫(kù)

http://www.iconfont.cn/

這個(gè)是阿里媽媽M2UX的一個(gè)icon font字體圖標(biāo)字庫(kù)，包含了淘寶圖標(biāo)庫(kù)和阿里媽媽圖標(biāo)庫(kù)迄薄±殴兀可以使用AI制作圖標(biāo)上傳生成。 一個(gè)字讥蔽，免費(fèi)涣易，免費(fèi)！冶伞！

4). 下載兼容字體包

剛才上傳完畢新症， 網(wǎng)站會(huì)給我們把UI做的svg圖片轉(zhuǎn)換為我們的字體格式， 然后下載（文件記得備份selection.json）

5). 字體引入到HTML

字體圖標(biāo) 本質(zhì)就是 字體文件响禽，需要引入到我們頁(yè)面中

• 首先把 fonts文件夾放入項(xiàng)目 根目錄下

• html標(biāo)簽內(nèi)里面添加結(jié)構(gòu)

 <span>?</span>  //到網(wǎng)站下載頁(yè)面復(fù)制圖標(biāo)

• 在樣式里面聲明字體： 告訴別人我們自己定義的字體(一定注意字體文件路徑的問題)

@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?7kkyc2');
  src:  url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
    url('fonts/icomoon.woff?7kkyc2') format('woff'),
    url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

• 給盒子使用字體

span {
        font-family: "icomoon";
    }

6). 追加字體圖標(biāo)

如果工作中徒爹，原來的字體圖標(biāo)不夠用了，我們需要添加新的字體圖標(biāo)

http://icomoon.io 點(diǎn)擊import icons金抡，把壓縮包里面的selection.json 上傳瀑焦，然后，選新的圖標(biāo)梗肝，重新下載壓縮包榛瓮，替換原來文件即可

7). 拓展@ 常見字體格式

不同瀏覽器所支持的字體格式是不一樣的，我們有必要了解一下有關(guān)字體格式的知識(shí)巫击。

• TureType(.ttf)格式

.ttf字體是Windows和Mac的最常見的字體禀晓，是一種RAW格式，支持這種字體的瀏覽器有IE9+坝锰、Firefox3.5+粹懒、Chrome4+、Safari3+顷级、Opera10+凫乖、iOS Mobile、Safari4.2+；

• OpenType(.otf)格式

.otf字體被認(rèn)為是一種原始的字體格式帽芽，其內(nèi)置在TureType的基礎(chǔ)上删掀，支持這種字體的瀏覽器有Firefox3.5+、Chrome4.0+导街、Safari3.1+披泪、Opera10.0+、iOS Mobile搬瑰、Safari4.2+款票；

• Web Open Font Format(.woff)格式

woff字體是Web字體中最佳格式，他是一個(gè)開放的TrueType/OpenType的壓縮版本泽论，同時(shí)也支持元數(shù)據(jù)包的分離艾少，支持這種字體的瀏覽器有IE9+、Firefox3.5+佩厚、Chrome6+姆钉、Safari3.6+说订、Opera11.1+抄瓦；

• Embedded Open Type(.eot)格式

.eot字體是IE專用字體，可以從TrueType創(chuàng)建此格式字體陶冷，支持這種字體的瀏覽器有IE4+钙姊；

• SVG(.svg)格式

.svg字體是基于SVG字體渲染的一種格式，支持這種字體的瀏覽器有Chrome4+埂伦、Safari3.1+煞额、Opera10.0+、iOS Mobile Safari3.2+沾谜；

了解了上面的知識(shí)后膊毁，我們就需要為不同的瀏覽器準(zhǔn)備不同格式的字體，通常我們會(huì)通過字體生成工具幫我們生成各種格式的字體基跑，因此無(wú)需過于在意字體格式間的區(qū)別差異婚温。

10. 品優(yōu)購(gòu)首頁(yè)布局

命名集合：

1). shortcut 制作

1.png

• 通欄的盒子 命名為shortcut 快捷導(dǎo)航的意思， 注意媳否，這里給行高栅螟，可以繼承給里面的子盒子。
• 里面包含 版心的盒子
• 版心盒子里面包含1號(hào)左側(cè)盒子左浮動(dòng)
• 版心盒子里面包含2號(hào)右側(cè)盒子右浮動(dòng)

2). header 制作

2.png

• header盒子必須要有高度
• 1號(hào)盒子是 logo 標(biāo)志 定位
• 2號(hào)盒子是 search 搜索模塊 定位
• 3號(hào)盒子是 hotwrods 熱詞模塊 定位
• 4號(hào)盒子是 shopcar 購(gòu)車車模塊
  • count 統(tǒng)計(jì)部分 用絕對(duì)定位做
  • count 統(tǒng)計(jì)部分 不要給寬度篱竭，因?yàn)榭赡苜I的件數(shù)比較多力图，讓件數(shù)撐開就好了 給一個(gè)高度
  • 一定注意左下角 不是圓角 其余三個(gè)是圓角

3). nav 制作

3.png

• nav 盒子通欄有高度 而且有個(gè)下邊框
• 1號(hào)盒子 左側(cè)浮動(dòng) dorpdown 下拉導(dǎo)航 里面包含 dt dd
• 2號(hào)盒子右側(cè)浮動(dòng) navitems 導(dǎo)航欄組

4). logo 優(yōu)化

• logo 里面 首先放一個(gè) h1 標(biāo)簽 ，目的是為了提權(quán)掺逼，告訴搜索引擎吃媒，這個(gè)地方很重要
• h1里面在放一個(gè)連接，可以返回首頁(yè)的， 給a一個(gè) 大小 和 logo 的背景圖片
• a里面要放文字（網(wǎng)站名稱）赘那，為了搜索引擎收錄我們惑朦。 但是文字不要顯示出來
  • 要用 text-indent 移到盒子外面 （text-indent: -9999px) 然后overflow:hidden 淘寶的做法
  • 直接給font-size: 0; 就看不到文字了， 京東的做法
• 最后給 連接一個(gè) title 這樣鼠標(biāo)放到logo 上漓概， 就可以看到提示文字了

5). footer 底部制作

1.png

• footer 頁(yè)面底部盒子 通欄 給一個(gè)高度 灰色的背景
• footer 里面 首先一個(gè) 大 的版心
• 版心里面包含 1號(hào)盒子 mod_service 服務(wù)模塊 module 模塊的意思
• 版心里面包含 2號(hào)盒子 mod_help 幫助模塊
• 版心里面包含 3號(hào)盒子 mod_copyright 版權(quán)模塊

6). main 主體模塊制作

這部分是 index 里面 專有的漾月， 注意 需要新的樣式文件 index.css

4.png

• main 盒子 寬度 為 980像素， 距離 左邊 220 給一個(gè)margin-left 就好了胃珍， 給高度就不用清除浮動(dòng)梁肿。

• main 里面包含 左側(cè)盒子 左浮動(dòng) focus 焦點(diǎn)圖 模塊

• main 里面包含 右側(cè)盒子 右浮動(dòng) newsflash 新聞快報(bào)模塊

(1). newsflash 新聞快報(bào)模塊

• 1 號(hào)盒子 為 news 新聞模塊
• 2 號(hào)盒子 為lifeservice 生活服務(wù)模塊
• 3 號(hào)盒子為 bargain 特價(jià)商品

(2). news 新聞模塊

• 注意，這里我們 分為 上下兩個(gè)模塊觅彰， 但是 兩個(gè)模塊 都用div
• 1號(hào) 盒子 news-hd 新聞?lì)^部模塊 給一個(gè) 高度 和 下邊框
• 2號(hào) 盒子 news-bd 新聞主題部分 里面 包含 ul 和 li 還有 鏈接

(3). lifeservice 生活服務(wù)模塊

此地方有個(gè)小技巧吩蔑，

• lifeservice 盒子 寬度為 250 但是裝不開 里面的 4個(gè) 小 li
• 可以讓 lifeservice 里面的 ul 寬度為 252 就可以 裝的下 4個(gè) 小li
• lifeservice 盒子 overflow 隱藏多余的部分就可以了。

7). recommend 推薦模塊

8.png

• 里面包含2個(gè)盒子填抬， 浮動(dòng)即可
• 1號(hào)盒子 recom-hd
• 2號(hào)盒子 recom-bd 注意里面的小 豎線

8). 樓層區(qū) floor

注意這個(gè)floor 一個(gè)大盒子 包含烛芬， 不要給高度，內(nèi)容有多少飒责，算多少

[圖片上傳中...(2.png-49057d-1596098049982-0)]

(1). 家用電器模塊

1.png

• 這個(gè)模塊 jiadian 不需要寫樣式
• 版心居中對(duì)齊 因?yàn)檫@些模塊 基本相同赘娄，下面的 模塊基本用這些樣式 所以 咱們下面兩個(gè)盒子的命名是：
• 1號(hào)盒子 box-hd 給一個(gè)高度， 有個(gè)下邊框 里面分為左右2個(gè)盒子
• 2號(hào)盒子 box-bd 不要給高度宏蛉。

(2). box-hd 模塊

• 有高度

• 左邊 h3 盒子
• 右邊 div 命名為 tab-list 因?yàn)橛玫?tab 切換效果遣臼， 所以 里面 要用 ul 和 li 來做 。

(3). box-bd 模塊

3.png

• 根據(jù)tab 切換的原理拾并， 應(yīng)該還需要一個(gè) tab-content 的 內(nèi)容來包裝 里面的 5個(gè) 盒子
• 分為5個(gè)大列 列的寬度 不一致

9). 側(cè)邊欄 fixedtool 制作

此模塊用固定定位 里面包含 li

8. ?知識(shí)點(diǎn) -過渡(CSS3)

過渡動(dòng)畫： 是從一個(gè)狀態(tài) 漸漸的過渡到另外一個(gè)狀態(tài)

低版本瀏覽器不支持（ie9以下版本）揍堰；經(jīng)常和 :hover 一起 搭配使用。

語(yǔ)法格式:

transition: 要過渡的屬性  花費(fèi)時(shí)間  運(yùn)動(dòng)曲線  何時(shí)開始;

• 屬性

? 屬性就是你想要變化的 css 屬性武通， 寬度高度 背景顏色 內(nèi)外邊距都可以 霹崎。如果想要所有的屬性都變化過渡， 寫一個(gè)all 就可以冶忱。

• 花費(fèi)時(shí)間

  transition-duration 花費(fèi)時(shí)間 單位是 秒（必須寫單位） s ms 比如 0.5s 這個(gè)s單位必須寫 ms 毫秒

• 運(yùn)動(dòng)曲線 默認(rèn)是 ease（還有l(wèi)inear ease-in ease-out ease-in-out）

• 何時(shí)開始

  默認(rèn)是 0s 鼠標(biāo)觸發(fā)就立即開始 可以設(shè)置 延遲觸發(fā)時(shí)間

案例：

div {
            width: 200px;
            height: 100px;
            background-color: pink;
            /* transition: 要過渡的屬性  花費(fèi)時(shí)間  運(yùn)動(dòng)曲線  何時(shí)開始; */
            transition: width 0.6s ease 0s, height 0.3s ease-in 1s;
            /* transtion 過渡的意思  這句話寫到div里面而不是 hover里面 */
  
            
}
div:hover {  /* 鼠標(biāo)經(jīng)過盒子尾菇，我們的寬度變?yōu)?00 */

            width: 600px;
            height: 300px
}

transition: all 0.6s;  /* 所有屬性都變化用all 就可以了  后面?zhèn)z個(gè)屬性可以省略 */

transition: all 0.5s;

常見效果：

按鈕變換底色 圖片移動(dòng) 小米效果 （陰影效果） 傳智導(dǎo)航欄效果 等等

9. 列表頁(yè)制作

1). 列表頁(yè)準(zhǔn)備工作

• 列表頁(yè)面是新的頁(yè)面，我們需要新建 list.html

• 因?yàn)?列表頁(yè)的 頭部 和 底部 基本一致， 我們需要 把首頁(yè)中的 頭部 和 底部的 結(jié)構(gòu)復(fù)制過去

• 頭部和底部的 樣式 派诬，列表也需要劳淆， 因此 list.html 也需要 引入 common.css

• 同時(shí) 需要新的 list.css 文件 這個(gè) 樣式文件，里面只寫 list.html 結(jié)構(gòu)里面的內(nèi)容就好了

2). 列表頁(yè) header 和 nav 修改

4.png

• 秒殺盒子 sk 定位 即可 second kill
• 1 號(hào) 盒子 左側(cè)浮動(dòng) sk_list 里面包含 ul 和 li
• 2 號(hào)盒子 右側(cè)浮動(dòng) sk_con 里面 包含 ul 和 li

3). 列表頁(yè)主體盒子 sk _container

這個(gè)盒子里面包含了 所有的 列表頁(yè)的所有主體內(nèi)容

7.png

• 1號(hào)盒子 sk _container 給寬度 1200 不要給高度
• 2號(hào)盒子 sk_hd 插入圖片即可
• 3號(hào)盒子 sk_bd 里面包含 很多的 ul 和 li

4). sk_goods 布局

8.png

• 此li 我們命名為 sk_goods
• 1號(hào)位置 有 a 包含 本圖片 和下面的 標(biāo)題 插入 圖片即可 seckill_mod_goods_img 可以做一個(gè) 鼠標(biāo)放入 圖片 上滑動(dòng)的效果
• 2號(hào)位置 標(biāo)題 H5 命名為 sk_goods_title
• 3號(hào) 位置 為 價(jià)格 div 命名為 sk_goods_price
• 4號(hào)位置 為 div 命名為 sk_goods_progress 此處默赂，我們 采取 代碼的形式 寫出 這個(gè) 導(dǎo)航條
• 5號(hào)位置 為 a 鏈接 命名為 sk_goods_buy 此處注意沛鸵， 因?yàn)楦负凶右呀?jīng)有左右padding 我們這里用定位合適。

5). 分頁(yè)制作 page

6.png

• 最大的盒子 我們div 命名為 page 注意里面的盒子 全部用 行內(nèi)塊
• 1號(hào)盒子 用 span 命名為 page_num ( 頁(yè)碼的意思 ) 里面 放 a 把a(bǔ) 轉(zhuǎn)換為 行內(nèi)塊 設(shè)置樣式
  • pn_prev 上一頁(yè) pn_next 下一頁(yè)
• 2號(hào)盒子 用 span 命名為 page_skip ( skip 跳轉(zhuǎn) 轉(zhuǎn)移的意思 ) 里面注意 有 input 和 button

10.? 知識(shí)點(diǎn) -獲得焦點(diǎn)元素

:focus 偽類 選擇器用于選取獲得焦點(diǎn)的元素 缆八。 我們這里主要針對(duì)的是 表單元素

:hover

語(yǔ)法：

.total input {
  border: 1px solid #ccc;
  height: 30px;
  width: 40px;
  transition: all .5s;
}
/*這個(gè)input 獲得了焦點(diǎn)*/
.total input:focus {
  width: 80px;
  border: 1px solid skyblue;
}

border: 1px solid #ccc;
height: 30px;
width: 40px;
transition: all .5s;
}
/這個(gè)input 獲得了焦點(diǎn)/
.total input:focus {
width: 80px;
border: 1px solid skyblue;
}

11. 詳情頁(yè) detail.html

1). 面包屑導(dǎo)航

• crumb_wrap 面包屑導(dǎo)航
• 關(guān)于面包屑導(dǎo)航的由來是源于一則童話故事的一個(gè)詞語(yǔ)：漢澤爾和格蕾特爾兩個(gè)人在穿過森林是曲掰，為了避免找不到回家的路，他們?cè)谘赝咀哌^的地方都會(huì)撒下面包屑以便于根據(jù)這些面包屑找到回家的路奈辰。

2). 產(chǎn)品介紹 模塊

2.png

• 1號(hào)盒子 本模塊 命名為產(chǎn)品模塊 product_intro （ introduction介紹）
• 此模塊不要給高度 因?yàn)橛覀?cè)的模塊內(nèi)容高度不固定
• 里面有2個(gè)盒子 分為是2號(hào)盒子 和 3號(hào)盒子
• 2號(hào)盒子為 預(yù)覽區(qū)域 preview_wrap 給寬度栏妖，給高度， 左浮動(dòng)
• 3號(hào)盒子為 產(chǎn)品詳細(xì)信息區(qū)域 itemInfo_wrap 給寬度 奖恰，不要給高度 左側(cè)浮動(dòng)

3). product_intro模塊

• 1號(hào)盒子 為 圖片預(yù)覽 命名為 preview_img 注意里面的圖片吊趾，我們切圖的時(shí)候是 398*398 像素的

• 2號(hào)盒子 為 預(yù)覽列表 命名為 preview_list

  preview_list 制作

4.png

• 盒子 有左右按鈕 arrow_prev arrow_next 用定位即可
• 中間 用 ul 命名為 list-item 給寬度和高度 然后 margin: 0 auto; 水平居中對(duì)齊即可

4). itemInfo_wrap 模塊

7.png

• 此盒子命名為 itemInfo

• 1 號(hào)盒子 為 頭部 sku_name

• 2 號(hào)盒子 為 最新新聞 news

• 3號(hào)盒子 為 產(chǎn)品詳細(xì)摘要 我們命名為 summary （摘要的意思） 之所以下面都是摘要部分，因?yàn)槔锩娓袷交鞠嗤?/p>

• 下面為詳細(xì)命名

  名稱	說明
  頭部名稱	sku_name skull 頭骨
  新聞	news
  摘要	summary
  評(píng)價(jià)	remark
  價(jià)格摘要	summary_price
  促銷摘要	summary_promotion
  配送至	summary_stock
  支持	summary_support
  選擇	choose
  選擇版本	choose_version
  選擇類型	choose_type
  選擇按鈕組	choose_btns
  選擇數(shù)量	choose_amount add 是加的意思
  減去	reduce cursor: not-allowed; 禁止符號(hào)
  加入購(gòu)物車	addshopcar

5). 產(chǎn)品細(xì)節(jié)模塊 product_detail

6.png

• 大盒子為 product_detail 模塊 不要給高度 瑟啃，別忘記清除浮動(dòng)
• 1號(hào)盒子 左側(cè)浮動(dòng) 命名為 aside 有寬度 不給高度
• 2號(hào)盒子 右側(cè)浮動(dòng) 命名為 detail 有寬度不給高度

6) aside 布局

8.png

• 1 號(hào)盒子 命名為 tab_list 給高度就好了 论泛，里面 放 ul 和 li 注意這是 tab欄切換布局
• 2 號(hào)盒子 命名為 tab_con 里面還包含 很多個(gè)ul.item 和 上面的 tab_list 里面的li一一對(duì)應(yīng)。

7) detail 布局

9.png

• 1 號(hào)盒子 命名為 detail_tab_list 給高度就好了 翰守，里面 放 ul 和 li 注意這是 tab欄切換布局
• 2 號(hào)盒子 命名為 detail_tab_con 里面還包含 很多個(gè)ul.item 和 上面的 tab_list 里面的li一一對(duì)應(yīng)孵奶。

12. 注冊(cè)頁(yè)面 register

注冊(cè)頁(yè)面

10.png

registerarea布局

11.png