HTML5期末大作業：水果超市網站設計——水果超市(6頁) HTML+CSS+JavaScript學生DW網頁設計作業成品web課程設計網頁規劃與設計網購商城設定網頁

HTML5期末大作業：水果超市網站設計——水果超市（6頁） HTML+CSS+JavaScript 學生DW網頁設計作業成品 web課程設計網頁規劃與設計 網購商城設定網頁

常見網頁設計作業題材有

個人、 美食、 公司、 學校、 旅遊、 電商、 寵物、 電器、 茶葉、 家居、 酒店、 舞蹈、 動漫、 明星、 服裝、 體育、 化妝品、 物流、 環保、 書籍、 婚紗、 軍事、 遊戲、 節日、 戒菸、 電影、 攝影、 文化、 家鄉、 鮮花、 禮品、 汽車、 其他

等網頁設計題目，

A+水平作業

， 可滿足大學生網頁大作業網頁設計需求， 喜歡的可以下載！

作者主頁-更多原始碼

HTML期末大作業文章專欄

作品介紹

1.網頁作品簡介

：HTML期末大學生網頁設計作業 A+水平 ，喜歡的可以下載，文章頁支援手機PC響應式佈局。

2.網頁作品編輯

：作品下載後可使用任意HTML編輯軟體（如：

DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++

等任意HTML軟體編輯修改網頁）。

3.網頁作品技術

：Div+CSS、滑鼠滑過特效、Table、導航欄效果、banner、表單、二級三級頁面等，影片、 音訊元素 、Flash，同時設計了logo（原始檔），基本期末作業所需的知識點全覆蓋。

@TOC

一、作品展示

二、檔案目錄

三、程式碼實現

<！DOCTYPE html>

<

html

lang

=

“en”

>

<

head

>

<

meta

charset

=

“UTF-8”

>

<

title

>

最新資訊

title

>

<

link

href

=

“css/touch。css”

rel

=

“stylesheet”

>

<

link

href

=

“css/share。css”

rel

=

“stylesheet”

>

<

script

src

=

“js/jquery-1。12。3。js”

>

script

>

head

>

<

body

>

<！——頂部導航——>

<

div

class

=

“headr”

>

<

div

class

=

“heard-con”

>

<

img

src

=

“images/logo。jpg”

style

=

“margin-top： 7px；float： left；position： absolute”

>

<

div

class

=

“headr-nav”

>

<

ul

>

<

li

><

a

href

=

“index。html”

>

首頁

a

>

li

>

<

li

><

a

href

=

“hot。html”

>

蔬果熱賣

a

>

li

>

<

li

><

a

href

=

“produ。html”

>

全部產品

a

>

li

>

<

li

><

a

href

=

“consult。html”

>

最新資訊

a

>

li

>

<

li

><

a

href

=

“touch。html”

style

=

“color： #4AB344”

><

span

style

=

“color： #4AB344”

>

聯絡我們

span

>

a

>

li

>

ul

>

<

div

class

=

“sptopfoot”

>

<

div

class

=

“spbottom”

>

div

>

div

>

div

>

<

div

class

=

“headr-right”

>

<

i

class

=

“iconfont”

style

=

“font-size： 16px；margin-right： 10px”

>

；

i

>

我的購物車 ∨

<

div

class

=

“hr-car”

>

<

i

class

=

“iconfont”

style

=

“font-size： 40px；margin-right： 10px”

>

；

i

>

您的購物車內暫時沒有任何產品。

div

>

div

>

div

>

div

>

<！——頂部導航結束——>

<！——banner圖片——>

<

div

class

=

“her-banner”

>

div

>

<！——banner圖片結束——>

<

div

class

=

“content”

>

<！——建議開始——>

<

div

class

=

“recommand clear”

>

<

div

class

=

“rec-cont clear”

>

<

div

class

=

“rec-left”

>

<

div

class

=

“classily”

>

<

div

class

=

“cltop”

>

<

p

>

產品分類

p

>

div

>

<

div

class

=

“cltcon”

>

<

p

><

a

href

=

“#”

>

國產水果

a

>

p

>

<

p

><

a

href

=

“#”

>

進口水果

a

>

p

>

<

p

style

=

“border-bottom：0px dashed #999999；”

><

a

href

=

