時(shí)間：2023-09-12 04:36:01 | 來源：網(wǎng)站運(yùn)營
時(shí)間：2023-09-12 04:36:01 來源：網(wǎng)站運(yùn)營
HTML5期末大作業(yè)：商城網(wǎng)站設(shè)計(jì)——防錘子手機(jī)商城官網(wǎng)首頁模板(HTML+CSS+JavaScript ) 電商網(wǎng)頁HTML代碼：?# HTML5期末大作業(yè)：商城網(wǎng)站設(shè)計(jì)——防錘子手機(jī)商城官網(wǎng)首頁模板HTML+CSS+JavaScript 電商網(wǎng)頁HTML代碼 學(xué)生網(wǎng)頁課程設(shè)計(jì)期末作業(yè)下載 商城網(wǎng)頁大學(xué)生網(wǎng)頁設(shè)計(jì)制作成
在線咨詢
1.網(wǎng)頁作品簡介方面 ：黑色的手機(jī)商城官網(wǎng)首頁靜態(tài)模板。小米，華為等手機(jī)數(shù)碼產(chǎn)品類網(wǎng)站主頁面模板。ps：單個(gè)首頁商城。2.網(wǎng)頁作品編輯方面：代碼為簡單學(xué)生水平 html+css 布局制作，作品下載后可使用任意HTML編輯軟件（例如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm 所有編輯器均可使用）3.網(wǎng)頁作品布局方面：網(wǎng)頁布局整體為LOGO、導(dǎo)航、主體內(nèi)容布局。子頁面多種布局，興趣愛好內(nèi)容使用圖片列表布局，成績頁面插入了表格，聯(lián)系我們使用圖片對(duì)齊方式設(shè)置了左對(duì)齊。4.網(wǎng)頁作品技術(shù)方面：使用CSS制作了網(wǎng)頁背景圖、鼠標(biāo)經(jīng)過及選中導(dǎo)航變色效果、下劃線等。 首頁制作了留言表單，同時(shí)簡單使用JavaScript制作了表單判斷（提交時(shí)表單不能為空）<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>錘子官網(wǎng)模板</title> <meta name="description" content=""> <meta name="keywords" content=""> <!--引入網(wǎng)頁樣式--> <link href="css/public.css" rel="stylesheet"/> <link href="css/cz.css" rel="stylesheet"/> <!--引入iconfont--> <link rel="stylesheet" href="css/iconfont.css"> <!--引入swiper--> <link rel="stylesheet" href="css/swiper.min.css"> <script src="js/swiper.min.js"></script> <!--引入自己寫的js--> <script src="js/index.js"></script></head><body><!--網(wǎng)頁開頭--> <div id="cz_page"> <!--頂部--> <div class="cz_top"> <h1><a href="cz.html"><img src="img/top/logo.png" alt=""></a></h1> <div class="top_list"> <ul> <li><a href="">在線商城</a></li> <li><a href="">堅(jiān)果Pro 2S</a></li> <li><a href="">堅(jiān)果R1</a></li> <li><a href=""> 堅(jiān)果TNT工作站</a></li> <li><a href="">Smartisan OS</a></li> <li><a href="">歡喜云</a></li> <li><a href="">論壇</a></li> <li><a href="">榮譽(yù)與獎(jiǎng)項(xiàng)</a></li> </ul> </div> <div class="top_sign"> <p><i class="iconfont icon-denglu"></i></p> <p><i class="iconfont icon-gouwuche"></i></p> </div> </div> <div class="cz_head_nav"> <div class="h-list"> <ul> <li class="f-bold"><a class="c-black" href="">首頁</a></li> <li><a href="">手機(jī)</a></li> <li><a href="">"足跡"系列</a></li> <li><a href="">官方配件</a></li> <li><a href="">暢呼吸</a></li> <li><a href="">品牌周邊</a></li> <li><a href="">只能音箱</a></li> <li><a href="">服務(wù)</a></li> <li><a href="">企業(yè)團(tuán)購</a></li> </ul> </div> </section> <!--品牌精選--> <section class="cz_brand b-r m-top-25"> <div class="phone-parts"> <div class="g-top"> <h2>品牌精選</h2> <p> <a href="">智能周邊</a> <span>·</span> <a href="">品質(zhì)生活</a> </p> </div> <table> <tr> <td colspan="2"> <div class="p-pic"> <img src="img/brandChoice/a.jpg" alt="brand"> <a href="" class="a-shadow"></a> </div> </td> <td> <div class="goodscon"> <div class="swiper-container hotGoods-swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"><a href=""><img src="img/brandChoice/b.webp" alt=""></a></div> </div> <!--分頁器 --> <div class="swiper-pagination hotGoods-swiper-pagination"></div> </div> <div class="goods-link"> <p><a href="">堅(jiān)果Pro 2S</a></p> <p><a href="">雙系統(tǒng) 無限屏</a></p> </div> <p class="goods-price">￥<span>1998.00</span></p> <div class="whole-link"> <a href="" class="check-detail">查看詳情</a> </div> </div> </td> <td> <div class="goodscon"> <div class="swiper-container hotGoods-swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"><a href=""><img src="img/brandChoice/c.webp" alt=""></a></div> <div class="swiper-slide"><a href=""><img src="img/brandChoice/e.webp" alt=""></a></div> <div class="swiper-slide"><a href=""><img src="img/brandChoice/f.webp" alt=""></a></div> </div> <!--分頁器 --> <div class="swiper-pagination hotGoods-swiper-pagination"></div> </div> <div class="goods-link"> <p><a href="">堅(jiān)果Pro 2S</a></p> <p><a href="">雙系統(tǒng) 無限屏</a></p> </div> <p class="goods-price">￥<span>1998.00</span></p> <div class="whole-link"> <a href="" class="check-detail">查看詳情</a> </div> </div> </td> </tr> <tr> <td> <div class="goodscon"> <div class="swiper-container hotGoods-swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"><a href=""><img src="img/brandChoice/d.webp" alt=""></a></div> </div> <!--分頁器 --> <div class="swiper-pagination hotGoods-swiper-pagination"></div> </div> <div class="goods-link"> <p><a href="">暢呼吸智能空氣凈化器 · 標(biāo)準(zhǔn)版</a></p> <p><a href="">超強(qiáng)凈化能力、超低噪音、超長壽命</a></p> </div> <p class="goods-price">￥<span>2998.00</span></p> <div class="whole-link"> <a href="#" class="check-detail">查看詳情</a> <a href="#" class="sell-out">已售罄</a> </div> </div> </td> <td> <div class="goodscon"> <div class="swiper-container hotGoods-swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"><a href=""><img src="img/brandChoice/e.webp" alt=""></a></div> </div> <!--分頁器 --> <div class="swiper-pagination hotGoods-swiper-pagination"></div> </div> <div class="goods-link"> <p><a href="">暢呼吸智能空氣凈化器 · 標(biāo)準(zhǔn)版</a></p> <p><a href="">超強(qiáng)凈化能力、超低噪音、超長壽命</a></p> </div> <p class="goods-price">￥<span>2998.00</span></p> <div class="whole-link"> <a href="#" class="check-detail">查看詳情</a> <a href="#" class="sell-out">已售罄</a> </div> </div> </td> <td> <div class="goodscon"> <div class="swiper-container hotGoods-swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"><a href=""><img src="img/brandChoice/f.webp" alt=""></a></div> </div> <!--分頁器 --> <div class="swiper-pagination hotGoods-swiper-pagination"></div> </div> <div class="goods-link"> <p><a href="">暢呼吸智能空氣凈化器 · 標(biāo)準(zhǔn)版</a></p> <p><a href="">超強(qiáng)凈化能力、超低噪音、超長壽命</a></p> </div> <p class="goods-price">￥<span>2998.00</span></p> <div class="whole-link"> <a href="#" class="check-detail">查看詳情</a> <a href="#" class="sell-out">已售罄</a> </div> </div> </td> <td> <div class="goodscon"> <div class="swiper-container hotGoods-swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"><a href=""><img src="img/brandChoice/g.webp" alt=""></a></div> </div> <!--分頁器 --> <div class="swiper-pagination hotGoods-swiper-pagination"></div> </div> <div class="goods-link"> <p><a href="">暢呼吸智能空氣凈化器 · 標(biāo)準(zhǔn)版</a></p> <p><a href="">超強(qiáng)凈化能力、超低噪音、超長壽命</a></p> </div> <p class="goods-price">￥<span>2998.00</span></p> <div class="whole-link"> <a href="#" class="check-detail">查看詳情</a> <a href="#" class="sell-out">已售罄</a> </div> </div> </td> </tr> </table> </div> </section> <!--introduce2--> <section class="cz_intro2 b-r m-top-25"> <div class="cz_phone"> <ul> <li><img src="img/intro2/a.jpg" alt=""><a href=""></a></li> <li><img src="img/intro2/b.jpg" alt=""><a href=""></a></li> <li><img src="img/intro2/c.jpg" alt=""><a href=""></a></li> <li><img src="img/intro2/d.jpg" alt=""><a href=""></a></li> </ul> </div> </section> <!--論壇精選--> <section class="cz_forum_choice b-r m-top-25"> <div class="g-top"> <h2>論壇精選</h2> <p>前往論壇 <span>></span></p> </div> <div class="form_intro"> <ul> <li> <div><img src="img/forumChoice/a.jpg" alt=""></div> <p>[開箱] 堅(jiān)果 Pro 2S 內(nèi)斂騷藍(lán)驚艷炫光</p> <p>內(nèi)斂騷藍(lán)，驚艷炫光</p> <p>閱讀全文 ></p> <a href="" class="whole-link"></a> </li> <li> <div><img src="img/forumChoice/b.jpg" alt=""></div> <p>[開箱] 堅(jiān)果 Pro 2S</p> <p>全新的炫光藍(lán)急炫光紅色相當(dāng)驚艷</p> <p>閱讀全文 ></p> <a href="" class="whole-link"></a> </li> <li> <div><img src="img/forumChoice/c.jpg" alt=""></div> <p>[開箱] 純白色堅(jiān)果Pro2圖賞</p> <p>優(yōu)美如斯，冰清玉潔</p> <p>閱讀全文 ></p> <a href="" class="whole-link"></a> </li> <li> <div><img src="img/forumChoice/d.jpg" alt=""></div> <p>[合輯] 八月優(yōu)秀攝影作品</p> <p>8月的優(yōu)秀作品如期而至</p> <p>閱讀全文 ></p> <a href="" class="whole-link"></a> </li> </ul> </div> </section> <!--網(wǎng)頁身體結(jié)束--> </div><!--網(wǎng)頁結(jié)束--> </div><script> //banner----swiper初始化 var mySwiper = new Swiper ('.main-swiper-container', { autoplay:true, speed:3000, loop: true, effect : 'fade', fadeEffect: { crossFade: true, }, //分頁器 pagination: { el: '.main-swiper-pagination', clickable:true, }, }); //熱門商品部分 var hotGoodsSwiper=new Swiper ('.hotGoods-swiper-container', { autoplay:false, effect : 'fade', fadeEffect: { crossFade: true, }, //分頁器 pagination: { el: '.hotGoods-swiper-pagination', clickable:true, }, }); //搜索框效果 var oInp=document.getElementById("h-inp"), oPTxt=document.getElementById("h-inp-txt"), oSearCont=document.getElementById("cz-search");//搜索框部分 oInp.onfocus=function(){ //獲得焦點(diǎn) oPTxt.style.display="none"; } oInp.onblur=function(){ //失去焦點(diǎn) oPTxt.style.display="block"; }</script></body></html>web前端 零基礎(chǔ)-入門到高級(jí) (視頻+源碼+開發(fā)軟件+學(xué)習(xí)資料+面試題) 一整套 (教程) 適合入門到高級(jí)的童鞋們?nèi)胧謣送1000套HTML+CSS+JavaScript模板網(wǎng)站 [點(diǎn)贊+好評(píng)+收藏] 三連 支持下吧，你的「點(diǎn)贊，好評(píng)，收藏」是我創(chuàng)作的動(dòng)力。關(guān)注我 ~ 每天帶你學(xué)習(xí) :各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板 、大學(xué)生畢業(yè)HTML模板 、期末大作業(yè)模板 、等! 「在這里有好多 前端 開發(fā)者，一起探討 前端 Node 知識(shí)，互相學(xué)習(xí)」！關(guān)注↓公Z號(hào) 獲取更多源碼 !HTML5期末考核大作業(yè)源碼 包含 個(gè)人、 美食、 公司、 學(xué)校、 旅游、 電商、 寵物、 電器、 茶葉、 家居、 酒店、 舞蹈、 動(dòng)漫、 明星、 服裝、 體育、 化妝品、 物流、 環(huán)保、 書籍、 婚紗、 軍事、 游戲、 節(jié)日、 戒煙、 電影、 攝影、 文化、 家鄉(xiāng)、 鮮花、 禮品、 汽車、 其他 可滿足大學(xué)生網(wǎng)頁大作業(yè)網(wǎng)頁設(shè)計(jì)需求, 喜歡的可以下載! 關(guān)鍵詞：商城,模板,作業(yè),設(shè)計(jì),錘子
客戶&案例
營銷資訊
關(guān)于我們
微信公眾號(hào)
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
