Web前端大作业 HTML+CSS+JS 防天天生鲜官网 9页 (1)
生活随笔
收集整理的這篇文章主要介紹了
Web前端大作业 HTML+CSS+JS 防天天生鲜官网 9页 (1)
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
🌩? 精彩專欄推薦👇🏻👇🏻👇🏻
💂 作者主頁: 【進(jìn)入主頁—🚀獲取更多源碼】
🎓 web前端期末大作業(yè)： 【📚HTML5網(wǎng)頁期末作業(yè) (1000套) 】
🧡 程序員有趣的告白方式：【💌HTML七夕情人節(jié)表白網(wǎng)頁制作 (110套) 】
📂文章目錄
- 二、📚網(wǎng)站介紹
- 三、🔗網(wǎng)站效果
- ??1.視頻演示
- 🧩 2.圖片演示
- 四、💒 網(wǎng)站代碼
- 🧱HTML結(jié)構(gòu)代碼
- 🏠CSS樣式代碼
- 五、🎁更多源碼
二、📚網(wǎng)站介紹
📔網(wǎng)站布局方面：計劃采用目前主流的、能兼容各大主流瀏覽器、顯示效果穩(wěn)定的浮動網(wǎng)頁布局結(jié)構(gòu)。
📓網(wǎng)站程序方面：計劃采用最新的網(wǎng)頁編程語言HTML5+CSS3+JS程序語言完成網(wǎng)站的功能設(shè)計。并確保網(wǎng)站代碼兼容目前市面上所有的主流瀏覽器，已達(dá)到打開后就能即時看到網(wǎng)站的效果。
📘網(wǎng)站素材方面：計劃收集各大平臺好看的圖片素材，并精挑細(xì)選適合網(wǎng)頁風(fēng)格的圖片，然后使用PS做出適合網(wǎng)頁尺寸的圖片。
📒網(wǎng)站文件方面：網(wǎng)站系統(tǒng)文件種類包含：html網(wǎng)頁結(jié)構(gòu)文件、css網(wǎng)頁樣式文件、js網(wǎng)頁特效文件、images網(wǎng)頁圖片文件；
📙網(wǎng)頁編輯方面：網(wǎng)頁作品代碼簡單，可使用任意HTML編輯軟件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html編輯軟件進(jìn)行運(yùn)行及修改編輯等操作）。
其中：
（1）📜html文件包含：其中index.html是首頁、其他html為二級頁面；
（2）📑 css文件包含：css全部頁面樣式,文字滾動, 圖片放大等；
（3）📄 js文件包含：js實現(xiàn)動態(tài)輪播特效, 表單提交, 點擊事件等等（個別網(wǎng)頁中運(yùn)用到j(luò)s代碼）。
三、🔗網(wǎng)站效果
??1.視頻演示
F101JP 防天天生鮮官網(wǎng) 9頁 帶js 帶jquery 輪播圖
🧩 2.圖片演示
四、💒 網(wǎng)站代碼
🧱HTML結(jié)構(gòu)代碼
<!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="">手機(jī)生鮮</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">海鮮水產(chǎn)</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">海鮮水產(chǎn)</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="#">關(guān)于我們</a><span>|</span><a href="#">聯(lián)系我們</a><span>|</span><a href="#">招聘人才</a><span>|</span><a href="#">友情鏈接</a> </div><p>CopyRight ? 2016 北京天天生鮮信息技術(shù)有限公司 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樣式代碼
/* 把標(biāo)簽?zāi)J(rèn)的間距設(shè)為0 */ body,ul,ol,p,h1,h2,h3,h4,h5,h6,dl,dd,select,input,textarea,form{margin:0;padding:0}/* 讓h標(biāo)簽文字大小繼承body的文字設(shè)置 */ h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}/* 去掉列表默認(rèn)的圖標(biāo) */ ul,ol{list-style:none;}/* 去掉em默認(rèn)的斜體 */ em{font-style: normal;}/* 去掉a標(biāo)簽?zāi)J(rèn)的下劃線 */ a{text-decoration:none;}/* 去掉加鏈接時產(chǎn)生的框線 */ 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.💗【👇🏻👇🏻👇🏻🉑關(guān)注我| 獲取更多源碼】 帶您學(xué)習(xí)各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板 、大學(xué)生畢業(yè)HTML模板 、等!
📣以上內(nèi)容技術(shù)相關(guān)問題💌歡迎一起交流學(xué)習(xí)👇🏻👇🏻👇🏻
總結(jié)
以上是生活随笔為你收集整理的Web前端大作业 HTML+CSS+JS 防天天生鲜官网 9页 (1)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： java websocket修改为同步_
- 下一篇： 包含html语言的超链接标记的网页_零基