基于HTML的美食家网页设计 HTML+CSS+JavaScript简单的品牌红酒销售网页餐饮网页设计成品美食甜品网页制作模板大学生静态HTML网页源码

原创

IT司马青衫

发布于 2022-08-16 10:25:01

2.3K0

发布于 2022-08-16 10:25:01

👨‍🎓静态网站的编写主要是用HTML DIV+CSS JS等来完成页面的排版设计👩‍🎓,常用的网页设计软件有Dreamweaver、EditPlus、HBuilderX、VScode 、Webstorm、Animate等等，用的最多的还是DW，当然不同软件写出的前端Html5代码都是一致的，本网页适合修改成为各种类型的产品展示网页，比如美食、旅游、摄影、电影、音乐等等多种主题，希望对大家有所帮助。

🧡 【作者主页——🔥获取更多优质源码】

🧡 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】

一、网站题目👨‍🎓

🥧 美食网页介绍、🍰甜品蛋糕、🦐地方美食小吃文化、🍺餐饮文化、等网站的设计与制作。

<hr>

二、网站描述✍️

🍧美食主题网站主要对各种美食进行展示，让浏览者清晰地了解到各种美食的详细信息，便于浏览者进行选择。该模块的左侧有个美食分类，用户可以选择自己喜欢的种类，当点击种类后，就会在右侧出现该分类下的各种美食，用户可以点击自己感兴趣的食品，从而看到它的具体信息。它的具体信息包括配料、产地及它的一些功能，使用户对该食品有着全面的认识。

<hr>

三、网站介绍📚

📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

📓网站程序方面：计划采用最新的网页编程语言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代码）。

四、网站效果🌐

<hr>

五、代码实现 🪓

HTML结构代码🧱

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>首页</title>
<link href="css/index.css" rel="stylesheet" type="text/css" />
</head>

<body bgcolor="#F4F4F4">
<div id="login">
<h2>欢迎！</h2>
<div id="loginp"><a href="login.html">登录</a>|<a href="#">注册</a>|<a href="#">联系我们</a></div>
</div>
<div id="logoall">
<div id="logo">
    <div id="logo1">
    <a href="index.html">
    <img src="image/logo.png" width="200" height="100" />
    </a>
    </div>
    <div id="search">
    <input type="text" id="search_txt" placeholder="请输入" />
    <input type="submit" id="ss" value="搜索" />
    </div>
   <div id="logo2"><img src="image/logoright.png" width="100" height="25" /></div></div></div>
<div id="naviall">
<div id="navi">
    <ul>
         <li><div class="shouye"><a href="index.html">首页</a></div></li>
         <li><a href="About.html">关于</a></li>
         <li><a href="show.html">产品展示</a></li>
         <li><a href="#">服务</a></li>
         <li><a href="#">专题</a></li>
         <li><a href="#">看点</a></li>
    </ul>
</div>
</div>
<div class="wrap">
    	<div class="banner" style="background:#fbf8f3">
        	<div class="banner_img">
            	<img src="image/banner1.jpg" width="1200"  />
            </div>
        </div>
        <div class="banner" style="background:#f0f0f0">
        	<div class="banner_img">
            	<img src="image/banner2.jpg" width="1200"  />
            </div>
        </div>
        <div class="banner" style="background:#f7ead7">
        	<div class="banner_img">
            	<img src="image/banner3.jpg" width="1200" />
            </div>
        </div>
        <div class="banner" style="background:#f1e6ea">
        	<div class="banner_img">
            	<img src="image/banner4.jpg" width="1200"  />
            </div>
        </div>
        <div class="banner" style="background:#f7ead7">
        	<div class="banner_img">
            	<img src="image/banner5.jpg" width="1200"  />
            </div>
        </div>
        <div class="btn">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
                
    	</div>
    </div>
<div class="A1">
<div class="A2">
 <div class="A4"></div>
 <div class="A5">红酒知识</div>
 <div class="A71"><img src="image/g1.jpg" width="270"  /> </div>
 <div class="A7"><h2><a href="#">红酒要怎么喝才既健康又不容易醉</a></h2>
 <p>想喝到冰爽的葡萄酒，白葡萄酒干白葡萄酒的最佳饮用温度是7~10摄氏度，干红葡萄酒则是14~18摄氏度……</p></div>
 <div class="A81"><img src="image/g2.jpg" width="270" /></div>
 <div class="A8"><h2><a href="#">观察拉菲酒塞，教你识别真假拉菲</a></h2>
 <p>观察酒标。真拉菲的酒标由于是丝印酒标，所以表面摸起来有凹凸的感觉，假的是普通印刷摸起来很滑……</p></div>
 </div>
