Web前端開發(fā)技術(shù) 描述 網(wǎng)頁設(shè)計(jì)題材,DIV+CSS 布局制作,HTML+CSS網(wǎng)頁設(shè)計(jì)期末課程大作業(yè) | 精彩專欄推薦 美食網(wǎng)頁介紹 | 甜品蛋糕 |" />

国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 在線咨詢 在線咨詢
15158846557 在線咨詢
所在位置: 首頁 > 營銷資訊 > 網(wǎng)站運(yùn)營 > HTML+CSS美食靜態(tài)網(wǎng)頁設(shè)計(jì)——美食餐廳8頁(頁面好看)

HTML+CSS美食靜態(tài)網(wǎng)頁設(shè)計(jì)——美食餐廳8頁(頁面好看)

時(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)頁
  1. HTML:結(jié)構(gòu)
  2. CSS:樣式 在操作方面上運(yùn)用了html5和css3, 采用了div+css結(jié)構(gòu)、表單、超鏈接、浮動(dòng)、絕對(duì)定位、相對(duì)定位、字體樣式、引用視頻等基礎(chǔ)知識(shí)
  3. JavaScript:做與用戶的交互行為
@TOC


前端學(xué)習(xí)路線

(1)html文件:其中index.html是首頁、其他html為二級(jí)頁面; (2)css文件:css全部頁面樣式,文字滾動(dòng), 圖片放大等; (3)js文件:js實(shí)現(xiàn)動(dòng)態(tài)輪播特效, 表單提交, 點(diǎn)擊事件等等(網(wǎng)頁中運(yùn)用到j(luò)s代碼)

網(wǎng)頁基本結(jié)構(gòu)

(1)首頁:進(jìn)入網(wǎng)頁中看到的第一個(gè)頁面(LOGO、公司名稱、導(dǎo)航、banner、新聞、相關(guān)信息、底部信息、banner一般是5個(gè)   (2)二級(jí)頁面:從首頁點(diǎn)擊進(jìn)入之后的頁面叫做二級(jí)頁面 (3)三級(jí)頁面:從二級(jí)頁面點(diǎn)擊進(jìn)入的頁面

網(wǎng)頁html:網(wǎng)頁是構(gòu)成網(wǎng)站的基本元素,是承載各種網(wǎng)站應(yīng)用的平臺(tái)。通俗地說,網(wǎng)站就是由網(wǎng)頁組成的 首頁網(wǎng)站:首頁是一個(gè)網(wǎng)站的入口網(wǎng)頁,故往往會(huì)被編輯得易于了解該網(wǎng)站多數(shù)作為首頁的文件名是index加上擴(kuò)展名 導(dǎo)航菜單:是指位于頁面頂部或者側(cè)邊區(qū)域的,也稱之為導(dǎo)航欄,它起著鏈接站點(diǎn)或者軟件內(nèi)的各個(gè)頁面的作用. 網(wǎng)頁頁腳:是網(wǎng)頁中每個(gè)頁面的底部的區(qū)域。常用于顯示附加信息。如作者、備案號(hào)等。


網(wǎng)頁演示




在這里插入圖片描述
在這里插入圖片描述
在這里插入圖片描述
在這里插入圖片描述
在這里插入圖片描述
在這里插入圖片描述
在這里插入圖片描述



HTML結(jié)構(gòu)代碼

<!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">查看更多&gt;&gt;</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="">查看更多&gt;&gt;</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="">查看更多&gt;&gt;</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="">查看更多&gt;&gt;</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>

學(xué)的反而越迷茫

有這種感覺很正常,因?yàn)槟氵€沒有真正去公司里面待過,也不清楚自己到底要學(xué)多少東西才能勝任公司里面給你分配的活。我從你的表述來看,你的基礎(chǔ)應(yīng)該還是很扎實(shí)的。跟著網(wǎng)上那種全套的視頻教程學(xué)肯定沒有問題。

當(dāng)你以后真正進(jìn)入公司,發(fā)現(xiàn)工作的難度和量大約只有你學(xué)習(xí)時(shí)期的大約20%,你可能就會(huì)發(fā)出一聲嘆息:原來工作也不過如此嘛。

這是很正常的,因?yàn)榇蟛糠止臼钦心氵M(jìn)去去干活的,寫業(yè)務(wù)的,不是讓你一個(gè)新人去研發(fā)公司架構(gòu)的。都是現(xiàn)成的東西,你要做的就是在別人的教導(dǎo)下,手把手的指揮下去添磚加瓦。到時(shí)候你恐怕要驚呼:就這?

所以,放松心態(tài)吧,好好享受大學(xué)時(shí)光 —————————————————


學(xué)習(xí)更多

關(guān)注我 | 點(diǎn)贊博文 | 每天帶你漲知識(shí)





在這里插入圖片描述


關(guān)鍵詞:餐廳,靜態(tài),設(shè)計(jì)

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果,本站不支持IE9及以下版本的瀏覽器,建議您使用谷歌Chrome瀏覽器。 點(diǎn)擊下載Chrome瀏覽器
關(guān)閉