時(shí)間：2023-09-16 06:24:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)
時(shí)間：2023-09-16 06:24:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)
網(wǎng)頁(yè)大作業(yè)代碼自?。?? 靜態(tài)網(wǎng)站的編寫(xiě)主要是用HTML DIV+CSS JS等來(lái)完成頁(yè)面的排版設(shè)計(jì) ? ,常用的網(wǎng)頁(yè)設(shè)計(jì)軟件有Dreamweaver、EditPlus、HBuilderX、VScode 、Webstorm、Animate等等，用的最多的還是DW，當(dāng)然不同軟件寫(xiě)出的前端Html5代碼都是一致的，本網(wǎng)頁(yè)適合修改成為各種類(lèi)型的產(chǎn)品展示網(wǎng)頁(yè)，比如美食、旅游、攝影、電影、音樂(lè)等等多種主題，希望對(duì)大家有所幫助。
在線咨詢(xún)
Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html編輯軟件進(jìn)行運(yùn)行及修改編輯等操作）。 其中： （1） html文件包含：其中index.html是首頁(yè)、其他html為二級(jí)頁(yè)面； （2） css文件包含：css全部頁(yè)面樣式,文字滾動(dòng), 圖片放大等； （3） js文件包含：js實(shí)現(xiàn)動(dòng)態(tài)輪播特效, 表單提交, 點(diǎn)擊事件等等（個(gè)別網(wǎng)頁(yè)中運(yùn)用到j(luò)s代碼）。<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>index - 精美的花甲美食網(wǎng)站HTML模板 - xxx</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="top"> <div class="w1280 clearfix"> <a href="" class="logo fl"> <img src="picture/logo.png" alt="" /> </a> <div class="fr clearfix"> <div class="fr tel"> <h3>全國(guó)免費(fèi)加盟熱線 <img src="picture/tel.png" alt="" /><img src="picture/n2.png" alt="" /></h3> </div> <div class="clearfix"></div> <ul class="clearfix navbar"> <li> <a href="index.html">首 頁(yè)<b></b></a> </li> <li> <a href="aboutus.html">關(guān)于我們<b></b></a> </li> <li> <a href="products.html">產(chǎn)品展示<b></b></a> </li> <li> <a href="newslist.html">新聞中心<b></b></a> </li> <li> <a href="branch.html">門(mén)店分布<b></b></a> </li> <li> <a href="joinus.html">招商加盟<b></b></a> </li> <li> <a href="contactus.html">聯(lián)系我們<b></b></a> </li> </ul> </div> </div> </div> <div class="banner"> <div class="bd"> <ul class="bannerfix slides clearfix"> <li> <img class="bimg" src="picture/banner.png" alt="" /> </li> <li> <img class="bimg" src="picture/banner.png" alt="" /> </li> <li> <img class="bimg" src="picture/banner.png" alt="" /> </li> </ul> </div> <div class="bamnline"><span></span></div> </div> <div class="section1"> <div class="w1280 clearfix"> <div class="left fl" data-scroll-reveal="enter left over 1s and move 50px"> <b></b> <p> 食為本，心為媒<br/> 技藝，是對(duì)傳統(tǒng)的續(xù)存和升華。 <br/> 而標(biāo)準(zhǔn)，則是現(xiàn)代品質(zhì)堅(jiān)守的底線。 <br/> 隨著時(shí)代流變而堅(jiān)守的技藝與標(biāo)準(zhǔn)， <br/> 已成為線上花甲成長(zhǎng)之路的靈魂。 </p> <h2>精致之選</h2> </div> <div class="right fr" data-scroll-reveal="enter right over 1s and move 50px"> <video width="638" height="359" src="http://www.w3school.com.cn/example/html5/mov_bbb.mp4" controls="controls"> </video> </div> </div> </div> <div class="div2" data-scroll-reveal="enter right over 1s and move 50px"> <a href=""> <figcaption> <h2>健康美味</h2> <h3><b></b></h3> <p> 線上花甲獨(dú)創(chuàng)《線上四部曲》并輔以精品蔬菜，營(yíng)養(yǎng)搭配 ，既滿(mǎn)足不同顧客口味需求，又能體驗(yàn)美食的樂(lè)趣！ </p> </figcaption> <figure><img src="picture/tu3.png" alt="" /></figure> </a> </div> <div class="div3" data-scroll-reveal="enter right over 1s and move 50px"> <a href=""> <figure><img src="picture/tu2.png" alt="" /></figure> <figcaption> <h2>精致體驗(yàn)</h2> <h3><b></b></h3> <p> 線上花甲的創(chuàng)新腳步從未停止，全新2代品牌形象升級(jí)，門(mén)店利用現(xiàn)代 空間美學(xué)與潮流元素相融合，營(yíng)造出一個(gè)更受年輕人青睞、簡(jiǎn)約、時(shí) 尚的用餐氛圍?！? </p> </figcaption> </a> </div> </div> </div> <div class="section5"> <div class="w1280"> <div class="white-bg" data-scroll-reveal="enter bottom over 1s and move 50px,wait 0.6s"></div> <div class="s5-text " data-scroll-reveal="enter bottom over 1s and move 50px,wait 1.6s"> <h2><img src="picture/tit.png" alt="" /></h2> <p> 每一道美食的背后，總會(huì)有一段鮮為人知的小故事，線上花甲的誕生 也不例外。多年前，他和她在浙江美麗的xxx結(jié) 識(shí)，她總是熱衷于 各種各樣的海鮮美食，尤其是花甲，為了心愛(ài)的 她，他從岳母那里學(xué) 會(huì)正宗的辣炒蛤蜊和各種海鮮做法，岳母告訴他： <b>“花甲代表一生的 愛(ài)情，是一個(gè)甲子的承諾”！</b> </p> <p class="p2"> 和許多年輕男女一樣，他們相識(shí)、相知、相戀，最終結(jié)合并且成 了家。為了紀(jì)念那份帶著大海味道的愛(ài)情，也為了傳遞彼此給予 的愛(ài)情承諾，他們?cè)诔錆M(mǎn)機(jī)遇的都市里尋求著發(fā)展。這樣，象征著 火熱長(zhǎng)久的“線上花甲”就誕生了。 </p> </div> </div> </div> idth="340" height="460" alt="" src="picture/tu4.png" /> <div class="text"> <div class="title">錫紙花甲米線1</div> <div class="name"> 招牌經(jīng)典風(fēng)味，傳承配方，海鮮烹制； <br/>鮮香濃郁，麻辣適度，回味綿長(zhǎng)，<br/>讓食嚼者拍手稱(chēng)快！ </div> </div> </a> </li> <li class="panel" id="panel2_2"> <a href="#" class="inside"> <img width="340" height="460" alt="" src="picture/tu4.png" /> <div class="text"> <div class="title">錫紙花甲米線1</div> <div class="name"> 招牌經(jīng)典風(fēng)味，傳承配方，海鮮烹制； <br/>鮮香濃郁，麻辣適度，回味綿長(zhǎng)，<br/>讓食嚼者拍手稱(chēng)快！ </div> </div> </a> </li> <li class="panel" id="panel3_3"> <a href="#" class="inside"> <img width="340" height="460" alt="" src="picture/tu4.png" /> <div class="text"> <div class="title">錫紙花甲米線1</div> <div class="name"> 招牌經(jīng)典風(fēng)味，傳承配方，海鮮烹制； <br/>鮮香濃郁，麻辣適度，回味綿長(zhǎng)，<br/>讓食嚼者拍手稱(chēng)快！ </div> </div> </a> </li> <li class="panel current" id="panel4_4"> <a href="#" class="inside"> <img width="340" height="460" alt="" src="picture/tu4.png" /> <div class="text"> <div class="title">錫紙花甲米線1</div> <div class="name"> 招牌經(jīng)典風(fēng)味，傳承配方，海鮮烹制； <br/>鮮香濃郁，麻辣適度，回味綿長(zhǎng)，<br/>讓食嚼者拍手稱(chēng)快！ </div> </div> </a> </li> <li class="panel" id="panel2_5"> <a href="#" class="inside"> <img width="340" height="460" alt="" src="picture/tu4.png" /> <div class="text"> <div class="title">錫紙花甲米線1</div> <div class="name"> 招牌經(jīng)典風(fēng)味，傳承配方，海鮮烹制； <br/>鮮香濃郁，麻辣適度，回味綿長(zhǎng)，<br/>讓食嚼者拍手稱(chēng)快！ </div> </div> </a> </li> <li class="panel" id="panel2_6"> <a href="#" class="inside"> <img width="340" height="460" alt="" src="picture/tu4.png" /> <div class="text"> <div class="title">錫紙花甲米線1</div> <div class="name"> 招牌經(jīng)典風(fēng)味，傳承配方，海鮮烹制； <br/>鮮香濃郁，麻辣適度，回味綿長(zhǎng)，<br/>讓食嚼者拍手稱(chēng)快！ </div> </div> </a> </li> <li class="panel" id="panel2_7"> <a href="#" class="inside"> <img width="340" height="460" alt="" src="picture/tu4.png" /> <div class="text"> <div class="title">錫紙花甲米線1</div> <div class="name"> 招牌經(jīng)典風(fēng)味，傳承配方，海鮮烹制； <br/>鮮香濃郁，麻辣適度，回味綿長(zhǎng)，<br/>讓食嚼者拍手稱(chēng)快！ </div> </div> </a> </li> </ul> </div> <a href="javascript:void(0);" class="next btn"><img src="picture/next.png" alt="" /></a> </div> </div> <!--<div class="tab-pal "> <div class="btnMode" id="slider"> <a href="javascript:void(0);" class="prev btn"><img src="picture/prev.png" alt="" /></a> <div class="scroll"> <ul class="scrollContainer"> <li class="panel" id="panel_1"> <a href="#" class="inside"> <img width="340" height="460" alt="" src="picture/tu4.png" /> <div class="text"> <div class="title">錫紙花甲米線1</div> <div class="name"> 招牌經(jīng)典風(fēng)味，傳承配方，海鮮烹制； <br/>鮮香濃郁，麻辣適度，回味綿長(zhǎng)，<br/>讓食嚼者拍手稱(chēng)快！ </div> </div> </a> </li> <li class="panel" id="panel_2"> <a href="#" class="inside"> <img width="340" height="460" alt="" src="picture/tu4.png" /> <div class="text"> <div class="title">錫紙花甲米線1</div> <div class="name"> 招牌經(jīng)典風(fēng)味，傳承配方，海鮮烹制； <br/>鮮香濃郁，麻辣適度，回味綿長(zhǎng)，<br/>讓食嚼者拍手稱(chēng)快！ </div> </div> </a> </li> <li class="panel" id="panel_3"> <a href="#" class="inside"> <img width="340" height="460" alt="" src="picture/tu4.png" /> <div class="text"> <div class="title">錫紙花甲米線1</div> <div class="name"> 招牌經(jīng)典風(fēng)味，傳承配方，海鮮烹制； <br/>鮮香濃郁，麻辣適度，回味綿長(zhǎng)，<br/>讓食嚼者拍手稱(chēng)快！ </div> </div> </a> </li> <li class="panel current" id="panel_4"> <a href="#" class="inside"> <img width="340" height="460" alt="" src="picture/tu4.png" /> <div class="text"> <div class="title">錫紙花甲米線1</div> <div class="name"> 招牌經(jīng)典風(fēng)味，傳承配方，海鮮烹制； <br/>鮮香濃郁，麻辣適度，回味綿長(zhǎng)，<br/>讓食嚼者拍手稱(chēng)快！ </div> </div> </a> </li> <li class="panel" id="panel_5"> <a href="#" class="inside"> <img width="340" height="460" alt="" src="picture/tu4.png" /> <div class="text"> <div class="title">錫紙花甲米線1</div> <div class="name"> 招牌經(jīng)典風(fēng)味，傳承配方，海鮮烹制； <br/>鮮香濃郁，麻辣適度，回味綿長(zhǎng)，<br/>讓食嚼者拍手稱(chēng)快！ </div> </div> </a> </li> <li class="panel" id="panel_6"> <a href="#" class="inside"> <img width="340" height="460" alt="" src="picture/tu4.png" /> <div class="text"> <div class="title">錫紙花甲米線1</div> <div class="name"> <div class="right fr" data-scroll-reveal="enter right over 1s and move 50px"> <div class="search-box"> <input type="text" value="全國(guó)門(mén)店查詢(xún)" class="fl input" /> <input type="submit" value="" class="sub fl" /> </div> <h1 class="tit2"><span><i></i></span>全國(guó)</h1> <div class="scroll_main"> <div class="scroll_wrap"> <div class="scroll_cont"> <h2>浙浙江州市</h2> <p> xxx廣場(chǎng)店 <Br/> 地址：xxxxxx廣場(chǎng)庭院深深208號(hào) </p> <p> xxx廣場(chǎng)店 <Br/> 地址：xxxxxx廣場(chǎng)庭院深深208號(hào) </p> <p> xxx廣場(chǎng)店 <Br/> 地址：xxxxxx廣場(chǎng)庭院深深208號(hào) </p> <p> xxx廣場(chǎng)店 <Br/> 地址：xxxxxx廣場(chǎng)庭院深深208號(hào) </p> <p> xxx廣場(chǎng)店 <Br/> 地址：xxxxxx廣場(chǎng)庭院深深208號(hào) </p> <p> xxx廣場(chǎng)店 <Br/> 地址：xxxxxx廣場(chǎng)庭院深深208號(hào) </p> <p> xxx廣場(chǎng)店 <Br/> 地址：xxxxxx廣場(chǎng)庭院深深208號(hào) </p> </div> <div class="scroll_bar"> <div class="scroll_slider"></div> </div> </div> </div> </div> </div> </div> <div class="section11" data-scroll-reveal="enter bottom and move 50px over 1.33s"> <div class="w1280"> <div class="title"> <h2>未來(lái)正在發(fā)生</h2> <p>在過(guò)去三年里，平均每48小時(shí)就有一家線上花甲新店開(kāi)業(yè)。<br/> 你可能是下一個(gè)，也可能是我們未來(lái)的顧客。 <br/> 但今天，別留下遺憾。 </p> </div> <div class="clearfix"> <div class="div1 fl"> <img src="picture/jm.png" alt="" /> </div> <div class="div2 clearfix fl "> <div class="fl fl1"> <div> <span>姓名：</span> <input type="text" class="input" value="您的姓名" /> </div> <div> <span>手機(jī)：</span> <input type="text" class="input" value="您的手機(jī)號(hào)碼" /> </div> <div> <span>城市：</span> <input type="text" class="input" value="加盟省市地區(qū)" /> </div> <div> <input type="submit" class="sub" value="提 交" /> </div> </div> <div class="fr clearfix fr1"> <div class="clearfix"> <span class="fl">留言：</span> <div class="fl"> <textarea name="" rows="" cols=""></textarea> <p>* 請(qǐng)認(rèn)真填寫(xiě)信息，我們招商經(jīng)理會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系!</p> </div> </div> </div> </div> </div> </div> </div> <div class="footer" data-scroll-reveal="enter bottom over 1s and move 50px"> <div class="w1280"> <div class="fl div1"> <a href="" class="logo"><img src="picture/logo-d.png" /></a> <div> 投資有風(fēng)險(xiǎn)<br/> 選擇需謹(jǐn)慎 </div> </div> <div class="fl"> <p> <a href="">關(guān)于我們</a> <a href="">產(chǎn)品展示</a> <a href="">新聞中心</a> <a href="">門(mén)店分布</a> <a href="">招商加盟</a> <a href="">聯(lián)系我們</a> </p> <div class="info"> <h3>全國(guó)免費(fèi)加盟熱線</h3> <h2><img src="picture/n1.png" alt="" /></h2> <p>版權(quán)所有xxx<br/>Copyright 2018-2030 All rights reserved </p> </div> </div> <div class="code"> <div class="code1"> <a href="javascript:void(0)" class="wx1">線上花甲官方微信<i></i> <img src="picture/code.png" alt="" /> </a> </div> <div class="code2"> <a href="javascript:void(0)" class="wx1">路可餐飲官方微信<i></i> <img src="picture/code.png" alt="" /> </a> </div> </div> </div> </div> <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script> <script src="js/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="js/raphael-min.js"></script> <script type="text/javascript" src="js/chinamapconfig.js"></script> <script type="text/javascript" src="js/map-min.js"></script> <script src="js/jquery.superslide.2.1.1.js"></script> <script src="js/plugin.js"></script> <script src="js/index.js"></script> <script type="text/javascript" src="js/more.js"></script> <script src="js/scrollbar.js"></script> <script src="js/scrollreveal.js"></script> <script src="js/jq22.js"></script> <script src="js/jq202.js"></script> <script type="text/javascript"> $(function(){ $('#ChinaMap').SVGMap({ mapWidth: 600, mapHeight: 606, strokeWidth: 1, //各省邊界線寬度 strokeColor: 'eee', //各省邊界線顏色 默認(rèn) ：F9FCFE strokeHoverColor: '000', //各省hover邊界線顏色 默認(rèn) ：d9d9d9 stateInitColor: 'fff', //統(tǒng)一各省展示顏色 默認(rèn) ：不統(tǒng)一按chinaMapConfig.js里面設(shè)置的顏色展示 stateHoverColor: '00a862', //各省hover展示顏色 默認(rèn) : ffffff stateDisabledColor: '333', //各省禁用展示顏色 默認(rèn) : eeeeee showTip: true, //是否顯示提示 默認(rèn)顯示 tipWidth: 60, //展示內(nèi)容（白色區(qū)域）寬度（單位：px） tipHeight: 50, //展示內(nèi)容（白色區(qū)域）高度（單位：px） tipOuterH :0, //展示內(nèi)容在上下的連接（透明灰色區(qū)域）高度（單位：px） 這個(gè)展示的方向也可以單獨(dú)配置在chinaMapConfig.js的chinaMapConfig['names']['direction']中設(shè)置 tipOuterW : 0 //展示內(nèi)容在左右的連接（透明灰色區(qū)域）寬度（單位：px） }); }); </script> <script type="text/javascript"> new CusScrollBar({ contentSelector: '.scroll_cont', //滾動(dòng)內(nèi)容區(qū) barSelector: '.scroll_bar', //滾動(dòng)條 sliderSelector: '.scroll_slider' //滾動(dòng)滑塊 }); </script> <script> (function() { window.scrollReveal = new scrollReveal({ reset: true, move: '50px' }); })(); </script> </body></html>@charset "utf-8";html{ overflow-x: hidden !important;}body,html{ max-width: 1920px; margin: auto;}*{ margin:0; padding:0;}body,p,h1,h2,h3,h4,h5,table,ul,li,form,input{ margin:0; padding:0; color:#000; font-family:"Microsoft yahei"; }body{background: #F5F5F5;}body,p{ font-size:14px; border:none; }a{ font-size:14px; color:#999; text-decoration:none; border:none; padding:0; margin:0;}table{border-collapse:collapse;}img{ border:0; margin:0; padding:0;}ul,li{ list-style:none; border:0; margin:0; padding:0;}dl,dt,dd{ margin:0; padding:0; -webkit-margin-start:0;}h1,h2,h3,h4,h5{ font-weight:normal; font-size:12px; display:block;}strong,b{ font-weight:normal;}table,tr,td{ border-spacing:0;}em,i,b{ font-style:normal;}p{ line-height: 170%; color: #555; }input{ border: none; background: none; }figcaption{ display: block;}input:focus{ outline: none; }::-webkit-input-placeholder { /* WebKit browsers */ font-size:14px; color: #dfdfdf; } ::-ms-input-placeholder { /* Internet Explorer 10+ */ font-size:14px;color: #dfdfdf; } .fl{float:left;}.fr{float:right;}.clearfix{*zoom:1;} .clearfix:before,.clearfix:after{display:table; line-height:0; content:"";}.clearfix:after{clear:both;}.w1280{ width: 1280px; margin: 0 auto; }.f5{ background: #F5F5F5; }.mt30{ margin-top: 30px;}.pt30{ padding-top: 30px;}.p30{ padding:30px 0;}.mt45{ margin-top: 45px;}.mt50{ margin-top: 50px;}.pt50{ padding-top: 50px;}.top{background: rgba(255,255,255,0.8); position: fixed; top: 0; width: 100%; z-index: 99999; height: 130px; ; transition: all 1.5s ease; }.top .logo{ display: block; margin-top: 30px;}.navbar{ margin-right: -28px; }.navbar li{ float: left; margin-top:20px; }.navbar li a{ font-size: 16px; color: #000; margin: 0 28px; display: block; position: relative; transition: all 0.7s; }.navbar li a b{ content: ''; display: block; position: absolute; transition: all 0.7s; height: 4px; bottom: -25px; width:56px; transform: scale(0,1); left: 50%; margin-left: -28px; }.navbar li:hover a b{ background: #00a862; transform: scale(1);} .navbar li:hover a{ color: #00a862;}.top .tel{ margin-top: 35px;}.top .tel img{ display: inline-block; vertical-align: middle; margin-left: 5px;}.top.on{ animation-name:down; animation-duration: 1s; animation-fill-mode: both;}請(qǐng) “ 點(diǎn)贊” “??評(píng)論” “ 收藏”一鍵三連哦！ 【 關(guān)注我| 獲取更多源碼 | 優(yōu)質(zhì)文章】帶您學(xué)習(xí)各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板 、大學(xué)生畢業(yè)HTML模板 、期末大作業(yè)模板 、等! 「在這里有好多 前端 開(kāi)發(fā)者，一起探討 前端 Node 知識(shí)，互相學(xué)習(xí)」！關(guān)鍵詞：作業(yè)
客戶(hù)&案例
營(yíng)銷(xiāo)資訊
關(guān)于我們
客戶(hù)&案例
營(yíng)銷(xiāo)資訊
關(guān)于我們
微信公眾號(hào)
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