<div class="A3">
 <div class="A4"></div>
 <div class="A6">热门看点</div>
 <div class="A9">六大“醉”受欢迎的红酒品牌</div>
 <div class="A10">
 <ul>
 <li><div class="A101">1</div><div class="A102"><a href="#">拉菲（Lafite）</a></div><div class="A103"><img src="image/movie_top.gif" width="20"  /></div></li>
 <li><div class="A101">2</div><div class="A102"><a href="#">木桐（Mouton）</a></div><div class="A103"><img src="image/movie_top.gif" width="20"  /></div></li>
 <li><div class="A101">3</div><div class="A102"><a href="#">玛歌（Margaux）</a></div><div class="A103"><img src="image/movie_top.gif" width="20"  /></div></li>
 <li><div class="A101">4</div><div class="A102"><a href="#">拉图(Latour)</a></div><div class="A103"><img src="image/movie_top.gif" width="20"  /></div></li>
 <li><div class="A101">5</div><div class="A102"><a href="#">奥比昂（Haut-Brion）</a></div><div class="A103"><img src="image/movie_top.gif" width="20"  /></div></li>
 <li><div class="A101">6</div><div class="A102"><a href="#">卡思黛乐（Castel）</a></div><div class="A103"><img src="image/movie_top.gif" width="20"  /></div></li>
 </ul>
 </div>
</div>
</div>
<div id="B1">
  <div id="B2"><p>世界红酒</p></div>
  <div id="B3">
  <ul>
    <li>
       <div class="B31"><a href="#"><img src="image/h1.jpg" width="220" height="220" /></a></div>  
       <div class="B321">   
       <div class="B32">52度 泸州老窖 特曲（7年）<br />2013年产 老酒 500ml</div>
       <div class="B33">249元</div>
       <div class="B34">98人好评</div>
       </div>
    </li>
    <li>
       <div class="B31"><a href="#"><img src="image/h2.jpg" width="220" height="220" /></a></div>
       <div class="B321">
       <div class="B32">43度 麦卡伦 18年单一麦芽<br />苏格兰威士忌  700ml</div>
       <div class="B33">2080元</div>
       <div class="B34">8人好评</div>
       </div>
    </li>
    <li>
        <div class="B31"><a href="#"><img src="image/h3.jpg" width="220" height="220" /></a></div>
        <div class="B321">
       <div class="B32">人头马XO 干邑白兰地<br /> 700ml</div>
       <div class="B33">1399元</div>
       <div class="B34">121人好评</div>
       </div>
    </li>
    <li>
       <div class="B31"><a href="#"><img src="image/h4.jpg" width="220" height="220" /></a></div>
       <div class="B321">
       <div class="B32">【精品礼盒】 澳大利亚奔富<br />BIN389红葡萄酒 750ml</div>
       <div class="B33">618元</div>
       <div class="B34">28人好评</div>
       </div>
    </li>
    <li>
       <div class="B31"><a href="#"><img src="image/h5.jpg" width="220" height="220" /></a></div>
       <div class="B321">
       <div class="B32">传心（凛）纯米大吟酿<br /> 1800ml</div>
       <div class="B33">1488元</div>
       <div class="B34">0人好评</div>
       </div>
    </li>
  </ul>
  </div></div>
  <div id="C1">
  <div id="C2"><p>红酒类型</p></div>
  <div id="C3">
    <ul>
      <li>
         <div class="C31"><img src="image/i1.jpg" width="275" height="275" /></div>
          <div class="C32">【精选六只装】</div>
           <div class="C33">696元</div>
      </li>
      <li>
         <div class="C31"><img src="image/i2.jpg" width="275" height="275" /></div>
          <div class="C32">【名庄口感】雷司令1+伊诺奥塔维</div>
           <div class="C33">606元</div>
      </li>
      <li>
        <div class="C31"><img src="image/i3.jpg" width="275" height="275" /></div>
          <div class="C32">【新世界红白组合】白诗南+老藤</div>
           <div class="C33">236元</div>
      </li>
      <li>
         <div class="C31"><img src="image/i4.jpg" width="275" height="275" /></div>
          <div class="C32">【亲情酒】168+纯爱</div>
           <div class="C33">660元</div>
      </li>
    </ul>
  </div>
  </div>
  <div id="D1">
    <div id="D2"><p>红酒精品</p></div>
    <div id="D3">
    <div id="D4"><!--手风琴-->
       <ul id="shoufenq">
    	<li><img src="image/shou1.jpg"></li>
        <li><img src="image/shou2.jpg" /></li>
        <li><img src="image/shou3.jpg"/></li>
        <li><img src="image/shou4.jpg" /></li>
        <li><img src="image/shou5.jpg" /></li>
        <li><img src="image/shou6.jpg" /></li>
    </ul>
      </div>
    <div id="D5">
       <ul>
         <li><a href="#"><img src="image/j8.png" width="238" height="130" /></a></li>
          <li><a href="#"><img src="image/j9.png" width="238" height="130" /></a></li>
           <li><a href="#"><img src="image/j10.png" width="238" height="130" /></a></li>
            <li><a href="#"><img src="image/j11.png" width="238" height="130" /></a></li>
             <li><a href="#"><img src="image/j12.png" width="238" height="130" /></a></li>
       </ul>
       </div>
    </div>
  </div>
