html静态网站基于HTML+CSS+JavaScript上海美食介绍网站网页设计与实现共计5个页面-CSDN博客

本文链接：https://blog.csdn.net/wx___bj050106/article/details/126179092

📂文章目录

一、👨‍🎓网站题目
二、✍️网站描述
三、📚网站介绍
四、🌐网站效果
五、🪓 代码实现
- 🧱HTML结构代码
- 💒CSS样式代码
六、🥇 如何让学习不再盲目
七、🎁更多干货

一、👨‍🎓网站题目

🥧 美食网页介绍、🍰甜品蛋糕、🦐地方美食小吃文化、🍺餐饮文化、等网站的设计与制作。
❤ 【作者主页——🔥获取更多优质源码】
❤ 【学习资料/简历模板/面试资料/ 网站设计与制作】
❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例】

二、✍️网站描述

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

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

三、📚网站介绍

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

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

<!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" />
<link href="css/shouye.css" type="text/css" rel="stylesheet" />

<title>上海美食</title>
</head>

<body style="height:1000px;">
<div class="sum">
  <div class="banner"><img src="img/banner.jpg" />
  </div>
  <div class="menu">
    <ul>
      <li><a href="index.html">主页</a></li>
      <li><a href="zhongcan.html">美食展示</a></li>
      <li><a href="meishizhizuo.html">美食制作</a></li>
      <li><a href="mingdian.html">名店搜罗</a></li>
      <li><a href="liuyan.html">留言板</a></li>
    </ul>
  </div>
  <div class="null"></div>
  <div class="content">
    <div class="content_left">
      <div class="login">
        <div class="login_top">登陆</div>
        <div class="user">用户名：
          <input type="text" size="20" />
        </div>
        <div class="pass">密&nbsp;&nbsp;码：
          <input type="password" size="20" />
        </div>
        <div class="down">
          <input type="button" value="登 陆" />
         <a href="zhuce.html"> <input type="button" value="注 册"  /></a>
        </div>
      </div>
      <div class="lnull"></div>
      <img src="img/hh1.jpg" width="200" />
    </div>
    <div class="content_right"><br />

    <h1 style="font-size:24px; text-align:center; color:#f00;">上海美食</h1><br />

    <p style="font-size:14px;">沪菜即上海菜，是中国的主要地方风味菜之一。本帮菜是上海菜的别称，是江南地区传统饮食文化的一个重要流派。所谓本帮，即本地。以浓油赤酱、咸淡适中、保持原味、醇厚鲜美为其特色。常用的烹调方法以红烧、煨、糖为主。后为适应上海人喜食清淡爽口的口味，菜肴渐由原来的重油赤酱趋向淡雅爽口。本帮菜烹调方法上善于用糖，别具江南风味。<br />
由于上海本地菜（包括苏锡菜）与外地菜长期共存，相互影响，便在原本地菜的基础上，逐渐发展成以上海和苏锡风味为主体并兼有各地风味的上海风味菜体系。
<br />

如今，上海菜进一步具有选料新鲜、品质优良、刀工精细、制作考究、火候恰当、清淡素雅、咸鲜适中、口味多样、适应面广、风味独特等优点。其主要名菜有“青鱼下巴甩水”、“青鱼秃肺”、“腌川红烧圈子”、“生煸草头”、“白斩鸡”、“鸡骨酱”、“糟钵头”、“虾子大乌参”、“松江鲈鱼”、“枫泾丁蹄”等一二百种菜肴。</p>
      <div class="content_down" style="margin-top:10px;">
        <div class="content_down_left"><a href="xican.html"><img src="img/2.jpg" /></a></div>
        <div class="content_down_right"><a href="#.html"><img src="img/3.jpg" /></a></div>
      </div>
      
      <div class="content_null"></div>
    
    </div>
  </div>
  <div class="clear"></div>
  <div class="foot">
   <p align="center" style="line-height:60px; color:#fff;">欢迎光临</p>
    
  </div>
</div>
</body>
</html>

💒CSS样式代码


