當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

html5网页设计大作业-dw企业网页设计带图片轮播留言 hbuilder大学生网页设计作业成品模板|百岁山矿泉水网页设计

發布時間：2023/12/9 编程问答 38 豆豆

生活随笔收集整理的這篇文章主要介紹了 html5网页设计大作业-dw企业网页设计带图片轮播留言 hbuilder大学生网页设计作业成品模板|百岁山矿泉水网页设计小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

html5靜態網頁設計要是用HTML DIV+CSS JS等來完成頁面的排版設計,一般的網頁作業需要融入以下知識點：div布局、浮動、定位、高級css、表格、表單及驗證、js輪播圖、音頻視頻 Flash的應用、ul li、下拉導航欄、鼠標劃過效果等知識點，學生網頁作業源碼可以去猿猿設計官網下載，制作水平和原創度都適合學習或交作業用，記得點贊；猿猿網頁設計官網http://yuanyuankeji.net/html/

一般html5靜態網頁設計作業主題有個人網頁設計、美食網頁設計、家鄉網頁設計、?企業網頁設計、學校、旅游網頁設計、電商購物網頁設計、寵物網頁設計、茶葉、家居、酒店、舞蹈、動漫網頁設計、明星、服裝網頁設計、體育網頁設計、化妝品網頁設計、物流、書籍、婚紗、軍事網頁設計、游戲網頁設計、節日網頁設計、環保網頁設計、電影、攝影、文化網頁設計、 ?鮮花網頁設計、禮品、汽車網頁設計、其他等網頁設計, 成品網頁設計可以達到90分左右水平, 可滿足大學生網頁大作業網頁設計需求, 喜歡的可以聯系，我們也可以根據要求進行個性化定制。
?

一、作品展示?

網站首頁

?二、文件目錄

三、首頁代碼實現?

這里展示首頁的html代碼和css代碼，圖片文件夾不展示。如需完整代碼可以聯系作者；

html代碼如下：

<!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>百歲山天然礦泉水</title> <link rel="stylesheet" type="text/css" href="css/style.css"> <script type="text/javascript" src="js/lunbo.js"></script> <style type="text/css"> #baisuishan {/* 設置一個大的div ，控制頁面全屏并居中顯示采用絕對定位 */position: absolute;width: 100%;height: 938px;z-index: 1;left: 0px;top: 0px; } #baisuishan #title {/* 標題欄高度設置為100 左右居中，插入背景圖 */height: 100px;width: 960px;margin-right: auto;margin-left: auto;background-image:url("?images/logo.jpg"); } #baisuishan #title #dhl_ {/* 設置導航欄總體寬度以及位置 */height: 25px;width: 500px;padding-top: 57px;padding-left: 30px; } #baisuishan #title #dhl_ #dhl01 { /* 導航欄中每個導航的屬性設置 */height: 25px;width: 80px;border: 1px solid #e9211d;border-radius: 25px;margin-left: 15px;font-family: "微軟雅黑";font-size: 14px;color: #e9211d;text-align: center;line-height: 25px;float: left; } #baisuishan #main {/* 輪播圖寬度高度及位置定義 */height: 400px;width: 960px;margin-right: auto;margin-left: auto;margin-top: 25px;font-family: "微軟雅黑";font-size: 14px;color: #9c6427; } #baisuishan #miaoshu {/* 給正文部分設置div的大小與位置，設置其中文字的字號、顏色，設置div邊框使文字框更加醒目 */height: 152px;width: 960px;margin-right: auto;margin-left: auto;margin-top: 20px;font-family: "微軟雅黑";font-size: 11px;color: #444444;text-align: center;line-height: 22px;border: 1px solid #f5e5d7; } #baisuishan #footer {/* 底部版權信息欄大小及文字設置 */height: 60px;width: 960px;margin-right: auto;margin-left: auto;background-color: #320760;font-family: "微軟雅黑";font-size: 15px;color: #e9211d;text-align: center;line-height: 60px;margin-top: 50px; }a:link { /* 超鏈接顏色設置 */color: #e9211d;text-decoration: none; } a:visited {text-decoration: none;color: #e9211d; } a:hover {text-decoration: none;color: #e8e8e6; } a:active {text-decoration: none; } </style> </head><body> <div id="baisuishan"><div id="title"><div id="dhl_"><div id="dhl01"><a href="index.html">官網首頁</a></div><div id="dhl01"><a href="jianjie.html">品牌簡介</a></div><div id="dhl01"><a href="rexiao.html">當季熱銷</a></div><div id="dhl01"><a href="liuyan.html">給我留言</a></div></div></div><div id="main"><div id="fade_focus"> <div class="loading">Loading...<br /></div> <ul> <li><img src="?images/gg1.jpg" width="960px" height="400px"/></li> <li><img src="?images/gg2.jpg" width="960px" height="400px"/></li> <li><img src="?images/gg3.jpg" width="960px" height="400px"/></li> <li><img src="?images/gg4.jpg" width="960px" height="400px"/></li> </ul></div> </div><div id="miaoshu"><br />勵精圖治二十余載，景田集團(百歲山天然礦泉水)已發展成為中國包裝飲用水行業的知名企業，<br>產品涉及礦泉水、純凈水、蘇打水等多個系列，為消費者引領了獨特的科學健康飲水生活方式。景田集團正逐步完善全國的生產與市場的戰略布局，<br>銷售網絡已覆蓋中國大陸，還遠銷海外，在海內外市場取得了不菲的成績和良好聲譽。在產品暢銷全國的同時，<br>景田集團亦潛心開發國際市場，在意大利投資設廠，邁出了中國水企投資海外市場堅實的一步。<br>經過近26年的苦心經營、不斷創新、培育品牌，景田集團以專業、真誠、高效的企業精神備受客戶肯定、業界推崇以及消費者好評。<br /></div><div id="miaoshu"><img src="?images/gg5.jpg" width="960" height="152"></div> <div id="footer">? 百歲山天然礦泉水<br /> </div> </div> </body> </html>

?css代碼如下：

總結

以上是生活随笔為你收集整理的html5网页设计大作业-dw企业网页设计带图片轮播留言 hbuilder大学生网页设计作业成品模板|百岁山矿泉水网页设计的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Taro+react开发（43）重新渲染
下一篇： 4月第1周业务风控关注 |国家广播电视总