時(shí)間:2023-10-14 17:12:02 | 來源:網(wǎng)站運(yùn)營
時(shí)間:2023-10-14 17:12:02 來源:網(wǎng)站運(yùn)營
HTML+CSS美食靜態(tài)網(wǎng)頁設(shè)計(jì)——美食餐廳8頁(頁面好看):?> ? 源碼獲取 文末聯(lián)系 ?Web前端開發(fā)技術(shù) 描述 網(wǎng)頁設(shè)計(jì)題材,DIV+CSS 布局制作,HTML+CSS網(wǎng)頁設(shè)計(jì)期末課程大作業(yè) | 精彩專欄推薦 美食網(wǎng)頁介紹 | 甜品蛋糕 | 地方美食小吃文化 | 餐飲文化 | 等網(wǎng)站的設(shè)計(jì)與制作 | 美食主題網(wǎng)站 | HTML期末大學(xué)生網(wǎng)頁設(shè)計(jì)作業(yè),Web大學(xué)生網(wǎng)頁
<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="UTF-8"> <title></title> <meta name="keyword" content=""> <meta name="description" content=""> <meta name="author" content=""> <link rel="stylesheet" href="css/common.css"> <link rel="stylesheet" href="css/style.css"> <script src="js/jquery.min.1.11.3.js"></script> <script src="js/SuperSlide.2.1.1.js"></script> <script src="js/js.js"></script> <link type="text/css" rel="stylesheet" href="css/skitter.styles.css"> <link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css"> <script type="text/javascript" src="js/jquery-1.6.4.js"></script> <script type="text/javascript" src="js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="js/jquery.skitter.min.js"></script> <script type="text/javascript" src="js/jquery.haiwon.js"></script> <script type="text/javascript" src="js/css.js"></script> <script type="text/javascript" src="js/js.js"></script><!--[if lt IE 9]><script src="js/html5.js"></script><![endif]--><!--[if IE 6]><script src="js/png.js"></script><script><![endif]--></head><body> <header class="index_header"> <div class="style"> <ul class="index_logo"> <li><a href="about.html">關(guān)于我們</a></li> <li><a href="fendian.html">門店分布</a></li> <li><a href="injon.html">招商加盟</a></li> <div><a href=""><img src="picture/index_03.png" alt="" title="首頁"></a></div> <li><a href="">在線商城</a></li> <li><a href="zp.html">人才招聘</a></li> <li><a href="contact.html">聯(lián)系我們</a></li> </ul> </div> </header> <nav class="index_nav"> <div style="width:100%; overflow:hidden; height:633px; position:relative; z-index:0; "> <div style=" width:1920px; height:633px; position:relative; left:50%; "> <div style="position:relative;width:1920px;height:633px; z-index:1; left:-50%;"> <div class="banner box_skitter skitter-default" style="height:633px"> <ul style="display: none;"> <li><a target="_blank" href=""><img src="picture/banner02.jpg"></a></li> <li><a target="_blank" href=""><img src="picture/banner02.jpg"></a></li> <li><a target="_blank" href=""><img src="picture/banner02.jpg"></a></li> <li><a target="_blank" href=""><img src="picture/banner02.jpg"></a></li> </ul> <span class="info_slide_dots" style="left: 926px;"> <span class="image_number" rel="0" id="image_n_1_0"></span> <span class="image_number" rel="1" id="image_n_2_0"></span> <span class="image_number" rel="2" id="image_n_3_0"></span> <span class="image_number image_number_select" rel="3" id="image_n_4_0"></span> </span> </div> </div> </div> </div> </nav> <style type="text/css"> .poster-main{ position: absolute; top:220px; margin-left: 100px; } .poster-main .poster-list .poster-item{ border-radius: 50%; overflow: hidden; position: absolute; left: 0; top: 0; } .poster-main .poster-list .poster-item a img{ border-radius: 50%; border:8px solid #fff; } .poster-main .poster-btn{ position: absolute; top: 0; cursor: pointer; } .poster-main .poster-prev-btn{ left: -220px; background: url("picture/btn_l.png") no-repeat center center; } .poster-main .poster-next-btn{ right: -220px; background: url("picture/btn_r.png") no-repeat center center; } </style> <div class="index_style1"> <div class="style" style="position:relative"> <div class="poster-main" id="carousel" data-setting='{ "width":1000, "height":300, "posterWidth":300, "posterHeight":300, "scale":0.8, "speed":1000, "autoPlay":true, "delay":3000, "verticalAlign":"middle" }'> <div class="poster-btn poster-prev-btn"></div> <ul class="poster-list"> <li class="poster-item"><a href="#"><img src="picture/01.jpeg" alt="" width="100%"></a></li> <li class="poster-item"><a href="#"><img src="picture/01.jpeg" alt="" width="100%"></a></li> <li class="poster-item"><a href="#"><img src="picture/01.jpeg" alt="" width="100%"></a></li> <li class="poster-item"><a href="#"><img src="picture/01.jpeg" alt="" width="100%"></a></li> <li class="poster-item"><a href="#"><img src="picture/01.jpeg" alt="" width="100%"></a></li> </ul> <div class="poster-btn poster-next-btn"></div> </div> <div class="instyle1_s"><a href="">在線購買</a></div> </div> <script src="js/Carousel.js"></script> <script type="text/javascript"> $(function(){ Carousel.init($("#carousel")); $("#carousel").init(); }); </script> </div> <div class="index_style2"> <div class="style" style="position:relative"> <a href="" class="index_s2_a1"><img src="picture/index1_07.png" alt=""></a> <div class="index_s2_c">公司的組織形式。以營利為目的的社團(tuán)法人。在資本主義社會(huì)獲得高度發(fā)展。我國在建國后對(duì)私營公司進(jìn)行了社會(huì)主義改造。國營工、商、建筑、運(yùn)輸?shù)炔块T中實(shí)行獨(dú)立經(jīng)濟(jì)核算的經(jīng)營管理組織和某些城市中按行業(yè)劃分的專業(yè)管理機(jī)構(gòu),也通稱公司。近年來隨著我國經(jīng)濟(jì)體制的改革,享有法人資格的各種公司紛紛設(shè)立,按章程從事自身的生產(chǎn)經(jīng)營活動(dòng)。 實(shí)行獨(dú)立經(jīng)濟(jì)核算的經(jīng)營管理組織和某些城市中按行業(yè)劃分的專業(yè)管理機(jī)構(gòu),按章程從事自身的生產(chǎn)經(jīng)營活動(dòng)。<a href="" class="index_s2_ca">查看更多>></a> </div> </div> </div> <div class="index_style3"> <div class="style" style="position:relative"> <div class="index_style3_t"><img src="picture/index1_11.png" alt=""></div> <ul class="index_s3_c"> <li> <dl class="ins3_dl"> <dt><a href="injon_show.html"><img src="picture/index1_15.png" alt=""></a></dt> <dd class="ins3_dl_dd1">鹵魚有約</dd> <dd class="ins3_dl_dd2">上市公司大手筆現(xiàn)金理財(cái) 漫步者理財(cái)金額超全年?duì)I收資產(chǎn)荒,資產(chǎn)慌,慌的不只是投資者,很多上市公司手頭空有閑錢,卻也沒有特別好的投向。</dd> <dd class="ins3_dl_dd3"><a href="">查看更多>></a></dd> </dl> </li> <li> <dl class="ins3_dl"> <dt><a href="injon_show.html"><img src="picture/index1_17.png" alt=""></a></dt> <dd class="ins3_dl_dd1">鹵魚有約</dd> <dd class="ins3_dl_dd2">上市公司大手筆現(xiàn)金理財(cái) 漫步者理財(cái)金額超全年?duì)I收資產(chǎn)荒,資產(chǎn)慌,慌的不只是投資者,很多上市公司手頭空有閑錢,卻也沒有特別好的投向。</dd> <dd class="ins3_dl_dd3"><a href="">查看更多>></a></dd> </dl> </li> <li> <dl class="ins3_dl"> <dt><a href="injon_show.html"><img src="picture/index1_20.png" alt=""></a></dt> <dd class="ins3_dl_dd1">鹵魚有約</dd> <dd class="ins3_dl_dd2">上市公司大手筆現(xiàn)金理財(cái) 漫步者理財(cái)金額超全年?duì)I收資產(chǎn)荒,資產(chǎn)慌,慌的不只是投資者,很多上市公司手頭空有閑錢,卻也沒有特別好的投向。</dd> <dd class="ins3_dl_dd3"><a href="">查看更多>></a></dd> </dl> </li> </ul> </div> </div> <div class="index_style4"> <div class="style" style="position:relative"> <dl class="ins_dl1"> <dt><a href="fendian.html"><img src="picture/index1_26.png" alt=""></a></dt> <dd><a href="">浙江一店</a></dd> </dl> <dl class="ins_dl1"> <dt><a href="fendian.html"><img src="picture/index1_26.png" alt=""></a></dt> <dd><a href="">浙江二店</a></dd> </dl> <dl class="ins_dl1"> <dt><a href="fendian.html"><img src="picture/index1_26.png" alt=""></a></dt> <dd><a href="">浙江三店</a></dd> </dl> <dl class="ins_dl1"> <dt><a href="fendian.html"><img src="picture/index1_26.png" alt=""></a></dt> <dd><a href="">浙江三店</a></dd> </dl> </div> </div> <div class="index_style5"> <div class="style"> <dl class="inst5_left"> <dt><a href="">聯(lián)系我們</a></dt> <dd> 公司名稱:XXXXXXXXXXXXX<br> 聯(lián) 系 人:XXXXXX<br> 聯(lián)系電話:XXXXX<br> 聯(lián)系 Q Q:XXXXX<br> 公司網(wǎng)址:XXXXX<br> 公司電話:XXXXX<br> 公司郵箱:XXXXX<br> 公司地址:XXXXXXXXXXXXXXXXXXXXX </dd> </dl> <div class="inst5_right"> <form action="" onsubmit="return check()"> <ul class="inst5_right_ul"> <li><span>姓名:</span><input type="text" id="in_username" name="name"></li> <li><span>電話:</span><input type="text" id="in_tel"></li> <li><span>郵箱:</span><input type="text" id="in_email"></li> <li style="height:100px"><span>留言:</span><textarea name="" id="in_message"> </textarea></li> </ul> <div class="inst5_right_d"><input type="submit"></div> </form> </div> </div> </div> <footer class="index_footer"> <div class="style index_fc"> <div class="index_fc1"> 友情鏈接 </div> <div class="index_fc2"> <ul> <li><a href="">新華網(wǎng)浙江頻道</a></li> <li>|</li> <li><a href="">長江網(wǎng)</a></li> <li>|</li> <li><a href="">杭州房產(chǎn)網(wǎng)</a></li> <li>|</li> <li><a href="">杭州家裝</a></li> <li>|</li> <li><a href="">房地產(chǎn)英才網(wǎng)</a></li> <li>|</li> <li><a href="">杭州圈圈網(wǎng)</a></li> <li>|</li> <li><a href="">長江網(wǎng)</a></li> <li>|</li> <li><a href="">杭州房產(chǎn)網(wǎng)</a></li> <li>|</li> <li><a href="">杭州家裝</a></li> <li>|</li> <li><a href="">杭州房產(chǎn)網(wǎng)</a></li> <li>|</li> <li><a href="">杭州家裝</a></li> <li>|</li> <li><a href="">房地產(chǎn)英才網(wǎng)</a></li> <li>|</li> <li><a href="">房地產(chǎn)英才網(wǎng)</a></li> <div class="clear"></div> </ul> <div>XXXXXXXXXXXXX @copy;版權(quán)所有</div> </div> <div class="index_fc3"> <img src="picture/index1_30.png" alt=""> <span>掃一掃關(guān)注</span> </div> </div> </footer><style>.copyrights{text-indent:-9999px;height:0;line-height:0;font-size:0;overflow:hidden;}</style></body></html><script> function check() { var name = $("#in_username").val(); var tel = $("#in_tel").val(); var email = $("#in_email").val(); var message = $("#in_message").text(); if(name == "") { alert("姓名不能為空"); return false; } if(tel == "") { alert("電話不能為空"); return false; } if(email == "") { alert("Email值不能為空"); return false; } if(email.indexOf("@") == -1 || email.indexOf(".") == -1) { alert("郵箱格式不正確,必須包含@和."); return false; } if(message == "") { alert("留言不能為空"); return false; } } </script>
關(guān)鍵詞:餐廳,靜態(tài),設(shè)計(jì)
客戶&案例
營銷資訊
關(guān)于我們
微信公眾號(hào)
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。