*{ margin:0; padding:0; font-family:Microsoft YaHei;}
.clear{ clear:both;}
.fl{ float:left;}
.fr{ float:right;}
img{ border:none;}
a{ text-decoration:none;}
a:hover{ text-decoration:underline;}
li{ list-style-type:none;}
.ofh{overflow:hidden;}
.center{   }
.em{ text-indent:2em;}
p{ font-size:14px; line-height:24px; color:#555;}



body {
	margin:0;
	padding:0;

}
.null {
	width:1000px;
	height:20px;
}
.sum {
	width:1000px;
	margin:0 auto; 
	height:auto; 
}

#div1 {
	width: 60px;
	height: 80px;
	position: absolute;
	right: 0;
	bottom: 0;
	color: #FFF;
	background-color: #990;
}

.menu {
font-family: arial, sans-serif; 
width:1000px; 
margin:0; 


}

/* remove the bullets and set the margin and padding to zero for the unordered list */
.menu ul {
padding:0; 
margin:0;
list-style-type: none;
}
/* float the list so that the items are in a line and their position relative so that the drop down list will appear in the right place underneath each list item */
.menu ul li {
float:left; 
position:relative;

}
/* style the links to be 104px wide by 30px high with a top and right border 1px solid white. Set the background color and the font size. */
.menu ul li a {
display:block; 
text-align:center; 
text-decoration:none; 
width:104px; 
height:34px; 
color:#fff; 
border:1px solid #fff;
border-width:1px 1px 0 0;
background:#0362a4; 
line-height:34px; 

width:199px;
}
/* make the dropdown ul invisible */
.menu ul li ul {
display: none; z-index:99999;
}

.menu ul li:hover ul {
display:block; 
position:absolute; 
top:34px; 
left:0; 
width:105px; z-index:99999;
}
/* style the background and foreground color of the submenu links */
.menu ul li:hover ul li a {
display:block; 
background:#faeec7;  z-index:99999;
color:#000;
}
/* style the background and forground colors of the links on hover */
.menu ul li:hover ul li a:hover {
	color:#000;
	background-color:#f00; z-index:99999;
}


.content {
	width:1000px;
	height:600px;
}
.content_left {
	width:240px;
	height:600px;
	float:left;
}
.login {
	width:238px;
	height:268px;
	border:1px solid #CCCCCC;
}

}
.list_one a:hover {
	text-decoration:underline;
	color:#003300;
}
.content_right {
	width:740px;
	float:right;
	height: auto;
}
.content_top {
	width:740px;
	height:280px;
}
.content_null {
	width:740px;
	height:20px;
}
.content_down {
	width:740px;
	height:300px;
}
.content_down_left {
	width:360px;
	height:300px;
	float:left;
}
.content_down_right {
	width:360px;
	height:300px;
	float:right;
}
.foot {
	width:1000px; margin-top:30px;
	height:60px; background:#0362a4; color:#fff;
}

.top {
	width:320px;
	margin:0 auto;
}
.foot_top li {
	list-style:none;
	font-size:14px;
	width:80px;
	height:40px;
	float:left;
}
.foot_top li a {
	text-decoration:none;
	color:#666666;
}
.foot_top li a:hover {
	color:#FF0000;
}
.foot_down {
	text-align:center;
	font-size:14px;
	color:#666666;
}

.zhuce{width:600px; height:300px; margin:auto; margin-top:80px; margin-left:80px; font-size:16px; color:#222;}
.zhuce_info{width:600px; height:30px; margin:10px auto;}
.zhuce_info input{ width:450px; height:20px; padding:5px; border:1px solid #333; font-size:14px; color:#333; float:right;}

六、🥇 如何让学习不再盲目

很多刚入门编程的小白学习了基础语法，却不知道语法的用途，不知道如何加深映像，不知道如何提升自己，这个时候每天刷自主刷一些题就非常重要（百炼成神），可以去牛客网上的编程初学者入门训练。该专题为编程入门级别，适合刚学完语法的小白练习，题目涉及编程基础语法，基本结构等，每道题带有练习模式和考试模式，可还原考试模式进行模拟，也可通过练习模式进行练习。