文章目錄📂
- 一、網站題目👨🎓
- 二、網站描述✍️
- 三、網站介紹📚
- 四、網站效果🌐
- 五、代碼實作 🪓
- HTML結構代碼🧱
- CSS樣式代碼💒
- 八、更多幹貨🎁
一、網站題目👨🎓
🥧 美食網頁介紹、🍰甜品蛋糕、🦐地方美食小吃文化、🍺餐飲文化、等網站的設計與制作。
二、網站描述✍️
🍧美食主題網站 主要對各種美食進行展示，讓浏覽者清晰地了解到各種美食的詳細資訊，便于浏覽者進行選擇。該子產品的左側有個美食分類，使用者可以選擇自己喜歡的種類，當點選種類後，就會在右側出現該分類下的各種美食，使用者可以點選自己感興趣的食品，進而看到它的具體資訊。它的具體資訊包括配料、産地及它的一些功能，使使用者對該食品有着全面的認識。
三、網站介紹📚
📔網站布局方面：計劃采用目前主流的、能相容各大主流浏覽器、顯示效果穩定的浮動網頁布局結構。
📓網站程式方面：計劃采用最新的網頁程式設計語言HTML5+CSS3+JS程式語言完成網站的功能設計。并確定網站代碼相容目前市面上所有的主流浏覽器，已達到打開後就能即時看到網站的效果。
📘網站素材方面：計劃收集各大平台好看的圖檔素材，并精挑細選适合網頁風格的圖檔，然後使用PS做出适合網頁尺寸的圖檔。
📒網站檔案方面：網站系統檔案種類包含：html網頁結構檔案、css網頁樣式檔案、js網頁特效檔案、images網頁圖檔檔案；
📙網頁編輯方面：網頁作品代碼簡單，可使用任意HTML編輯軟體（如：
Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++
等任意html編輯軟體進行運作及修改編輯等操作）。
其中：
（1）📜html檔案包含：其中index.html是首頁、其他html為二級頁面；
（2）📑 css檔案包含：css全部頁面樣式,文字滾動, 圖檔放大等；
（3）📄 js檔案包含：js實作動态輪播特效, 表單送出, 點選事件等等（個别網頁中運用到js代碼）。
四、網站效果🌐
五、代碼實作 🪓
HTML結構代碼🧱
<html>
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<title>關于我們-健康食品餐飲美食類網站(帶手機端)</title>
<link rel="stylesheet" type="text/css" href="style/common.css" />
<link rel="stylesheet" type="text/css" href="style/style.css" />
<link rel="stylesheet" type="text/css" href="style/subpage.css" />
<script type="text/javascript" src="js/js/jquery1.11.1.min.js"></script>
<script type="text/javascript" src="js/js/jquery.superslide.2.1.1.js"></script>
<script type="text/javascript" src="js/js/form.js"></script>
<script type="text/javascript" src="js/js/common.js"></script>
<style></style>
</head>
<body>
<div class="header theme_color">
<div class="main">
<div class="logo"><a href="index.htm" title="健康食品餐飲美食類網站(帶手機端)"><img src="images/logo.png" alt="健康食品餐飲美食類網站(帶手機端)" /></a></div>
<div class="tel">
<!-- <img src="images//skin/images/tel.png" /> -->
熱線電話<span> 13988999988</span></div>
</div>
</div>
<!--header end-->
<div class="clear"></div>
<!--g_nav-->
<div class="g_nav">
<div class="g_nav01">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="ihome"><a class="now" href="index.htm" title="首頁">首頁<br />
<!-- <span>Home</span> -->
<div></div>
</a></td>
<td><a href="index-1.html" title="關于我們">關于我們<br />
<div ></div>
</a>
<div class="nav_tan"> <a href="index-2.htm">發展曆史</a> </div>
</td>
<td><a href="index-3.htm" title="産品中心">産品中心<br />
<div ></div>
</a>
<div class="nav_tan"> <a href="index-4.htm">川 菜</a> <a href="index-5.htm">粵 菜</a> <a href="index-6.htm">鹵 菜</a> <a href="index-7.htm">淮揚菜</a> <a href="index-8.htm">閩 菜</a> </div>
</td>
<td><a href="index-9.htm" title="新聞資訊">新聞資訊<br />
<div ></div>
</a>
<div style="display:none"> </div>
</td>
<td><a href="index-10.htm" title="成功案例">成功案例<br />
<div ></div>
</a>
<div class="nav_tan"> <a href="index-4.htm">川 菜</a> <a href="index-11.htm">徽 菜</a> <a href="index-12.htm">湘 菜</a> <a href="index-13.htm">浙 菜</a> </div>
</td>
<td><a href="index-14.htm" title="行業資訊">行業資訊<br />
<div ></div>
</a>
<div style="display:none"> </div>
</td>
<td><a href="index-15.htm" title="資質榮譽">資質榮譽<br />
<div ></div>
</a>
<div style="display:none"> </div>
</td>
<td><a href="index-16.htm" title="線上留言">線上留言<br />
<div ></div>
</a>
<div style="display:none"> </div>
</td>
<td><a href="index-17.htm" title="聯系我們">聯系我們<br />
<div ></div>
</a>
<div style="display:none"> </div>
</td>
</div>
</tr>
</table>
</div>
</div>
<!--g_nav end-->
<div class="clear"></div>
<!-- 頭部 end -->
<!--banner-->
<div id="slideBox" class="slideBox">
<div class="bd">
<ul>
<li><a href_="" style=" background:url(images/1-1FP4152S30-L.jpg) no-repeat top center;"></a></li>
<li><a href_="" style=" background:url(images/1-1FP41524180-L.jpg) no-repeat top center;"></a></li>
<li><a href_="" style=" background:url(images/1-1FP41523420-L.jpg) no-repeat top center;"></a></li>
</ul>
</div>
<a class="prev" href="javascript:void(0)"></a> <a class="next" href="javascript:void(0)"></a> </div>
<script type="text/javascript">$(function() {
jQuery(".slideBox").slide({
mainCell: ".bd ul",
autoPlay: true
}); //banner
});</script>
<div class="clear"></div>
<!--banner end-->
<div class="notice">
<div class="main">
<div class="noticefl"><b>網站公告</b><span>歡迎光臨本公司網站！</span></div>
<div class="search01">
<form name="formsearch" action="http://demx233.dede58.com/plus/search.php">
<input type="hidden" name="kwtype" value="0" />
<input name="q" type="text" class="seatxt" placeholder="搜尋關鍵詞" value='' />
<input name="submit" type="submit" class="seabtn" value="" />
</form>
</div>
<script>$(function() {
$('.jslct dl dd').click(function() {
$(this).closest('form').attr('action', $(this).attr('val'));
});
})</script>
</div>
</div>
<div class="clear"></div>
<!-- banner -->
<!-- 圖示導航 -->
<div class="product sub_pro">
<!--left-->
<div class="product01">
<div class="product07">關于我們</div>
<!--left nav-->
<div class="sidenav">
<ul>
<li>
<a href="index-2.htm" title="發展曆史" class="sidenava">
<p>發展曆史</p>
</a>
</li>
</ul>
</div>
<div class="l_contact">
<div class="lcon_tel">13988999988</div>
<p class="lmap">廣東省廣州市番禺經濟開發區58号</p>
<p class="ltel">13988999988</p>
<p class="lfix">020-66889888</p>
<p class="lemail">570000</p>
</div>
</div>
<!--left end-->
<div class="product02">
<div class="content_com_title">
<h2>關于我們</h2>
<div class="bread"> 目前位置：<a href="index.htm">首頁</a> > <a href="index-1.html">關于我們</a> </div>
</div>
<div class="content">
<div class="view">
<h1 class="view-title">關于我們</h1>
<div class="bshare-custom view-share"><a title="更多平台" class="bshare-more bshare-more-icon more-style-addthis"></a><a title="分享到QQ空間" class="bshare-qzone"></a><a title="分享到新浪微網誌" class="bshare-sinaminiblog"></a><a title="分享到人人網" class="bshare-renren"></a><a title="分享到騰訊微網誌"
class="bshare-qqmb"></a><a title="分享到網易微網誌" class="bshare-neteasemb"></a></div>
<script type="text/javascript" charset="utf-8" src="buttonlite.js"></script>
<script type="text/javascript" charset="utf-8" src="bsharec0.js"></script>
對于美食，我們有着堅定的信念——我們普及健康食材，引導品質生活 方式：食物的美妙味感固然值得玩味，但隻有吃的健康，才算吃的美好。幫助人們吃的安全、健康、美好，是美天的社會責 任；我們傳承美食文化，傳遞美食正能量：美食是一種文化，需要傳承，渴望創新。向經典緻敬，向大師取經；讓傳統新 生，為創意開道，是美天的傳播使命；我們凝聚達人力量，成就美食夢想：每一個達人都有美食夢想，每一個有夢想的人都 可能成為明星。為愛美食的人圓夢，是美天的前行動力；我們搭建互動平台，創造美食社交新生活：選擇美食，就是選擇用
開放分享的态度擁抱生活。成為美食家們的分享沙龍，創造美食社交新生活，是美天的價值和驕傲。而所有這一切，都是為 了——“讓吃更美好！”
<p>
美天以使用者為榮，我們相信熱愛美食的每個人都有值得分享的東西，任 何一種美食技能都可以被學習；每一個創意都是創造者的驕傲，每一個有創意的人都可能成為明星。美天擁有數千萬條菜單 收藏記錄，上千萬條來自大衆的菜單點評，僅單品菜單都可以超過1171萬浏覽量和超過1萬的評論 參與。超過400萬美食家，與你共襄美食盛舉！</p>
<p>
自2004年成立以來，美食天下一直專注于家庭烹饪與飲食健康，并将為大衆提 供更優質的内容與服務!</p>
</div>
<div class="page"> <a href="index.htm" title="傳回首頁" class="back theme_color">傳回首頁</a> </div>
</div>
</div>
<div class="clear"></div>
</div>
<!-- 圖示導航 end-->
<!-- footer -->
<!--footer-->
<div class="clear"></div>
<div class="main">
<div class="footl">
<div class="footcode_t">
<font>Scan into the<br> mobile version </font><span>掃一掃進入手機版</span></div>
<div class="codeimg"><img src="images/erweima.png" width="138" height="138" /></div>
</div>
<div class="footshare">
<div class="footcode_t">
<font>Share </font><span>分享到：</span></div>
<div class="bdsharebuttonbox"><a href="#" class="bds_more" data-cmd="more"></a><a href="#" class="bds_tqq" data-cmd="tqq" title="分享到騰訊微網誌"></a><a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空間"></a><a href="#" class="bds_tqf" data-cmd="tqf" title="分享到騰訊朋友"></a>
<a
href="#" class="bds_kaixin001" data-cmd="kaixin001" title="分享到開心網"></a><a href="#" class="bds_douban" data-cmd="douban" title="分享到豆瓣網"></a><a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微網誌"></a><a href="#" class="bds_renren" data-cmd="renren" title="分享到人人網"></a><a href="#" class="bds_isohu"
data-cmd="isohu" title="分享到我的搜狐"></a></div>
<script>._bd_share_config = {
"common": {
"bdSnsKey": {},
"bdText": "",
"bdMini": "2",
"bdMiniList": false,
"bdPic": "",
"bdStyle": "0",
"bdSize": "32"
},
"share": {}
};
with(document) 0[(getElementsByTagName('head')[0] || body).appendChild(createElement('script')).src = 'http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion=' + ~(-new Date() / 36e5)];</script>
</div>
</div>
</div>
</div>
<div class="side_nav">
<ul>
<li class="sub_QR side_nav_3"> <a href="javascript:;"> <span style="display: none;"><img src="images/erweima.png" width="138" height="138" /></span> </a> </li>
<li class="back_top"> <a href="#" style="width: 60px; left: 0px;"> <span>傳回頂部</span> </a> </li>
</ul>
<div class="c"></div>
</div>
</body>
</html> CSS樣式代碼💒
.slideBox {
width: 100%;
height: 400px;
overflow: hidden;
position: relative;
}
.slideBox .hd {
height: 15px;
overflow: hidden;
position: absolute;
right: 5px;
bottom: 5px;
z-index: 1;
}
.slideBox .hd ul {
overflow: hidden;
zoom: 1;
float: left;
}
.slideBox .hd ul li {
float: left;
margin-right: 2px;
width: 15px;
height: 15px;
line-height: 14px;
text-align: center;
background: #fff;
cursor: pointer;
}
.slideBox .hd ul li.on {
background: #f00;
color: #fff;
}
.slideBox .bd {
position: relative;
height: 100%;
z-index: 0;
}
.slideBox .bd li {
zoom: 1;
vertical-align: middle;
}
.slideBox .bd li a {
display: block;
height: 400px;
}
.slideBox .bd img {
width: 450px;
height: 400px;
display: block;
} ![nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)