《商品列表和詳細(xì)信息頁面的制作.ppt》由會(huì)員分享，可在線閱讀，更多相關(guān)《商品列表和詳細(xì)信息頁面的制作.ppt（10頁珍藏版）》請(qǐng)?jiān)谘b配圖網(wǎng)上搜索。

1、網(wǎng)頁設(shè)計(jì)與制作教程（HTML+CSS+JavaScript）,機(jī)械工業(yè)出版社同名教材 配套電子教案,11.1 制作商品搜索列表頁面 11.2 制作商品詳細(xì)信息頁面,,第11章 商品列表和詳細(xì)信息頁面的制作,搜索列表頁面是客戶在搜索欄中輸入關(guān)鍵字后，通過系統(tǒng)搜索找出符合條件的產(chǎn)品列表頁面。搜索列表頁面的效果如圖11-1所示,,11.1 制作商品搜索列表頁面,,,,,,布局示意圖如圖11-2所示。,,11.1 制作商品搜索列表頁面,,,,,,,1前期準(zhǔn)備 （1）新建網(wǎng)頁 在站點(diǎn)根目錄下新建搜索列表頁面list.html。 （2）添加CSS規(guī)則 打開網(wǎng)站style目錄下的樣式表文件style.c

2、ss，在首頁的樣式之后準(zhǔn)備添加實(shí)現(xiàn)搜索結(jié)果翻頁效果的CSS規(guī)則。 2制作頁面 添加一個(gè)pagination類的Div容器，用于對(duì)整個(gè)翻頁區(qū)域進(jìn)行控制 。,,11.1 制作商品搜索列表頁面,,,,,,,,在網(wǎng)頁的結(jié)構(gòu)代碼中將剛創(chuàng)建的currentpage類應(yīng)用在當(dāng)前頁面數(shù)字所在的標(biāo)簽中，代碼如下： 1 此時(shí)，頁面效果如圖11-7所示。,,11.1 制作商品搜索列表頁面,,,,,,,,,,商品詳細(xì)信息頁面是客戶查看具體產(chǎn)品時(shí)顯示的頁面，此外，頁面中還增加了相似產(chǎn)品和推薦產(chǎn)品的列表，為瀏覽者提供產(chǎn)品參考。商品詳細(xì)信息頁面的效果如圖11-8所示。,,11.2 制作商品詳細(xì)信息頁面,,,,,,,,,,,,布局示意圖如圖11-9所示。,,11.2 制作商品詳細(xì)信息頁面,,,,,,,,,,,,,1左側(cè)邊欄區(qū)域的制作 2商品詳細(xì)介紹區(qū)域的制作,,11.2 制作商品詳細(xì)信息頁面,,,,,,,,,,,,,,,,,1讀者繼續(xù)制作習(xí)題10中網(wǎng)上書店的圖書目錄子頁面，如圖11-16所示。 2制作網(wǎng)上書店的特別推薦子頁面，如圖11-17所示。,習(xí)題11,,,,,