<div class="E1">
 <div class="E2">世界红酒名庄</div>

 <div class="E3">
  <div class="F1">
   <div class="F2"><img src="image/k1.jpg" width="175" height="175" />
   <ul>
   <li><a href="#">2009年雷诺帝酒庄阿玛罗尼经典红葡萄酒</a></li>
   <li>【WE91】分</li>
   <li><span>¥450</span></li>
   </ul>
   </div>
   <div class="F2"><img src="image/k2.jpg" width="175" height="175" />
   <ul>
   <li><a href="#">2009年索维酒庄史维瓦岩阿玛罗尼红葡萄酒</a></li>
   <li>【WE93】分</li>
   <li><span>¥4515</span></li>
   </ul>
   </div>
   <div class="F2"><img src="image/k3.jpg" width="175" height="175" />
   <ul>
   <li><a href="#">2010年拉瓦里酒庄阿玛罗尼经典红葡萄酒</a></li>
   <li>【WE88】分</li>
   <li><span>¥339</span></li>
   </ul>
   </div>
  </div>
  
   <div class="G1"><img src="image/k7.jpg" width="400"  />
      <div id="G2">
         <ul>
            <li><a href="#">2012年萨莱特酒庄阿玛罗尼经典…</a><br /><div class="G21">2012 Le Salette Amarone Della Valplicella Class…</div></li>
            <li><a href="#">2006蔻福酒庄欧尚阿玛罗尼经典…</a><br /><div class="G21">2006 Corteforte Amarone Della Valpolicella Class…</div></li>
            <li><a href="#">2008蔻福酒庄圣泽诺阿玛罗尼经典…</a><br /><div class="G21">2008 Corteforte Amarone Della Valpolicella Class…</div></li>
            <li><a href="#">2009年安琪洛阿玛罗尼经典红葡萄酒…</a><br /><div class="G21">2009 Antichello Amarone della Valpolicella Class…</div></li>
         </ul>
          
      </div>
      <div id="G3">
         <div class="G31">¥380</div>
         <div class="G31">¥525</div>
         <div class="G31">¥380</div>
         <div class="G31">¥389</div>
      </div>
      
   </div>
   
   
   <div class="H1">
   <div class="H2"><img src="image/k4.jpg" width="175" height="175" />
   <ul>
   <li><a href="#">2009年布里加德拉酒庄维奇阿玛罗尼红葡萄酒</a></li>
   <li>【WE85】分</li>
   <li><span>¥565</span></li>
   </ul>
   </div>
   <div class="H2"><img src="image/k5.jpg" width="175" height="175" />
   <ul>
   <li><a href="#">2011年萨来特酒庄马瑞嘉阿玛罗尼红葡萄酒</a></li>
   <li>【WE95】分</li>
   <li><span>¥4515</span></li>
   </ul>
   </div>
   <div class="H2">
     <img src="image/k6.jpg" width="175" height="175" />
     <ul>
       <li><a href="#">2010年福山酒庄阿玛罗尼经典红葡萄酒</a></li>
   <li>【WE84】分</li>
   <li><span>¥485</span></li>
 </ul>
   </div>
   </div>
   
 </div>
  <div class="E4">意大利名庄：阿玛罗尼<br/><span1>AMARONE DELLA VAPOLICELLA DOCG</span1></div> 
</div>
<div class="E5"><a href="#">更多》</a></div>
<div id="version"><p>关于我们 | 约稿启事 | 网站导航 | 诚聘英才| 刊登广告 | 服务项目 | 联系我们 | 法律声明 | 建议投诉 | 网站帮助| 友情链接<br />
中国葡萄酒资讯网客服QQ：800063399   | 客服电话：0771-2631000|投诉信箱：info@wines-info.com<br />
版权所有： 中国葡萄酒资讯网 | 美酿文化咨询有限公司全程运作 | 桂ICP备05003592号-1 | 经营许可证：桂B2-20110002 |  桂公网安备 45010302000028号<br />
  广西网警ICP备案  广西网警虚拟岗亭 </p> </div>
<script type="text/javascript" src="js/lunbo.js"></script> 
</body>
</html>

CSS样式代码💒

#logoall {
	background-color: #FFF;
	height: 160px;
}
#login {
	background-color: #f3eff0;
	height: 35px;
	width: 1200px;
	margin-right: auto;
	margin-left: auto;
}
#login h2 {
	font-size: 14px;
	color: #333;
	margin-top: 5px;
	float:left;
}
#loginp{
	font-size: 14px;
	color: #333;
	float: right;
	margin-top:5px;
}
#loginp a{
	text-decoration:none;
	color:#333;
	margin-left:3px;
	margin-right:3px;
	}
#loginp a:hover{
	text-decoration:none;
	margin-left:3px;
	margin-right:3px;
	color:#00F;
	}
#logo {
	height: 160px;
	width: 1200px;
	margin-right: auto;
	margin-left: auto;
	position:relative;
	clear:both;
}
#logo1 {
	position: absolute;
	height: 100px;
	width: 200px;
	left: 100px;
	top: 30px;
}
#logo2 {
	height: 50px;
	width: 200px;
	position:absolute;
	top:80px;
	right:100px;
}
#sear