“#”

>

新鮮時蔬

a

>

p

>

div

>

div

>

<

div

class

=

“service”

>

<

div

class

=

“cltop”

>

<

p

>

線上客服

p

>

div

>

<

div

class

=

“sercon”

>

<

div

class

=

“qqs”

>

<

p

><

a

hidefocus

=

“true”

href

=

“#”

>

<

span

class

=

“serOnline-img0 qqImg0”

>

 ；

span

>

蜜桃

a

>

p

>

<

P

><

a

hidefocus

=

“true”

href

=

“#”

>

<

span

class

=

“serOnline-img0 qqImg0”

>

 ；

span

>

芒果

a

>

P

>

div

>

<

div

class

=

“tims”

>

<

div

class

=

“marBL-10”

>

<

span

class

=

“worktime-header-img”

>

 ；

span

>

<

span

class

=

“serWorkTimeText”

><

b

>

工作時間

b

>

span

>

div

>

<

div

class

=

“serOnline-list-v ”

><

span

>

週一至週五 ：8：30-17：30

span

>

div

>

<

div

class

=

“serOnline-list-v lastData”

><

span

>

週六至週日 ：9：00-17：00

span

>

div

>

div

>

div

>

div

>

div

>

<

div

class

=

“rec-right”

>

<

div

class

=

“rec-top”

>

<

div

class

=

“rt-left”

>

<

img

src

=

“images/tou-1。png”

>

div

>

<

div

class

=

“rt-right”

>

<

span

style

=

“line-height： 32px；”

>

<

span

style

=

“”

><

div

style

=

“”

>

<

span

style

=

“color： rgb（51， 51， 51）； font-size： 18px； background-color： transparent；”

>

向越來越多的人提供最好吃的水果

span

><

br

style

=

“”

>

div

><

div

style

=

“”

><

span

style

=

“”

>

<

p

style

=

“color： rgb（0， 0， 0）； font-family： 宋體； font-size： 12px；”

>

<

span

style

=

“font-size： 14px； font-family： 微軟雅黑； color： rgb（51， 51， 51）；”

>

FRESH蔬果（集團）有限公司以蔬果、水果、糧油、肉類、凍品、水產、南北乾貨以及花卉等農產品批發市場經營管理、生鮮配送為主力業態。

span

>

p

>

<

p

style

=

“color： rgb（0， 0， 0）； font-family： 宋體； font-size： 12px；”

><

span

style

=

“font-size： 14px； font-family： 微軟雅黑； color： rgb（51， 51， 51）；”

>

用畢生精力致力於水果產業鏈和水果專營連鎖業態的發展，為消費者提供最好吃的水果。開拓創新立宏願，決心“一生只做一件事，一心一意做水果”。

span

>

p

>

span

><

p

style

=

“color： rgb（0， 0， 0）； font-family： 宋體； font-size： 12px；”

>

p

>

div

>

span

><

div

style

=

“”

>

<

p

style

=

“color： rgb（0， 0， 0）； font-family： 宋體； font-size： 12px；”

>

p

>

div

>

span

>

div

>

div

>

<

div

class

=

“fk-editor simpleText ”

>

<

font

style

=

“color： rgb（5， 160， 69）；”

color

=

“#05a045”

>

<

span

style

=

“font-size： 15px；”

>

 ；

 ；

 ；

 ；

* 如有合作需要，請填寫以下表單，我們將盡快給您回覆，併為您提供最真誠的服務，謝謝您的支援。

span

>

font

>

div

>

<

div

class

=

“message”

>

<

p

>

姓名

p

>

<

div

class

=

“siteFormMiddle”

>

<

input

_show

=

“1”

class

=

“g_itext”

type

=

“text”

placeholder

=

“請輸入真實姓名”

>

<

div

class

=

“star”

>

*

div

>

div

>

<

p

>

電話

p

>

<

div

class

=

“siteFormMiddle”

>

<

input

_show

=

“1”

class

=

“g_itext”

type

=

“text”

placeholder

=

“請輸入真實電話”

>

<

div

class

=

“star”

>

*

div

>

div

>

<

p

>

聯絡時間

p

>

<

div

class

=

“siteFormMiddle”

>

<

select

_show

=

“1”

class

=

“resize”

>

<

option

value

=

“none”

