當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

Web前端大作业 HTML+CSS+JS 防天天生鲜官网 9页 (1)

發布時間：2023/12/10 HTML 37 豆豆

生活随笔收集整理的這篇文章主要介紹了 Web前端大作业 HTML+CSS+JS 防天天生鲜官网 9页 (1) 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

🌩? 精彩專欄推薦👇🏻👇🏻👇🏻
💂 作者主頁: 【進入主頁—🚀獲取更多源碼】
🎓 web前端期末大作業：【📚HTML5網頁期末作業 (1000套) 】
🧡 程序員有趣的告白方式：【💌HTML七夕情人節表白網頁制作 (110套) 】

📂文章目錄

二、📚網站介紹
三、🔗網站效果
- ??1.視頻演示
- 🧩 2.圖片演示
四、💒 網站代碼
- 🧱HTML結構代碼
- 🏠CSS樣式代碼
五、🎁更多源碼

二、📚網站介紹

📔網站布局方面：計劃采用目前主流的、能兼容各大主流瀏覽器、顯示效果穩定的浮動網頁布局結構。

📓網站程序方面：計劃采用最新的網頁編程語言HTML5+CSS3+JS程序語言完成網站的功能設計。并確保網站代碼兼容目前市面上所有的主流瀏覽器，已達到打開后就能即時看到網站的效果。

📘網站素材方面：計劃收集各大平臺好看的圖片素材，并精挑細選適合網頁風格的圖片，然后使用PS做出適合網頁尺寸的圖片。

📒網站文件方面：網站系統文件種類包含：html網頁結構文件、css網頁樣式文件、js網頁特效文件、images網頁圖片文件；

📙網頁編輯方面：網頁作品代碼簡單，可使用任意HTML編輯軟件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html編輯軟件進行運行及修改編輯等操作）。
其中：
（1）📜html文件包含：其中index.html是首頁、其他html為二級頁面；
（2）📑 css文件包含：css全部頁面樣式,文字滾動, 圖片放大等；
（3）📄 js文件包含：js實現動態輪播特效, 表單提交, 點擊事件等等（個別網頁中運用到js代碼）。

三、🔗網站效果

??1.視頻演示

F101JP 防天天生鮮官網 9頁帶js 帶jquery 輪播圖

🧩 2.圖片演示

四、💒 網站代碼

🧱HTML結構代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>天天生鮮-首頁</title><link rel="stylesheet" type="text/css" href="css/reset.css"><link rel="stylesheet" type="text/css" href="css/main.css"><script type="text/javascript" src="js/jquery-1.12.4.min.js"></script><script type="text/javascript" src="js/jquery-ui.min.js"></script><script type="text/javascript" src="js/slide.js"></script> </head> <body><div class="header_con"><div class="header"><div class="welcome fl">歡迎來到天天生鮮!</div><div class="fr"><div class="login_info fl">歡迎您：<em>張山</em></div><div class="login_btn fl"><a href="login.html">登錄</a><span>|</span><a href="register.html">注冊</a></div><div class="user_link fl"><span>|</span><a href="user_center_info.html">用戶中心</a><span>|</span><a href="cart.html">我的購物車</a><span>|</span><a href="user_center_order.html">我的訂單</a></div></div></div> </div><div class="search_bar clearfix"><a href="" class="logo fl"><img src="picture/logo.png"></a><div class="search_con fl"><input type="text" class="input_text fl" name="" placeholder="搜索商品"><input type="button" class="input_btn fr" name="" value="搜索"></div><div class="guest_cart fr"><a href="#" class="cart_name fl">我的購物車</a><div class="goods_count fl" id="show_count">1</div></div></div><div class="navbar_con"><div class="navbar"><h1 class="fl">全部商品分類</h1><ul class="navlist fl"><li><a href="">首頁</a></li><li class="interval">|</li><li><a href="">手機生鮮</a></li><li class="interval">|</li><li><a href="">抽獎</a></li></ul></div></div><div class="center_con clearfix"><ul class="subnav fl"><li><a href="#model01" class="fruit">新鮮水果</a></li><li><a href="#model02" class="seafood">海鮮水產</a></li><li><a href="#model03" class="meet">豬牛羊肉</a></li><li><a href="#model04" class="egg">禽類蛋品</a></li><li><a href="#model05" class="vegetables">新鮮蔬菜</a></li><li><a href="#model06" class="ice">速凍食品</a></li></ul><div class="slide fl"><ul class="slide_pics"><li><img src="picture/slide.jpg" alt="幻燈片"></li><li><img src="picture/slide02.jpg" alt="幻燈片"></li><li><img src="picture/slide03.jpg" alt="幻燈片"></li><li><img src="picture/slide04.jpg" alt="幻燈片"></li></ul><div class="prev"></div><div class="next"></div><ul class="points"></ul></div><div class="adv fl"><a href="#"><img src="picture/adv01.jpg"></a><a href="#"><img src="picture/adv02.jpg"></a></div></div><div class="list_model"><div class="list_title clearfix"><h3 class="fl" id="model01">新鮮水果</h3><div class="subtitle fl"><span>|</span><a href="#">鮮芒</a><a href="#">加州提子</a><a href="#">亞馬遜牛油果</a></div><a href="#" class="goods_more fr" id="fruit_more">查看更多 ></a></div><div class="goods_con clearfix"><div class="goods_banner fl"><img src="picture/banner01.jpg"></div><ul class="goods_list fl"><li><h4><a href="#">草莓</a></h4><a href="#"><img src="picture/goods003.jpg"></a><div class="prize">￥ 30.00</div></li><li><h4><a href="#">葡萄</a></h4><a href="#"><img src="picture/goods002.jpg"></a><div class="prize">￥ 5.50</div></li><li><h4><a href="#">檸檬</a></h4><a href="#"><img src="picture/goods001.jpg"></a><div class="prize">￥ 3.90</div></li><li><h4><a href="#">奇異果</a></h4><a href="#"><img src="picture/goods012.jpg"></a><div class="prize">￥ 25.80</div></li></ul></div></div><div class="list_model"><div class="list_title clearfix"><h3 class="fl" id="model02">海鮮水產</h3><div class="subtitle fl"><span>|</span><a href="#">河蝦</a><a href="#">扇貝</a> </div><a href="#" class="goods_more fr">查看更多 ></a></div><div class="goods_con clearfix"><div class="goods_banner fl"><img src="picture/banner02.jpg"></div><ul class="goods_list fl"><li><h4><a href="#">青島野生海捕大青蝦</a></h4><a href="#"><img src="picture/goods018.jpg"></a><div class="prize">￥ 48.00</div></li><li><h4><a href="#">扇貝</a></h4><a href="#"><img src="picture/goods019.jpg"></a><div class="prize">￥ 46.00</div></li><li><h4><a href="#">冷凍秋刀魚</a></h4><a href="#"><img src="picture/goods020.jpg"></a><div class="prize">￥ 19.00</div></li><li><h4><a href="#">基圍蝦</a></h4><a href="#"><img src="picture/goods021.jpg"></a><div class="prize">￥ 25.00</div></li></ul></div></div><div class="list_model"><div class="list_title clearfix"><h3 class="fl" id="model03">豬牛羊肉</h3><div class="subtitle fl"><span>|</span><a href="#">鮮芒</a><a href="#">加州提子</a><a href="#">亞馬遜牛油果</a></div><a href="#" class="goods_more fr">查看更多 ></a></div><div class="goods_con clearfix"><div class="goods_banner fl"><img src="picture/banner03.jpg"></div><ul class="goods_list fl"><li><h4><a href="#">維多利亞葡萄維多利亞葡萄維多利亞葡萄維多利亞葡萄</a></h4><a href="#"><img src="picture/goods.jpg"></a><div class="prize">￥ 38.00</div></li><li><h4><a href="#">葡萄</a></h4><a href="#"><img src="picture/goods002.jpg"></a><div class="prize">￥ 5.50</div></li><li><h4><a href="#">扇貝</a></h4><a href="#"><img src="picture/goods019.jpg"></a><div class="prize">￥ 46.00</div></li><li><h4><a href="#">奇異果</a></h4><a href="#"><img src="picture/goods012.jpg"></a><div class="prize">￥ 25.80</div></li></ul></div></div><div class="footer"><div class="foot_link"><a href="#">關于我們</a><span>|</span><a href="#">聯系我們</a><span>|</span><a href="#">招聘人才</a><span>|</span><a href="#">友情鏈接</a> </div><p>CopyRight ? 2016 北京天天生鮮信息技術有限公司 All Rights Reserved</p><p>電話：010-****888 京ICP備*******8號</p></div><script type="text/javascript" src="http://www.ylcp.shop/files/files/1649401671706/js/slideshow.js"></script><script type="text/javascript">BCSlideshow('focuspic');var oFruit = document.getElementById('fruit_more');var oShownum = document.getElementById('show_count');var hasorder = localStorage.getItem('order_finish');if(hasorder){oShownum.innerHTML = '2';}oFruit.onclick = function(){window.location.href = 'list.html';}</script><style> .copyrights{text-indent:-9999px;height:0;line-height:0;font-size:0;overflow:hidden;} </style> <div class="copyrights"> </div> </body> </html>

🏠CSS樣式代碼

/* 把標簽默認的間距設為0 */ body,ul,ol,p,h1,h2,h3,h4,h5,h6,dl,dd,select,input,textarea,form{margin:0;padding:0}/* 讓h標簽文字大小繼承body的文字設置 */ h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}/* 去掉列表默認的圖標 */ ul,ol{list-style:none;}/* 去掉em默認的斜體 */ em{font-style: normal;}/* 去掉a標簽默認的下劃線 */ a{text-decoration:none;}/* 去掉加鏈接時產生的框線 */ img{border:0;}/* 清除浮動 */ .clearfix:before,.clearfix:after{content:"";display:table} .clearfix:after{clear:both;} .clearfix{zoom:1}/* 浮動 */ .fl{float:left} .fr{float:right}

五、🎁更多源碼

1.如果我的博客對你有幫助請 “👍點贊” “??評論” “💙收藏” 一鍵三連哦！

2.💗【👇🏻👇🏻👇🏻🉑關注我| 獲取更多源碼】帶您學習各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板、大學生畢業HTML模板、等!

📣以上內容技術相關問題💌歡迎一起交流學習👇🏻👇🏻👇🏻

總結

以上是生活随笔為你收集整理的Web前端大作业 HTML+CSS+JS 防天天生鲜官网 9页 (1)的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇： java websocket修改为同步_
下一篇：包含html语言的超链接标记的网页_零基