style

=

“display： none； ”

>

請選擇

option

>

<

option

value

=

“工作日”

>

工作日

option

>

<

option

value

=

“週末”

>

週末

option

>

<

option

value

=

“隨時”

>

隨時

option

>

select

>

div

>

<

p

>

留言內容

p

>

<

div

class

=

“siteFormMiddle”

style

=

“height： 102px； ”

>

<

textarea

class

=

“g_textarea resize”

cols

=

“50”

rows

=

“3”

maxlength

=

“1000”

placeholder

=

“請輸入留言”

>

textarea

>

<

div

class

=

“star”

style

=

“line-height： 100px；”

>

*

div

>

div

>

<

p

>

購買方式

p

>

<

div

class

=

“siteFormMiddle”

>

<

div

class

=

“siteFormItemCheckItem_N_U siteFormItemCheckItem_N_U_A”

>

<

input

type

=

“radio”

id

=

“M376F1siteFormRadio3I0”

name

=

“M376F1siteFormRadioR3”

value

=

“批發”

>

<

label

for

=

“M376F1siteFormRadio3I0”

>

批發

label

>

div

>

<

div

class

=

“siteFormItemCheckItem_N_U siteFormItemCheckItem_N_U_A”

>

<

input

type

=

“radio”

id

=

“M376F1siteFormRadio3I1”

name

=

“M376F1siteFormRadioR3”

value

=

“零食”

>

<

label

for

=

“M376F1siteFormRadio3I1”

>

零食

label

>

div

>

div

>

<

div

class

=

“s_ibutton”

>

div

>

div

>

div

>

div

>

div

>

<！——建議結束——>

div

>

<！——底部——>

<

div

class

=

“footer”

>

<

div

class

=

“ft-con”

>

<

div

class

=

“ft-top”

>

<

img

src

=

“images/fot-1。jpg”

>

div

>

<

div

class

=

“ft-bo”

>

<

div

class

=

“ft-b”

>

<

h3

>

服務保障

h3

>

<

p

>

正品保證

p

>

<

p

>

7天無理由退換

p

>

<

p

>

退貨返運費

p

>

<

p

>

7X15小時客戶服務

p

>

div

>

<

div

class

=

“ft-b”

>

<

h3

>

支付方式

h3

>

<

p

>

公司轉賬

p

>

<

p

>

貨到付款

p

>

<

p

>

線上支付

p

>

<

p

>

分期付款

p

>

div

>

<

div

class

=

“ft-b”

>

<

h3

>

商家服務

h3

>

<

p

>

商家入駐

p

>

<

p

>

培訓中心

p

>

<

p

>

廣告服務

p

>

<

p

>

服務市場

p

>

div

>

<

div

class

=

“ft-b”

>

<

h3

>

服務保障

h3

>

<

p

>

免運費

p

>

<

p

>

海外配送

p

>

<

p

>

EMS

p

>

<

p

>

211限時達

p

>

div

>

div

>

<

div

class

=

“banq”

>

<

p

>

©2016 果然新鮮 版權所有

p

>

<

p

>

手機版 | 本站使用

<

span

><

img

src

=

“images/ft。jpg”

>

span

>

凡科建站搭建 | 管理登入

p

>

div

>

div

>

div

>

body

>

<

script

src

=

“js/touch。js”

>

script

>

html

>

四、學習資料

~ 關注我，點贊博文~ 每天帶你漲知識！

相關問題可以相互學習，可關注↓公Z號 獲取更多原始碼 ！

web前端 零基礎-入門到高階 (影片+原始碼+開發軟體+學習資料+面試題) 一整套 (教程)

適合入門到高階的童鞋們入手~送1000套HTML+CSS+JavaScript模板網站

五、更多原始碼

HTML5期末考核大作業原始碼

包含

個人、 美食、 公司、 學校、 旅遊、 電商、 寵物、 電器、 茶葉、 家居、 酒店、 舞蹈、 動漫、 明星、 服裝、 體育、 化妝品、 物流、 環保、 書籍、 婚紗、 軍事、 遊戲、 節日、 戒菸、 電影、 攝影、 文化、 家鄉、 鮮花、 禮品、 汽車、 其他

* 可滿足大學生網頁大作業網頁設計需求， 喜歡的可以下載！