继上一篇的初学数据库连接-网站课程设计完善（适合初学者）
- 打开xampp软件中的两项Apache和mysql打开
- 进入xampp软件所在的文件夹下，进入htdocs文件
- 在htdocs文件创建文件
- 在denglu zhuce guanli里面新建以下文件
这里说明一下：①“第一次html大作业”是小编的一个静态网页，在网站主页里面的“合作伙伴”导航栏点击后跳转的就是这个里面的东西；所以你如果想要改成跳转其他地方（比如百度：你就可以找到相应位置的 a href="第一次html大作业\网站首页.html"合作伙伴）把这句的跳转地址改成“a href="www.baidu.com”就OK，当然你也可以像小编一样加入一个自己写的静态网页，不过要注意一点，就是要把你的相应文件放全，并且地址要写对，不然跳转会出错的！！！②connect.php是专门负责连接前端连接后端的一点代码③find.php是登录网站后查询页面的代码；gobook1.php是没有登录账号时，每一个人都可以浏览到顾客论坛的内容相关后端代码；gobook2.php就是登录后的顾客论坛页面，与gobook1.php不同在于它可以发表论坛意见。information.php是登录的用户进入查询后点击“修改”后，后端与数据库之间交互的代码；input.php是对论坛内容的一些词汇做限定；save.php是通过对input.php中的函数进行调用后对论坛意见发表人，发表内容进行检查；new.php是查询页面中“修改”页面改了数据后将数据库信息做更新保存的代码；
- 进入images文件放入以下图
- 源代码（dazhetehui.html）
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<title>美食街</title>
<script type="text/javascript" src="time.js">
</script>
<link rel="stylesheet" type="text/css" href="style.css">
<style type="text/css">
.content1-1{
width: 302px;
height: 300px;
float: left;
padding-top:10px;
}
.content1-2{
width: 302px;
height: 300px;
float: left;
padding-left: 50px;
padding-top:10px;
line-height: 25px;
}
.content1-3{
width: 302px;
height: 300px;
float: right;
padding-top:10px;
}
.content2{
width: 1000px;
height: 175px;
background-color: black;
}
.content2-1{
width: 180px;
height: 175px;
padding-top:10px;
padding-left: 40px;
float:left;
}
.content2-1-1{
width: 180px;
height: 35px;
line-height: 35px;
margin-top: 5px;
background-color: #4d5053;
text-align: center;
}
.content2-1-1-1{
width: 180px;
height: 35px;
line-height: 35px;
margin-top: 5px;
text-align: center;
background: red;
}
.content2-2{
width: 250px;
height: 175px;
padding-top:10px;
padding-left: 40px;
float:left;
}
.content2-2-1{
width: 180px;
height: 35px;
line-height: 35px;
margin-top: 5px;
background-color: #4d5053;
text-align: center;
}
.content2-3{
width: 180px;
height: 175px;
padding-top:10px;
padding-left:40px;
float:left;
}
.content2-3-1{
width: 180px;
height: 35px;
line-height: 35px;
margin-top: 5px;
background-color: #4d5053;
text-align: center;
}
.content2-4{
width: 180px;
height: 175px;
padding-top:10px;
padding-left:40px;
float:left;
}
.content2-4-1{
width: 180px;
height: 35px;
line-height: 35px;
margin-top: 5px;
background-color: #4d5053;
text-align: center;
}
</style>
</head>
<body >
<Script type="text/javascript">
function simg()
{
var r=Math.random();
var ran=Math.floor(r*5);
var arr=new Array();
arr[0]="images/01.jpg";
arr[1]="images/03.jpg";
arr[2]="images/06.jpg";
arr[3]="images/02.jpg";
arr[4]="images/04.jpg";
arr[5]="images/05.jpg";
document.tx.src=arr[ran];
}
window.setInterval("simg()",2000);
</script>
<div class="big">
<div class="newlogo2">
<br><br><span class="logo-text"> 美食街
<br> <span id="Date"></span>
</br> <input type=" button" size="20" value="搜索" class="btn"/>
<button οnclick="window.open();">确定</button>
<font size="3"><a href="denglu.html#登录界面" >登录</a> <a href="zhuce.html#注册界面">注册</a></font>
</span>
</span></span>
</div>
<div class="newlogo"><img src="images/logo.jpg" title="美食街"></div>
</br></br></br></br>
<div id="header"><img src="images/02.jpg" name="tx" ></div>
<div id="navbg">
<nav>
<a href="home.html" >网站首页</a>
<a href="zuixincaipin.html" >最新菜品</a>
<a href="dazhetehui.html">打折特惠</a>
<a href="yingyangzhishi.html">营养知识</a>
<a href="gbook1.php">顾客论坛</a>
<a href="第一次html大作业\网站首页.html">合作伙伴</a>
</nav>
</div>
<div class="content1">
<div class="content1-1"><a href="shouye.html"><img src="images/07.jpg"></a>
</div>
<div class="content1-2"><br> 美食街是最优质的美食菜谱社区,提供各种菜谱大全,食谱大全,家常菜做法大全,丰富的菜谱大全可以让您轻松地学会怎么做美食,展现自己的高超厨艺,开启美好生活!国内最专业的美食网.为您提供简单实用菜谱大全,详细的美食制作指南,可以跟着一起学的美食视频,各地特色小吃,以及生活百科等服务,学做菜谱请上美食街.
</div>
<div class="content1-3"><img src="images/08.jpg">
</div>
</div>
<a name="菜品发现"></a>
<div class="content2">
<a name="新闻中心"></a>
<div class="content2-1">
<div class="content2-1-1-1"><a href="https://www.meishij.net/zuofa/hongyousuannizhouhua_1.html"><input name ="submit" type="image" src="images/川菜1.jpg" > </input></a></div>
<div class="content2-1-1-1"><a href="https://www.meishij.net/zuofa/moyushaoya_17.html"><input name ="submit" type="image" src="images/川菜2.jpg"> </input></a></div>
<div class="content2-1-1" >鱼香杏鲍菇</div>
<div class="content2-1-1">重庆豆花鱼</div>
</div>
<div class="content2-2">
<div class="content2-1-1-1"><a href="https://www.meishij.net/zuofa/huluobodunji.html"><input name ="submit" type="image" src="images/湘菜1.jpg"> </input></a></div>
<div class="content2-1-1-1"><a href="https://www.meishij.net/zuofa/yangcongroumofensi.html"><input name ="submit" type="image" src="images/湘菜2.jpg"> </input></a></div>
<div class="content2-2-1">韭菜花炒火焙鱼</div>
<div class="content2-2-1">鲜蘑烩鸽蛋</div>
</div>
<div class="content2-3">
<div class="content2-1-1-1"><a href="https://www.meishij.net/zuofa/zizhiguangshilachang.html"><input name ="submit" type="image" src="images/粤菜1.jpg"> </input></a></div>
<div class="content2-1-1-1"><a href="https://www.meishij.net/zuofa/xiyangcaigunshouroufenchangtang.html"><input name ="submit" type="image" src="images/粤菜2.jpg"> </input></a></div>
<div class="content2-3-1">鲜菇炒荷兰豆</div>
<div class="content2-3-1">翻砂香芋</div>
</div>
<div class="content2-4">
<div class="content2-1-1-1"><a href="https://www.meishij.net/zuofa/shuangweidongbeisuancaifen.html"><input name ="submit" type="image" src="images/东北菜1.jpg"> </input></a></div>
<div class="content2-1-1-1"><a href="https://www.meishij.net/zuofa/tudoudundabaicai.html"><input name ="submit" type="image" src="images/东北菜2.jpg"> </input></a></div>
<div class="content2-4-1">鸡块炖土豆宽粉</div>
<div class="content2-4-1">北鸡蛋辣椒蒸酱</div>
</div>
</div>
<div class="dazhelan">
<div class="dazhelantupian3"><img src="images/dazheyangza.jpg"></div>
<div class="dazhelantupian2"><img src="images/kaoyangtui.jpg"></div>
<div class="dazhelantupian1"></div>
</div>
</br></br></br></br></br></br>
<div class="align_center" >
©版权所有©2019 ****大学***学院学生. All rights reserved.241452453248号
</div>
</div>
</body>
</html>
- denglu.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<title>美食街</title>
<script type="text/javascript" src="time.js">
</script>
<link rel="stylesheet" type="text/css" href="style.css">
<style type="text/css">
.box {
position: relative;
height: 410px;
width: 400px;
color: #666;
border-radius: 3px;
background: #FFF;
margin: auto auto 100px;
}
#header {
background: #009688;
position: relative;
height: 100px;
width: 100%;
margin-bottom: 30px;
}
.box h1 {
margin-top: 0;
font-size: 24px;
color: #FFF;
text-align: center;
line-height: 100px;
}
.box button {
background: #cfd8dc;
border: 0;
color: #009688;
padding: 10px;
font-size: 16px;
font-weight: 300;
width: 330px;
margin: 20px auto;
display: block;
cursor: pointer;
border-radius: 2px;
}
.box button:active {
background: #009688;
color: #263238;
}
.box button:hover {
background: #009688;
color: #FFF;
}
.box p {
font-size: 14px;
text-align: center;
}
.group {
position: relative;
margin-bottom: 35px;
margin-left: 40px;
}
.inputMaterial {
font-size: 18px;
padding: 10px 10px 10px 5px;
display: block;
width: 300px;
border: none;
border-bottom: 1px solid #757575;
}
.inputMaterial:focus {
outline: none;
}
label {
color: #999;
font-size: 14px;
font-weight: normal;
position: absolute;
pointer-events: none;
left: 5px;
top: 10px;
}
.inputMaterial:focus ~ label, .inputMaterial:valid ~ label {
top: -20px;
font-size: 14px;
color: #009688;
}
.bar {
position: relative;
display: block;
width: 315px;
}
.bar:before, .bar:after {
content: '';
height: 2px;
width: 0;
bottom: 1px;
position: absolute;
background: #009688;
}
.bar:before {
left: 50%;
}
.bar:after {
right: 50%;
}
.inputMaterial:focus ~ .bar:before, .inputMaterial:focus ~ .bar:after {
width: 50%;
}
@-webkit-keyframes inputHighlighter {
from {
background: #5264AE;
}
to {
width: 0;
background: transparent;
}
}
@keyframes inputHighlighter {
from {
background: #5264AE;
}
to {
width: 0;
background: transparent;
}
}
#footer-box {
width: 100%;
height: 50px;
background: #00695c;
position: absolute;
bottom: 0;
}
.footer-text {
color: #cfd8dc;
}
.sign-up {
color: white;
cursor: pointer;
}
.sign-up:hover {
color: #b2dfdb;
}
</style>
</head>
<body >
<div class="big">
<div class="newlogo2">
<br><br><span class="logo-text"> 美食街
<br> <span id="Date"></span>
</br> <input type=" button" size="20" value="搜索" class="btn"/>
<button οnclick="window.open();">确定</button>
<font size="3"><a href="denglu.html#登录界面" >登录</a> <a href="zhuce.html#注册界面">注册</a></font>
</span>
</span></span>
</div>
<div class="newlogo"><img src="images/logo.jpg" title="美食街"></div>
<br><br><br><br><br><br>
<br>
<br><div class="pic1">
<div id="navbg">
<nav>
<a href="home.html" >网站首页</a>
<a href="zuixincaipin.html" >最新菜品</a>
<a href="dazhetehui.html">打折特惠</a>
<a href="yingyangzhishi.html">营养知识</a>
<a href="gbook1.php">顾客论坛</a>
<a >个人信息</a>
</nav>
</div>
</div>
<div class="content1">
</div>
<div class="content3">
<div class="box">
<div id="header">
<h1>LOGIN</h1>
</div>
<!--登录模块-->
<form action="denglu.php" method="post">
<div class="group">
<input class="inputMaterial" type="text" name="username" required>
<span class="highlight"></span>
<span class="bar"></span>
<label>账号</label>
</div>
<div class="group">
<input class="inputMaterial" type="password" name="password" required>
<span class="highlight"></span>
<span class="bar"></span>
<label>密码</label>
</div>
<button id="buttonlogintoregister" type="submit">登录</button>
</form>
<div id="footer-box"><p class="footer-text">Not a member?<span class="sign-up"> Sign up now</span></p></div>
</div>
</div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<div class="align_center">
<p>©版权所有©2019 **大学***学院学生. All rights reserved.241452453248号</p>
</div>
</div>
</body>
</html>
- home.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<title>美食街</title>
<script type="text/javascript" src="time.js">
</script>
<link rel="stylesheet" type="text/css" href="style.css" />
<style type="text/css">
.content1-1{
width: 302px;
height: 300px;
float: left;
padding-top:10px;
}
.content1-2{
width: 302px;
height: 300px;
float: left;
padding-left: 50px;
padding-top:10px;
line-height: 25px;
color: white;
}
.content1-3{
width: 302px;
height: 300px;
float: right;
padding-top:10px;
}
.content2{
width: 1000px;
height: 175px;
background-color: black;
}
.content2-1{
width: 180px;
height: 175px;
padding-top:10px;
padding-left: 40px;
float:left;
}
.content2-1-1{
width: 180px;
height: 35px;
line-height: 35px;
margin-top: 5px;
background-color: #4d5053;
text-align: center;
}
.content2-1-1-1{
width: 180px;
height: 35px;
line-height: 35px;
margin-top: 5px;
text-align: center;
}
.content2-2{
width: 250px;
height: 175px;
padding-top:10px;
padding-left: 40px;
float:left;
}
.content2-2-1{
width: 180px;
height: 35px;
line-height: 35px;
margin-top: 5px;
background-color: #4d5053;
text-align: center;
}
.content2-3{
width: 180px;
height: 175px;
padding-top:10px;
padding-left:40px;
float:left;
}
.content2-3-1{
width: 180px;
height: 35px;
line-height: 35px;
margin-top: 5px;
background-color: #4d5053;
text-align: center;
}
.content2-4{
width: 180px;
height: 175px;
padding-top:10px;
padding-left:40px;
float:left;
}
.content2-4-1{
width: 180px;
height: 35px;
line-height: 35px;
margin-top: 5px;
background-color: #4d5053;
text-align: center;
}
</style>
</head>
<body >
<Script type="text/javascript">
function simg()
{
var r=Math.random();
var ran=Math.floor(r*5);
var arr=new Array();
arr[0]="images/01.jpg";
arr[1]="images/03.jpg";
arr[2]="images/06.jpg";
arr[3]="images/02.jpg";
arr[4]="images/04.jpg";
arr[5]="images/05.jpg";
document.tx.src=arr[ran];
}
window.setInterval("simg()",2000);
</script>
<div class="big">
<div class="newlogo2">
<br><br><span class="logo-text"> 美食街
<br> <span id="Date"></span>
</br> <input type=" button" size="20" value="搜索" class="btn"/>
<button οnclick="window.open();">确定</button>
<font size="3"><a href="denglu.html#登录界面" >登录</a> <a href="zhuce.html#注册界面">注册</a></font>
</span>
</span></span>
</div>
<div class="newlogo"><img src="images/logo.jpg" title="美食街"></div>
</br></br></br>
<div id="header"><img src="images/02.jpg" name="tx" ></div>
<div id="navbg">
<nav>
<a href="home.html" >网站首页</a>
<a href="zuixincaipin.html" >最新菜品</a>
<a href="dazhetehui.html">打折特惠</a>
<a href="yingyangzhishi.html">营养知识</a>
<a href="gbook1.php">顾客论坛</a>
<a href="第一次html大作业\网站首页.html">合作伙伴</a>
</nav>
</div>
<div class="content1">
<div class="content1-1"><img src="images/07.jpg"></a></div>
<div class="content1-2"><br> 美食街是最优质的美食菜谱社区,提供各种菜谱大全,食谱大全,家常菜做法大全,丰富的菜谱大全可以让您轻松地学会怎么做美食,展现自己的高超厨艺,开启美好生活!国内最专业的美食网.为您提供简单实用菜谱大全,详细的美食制作指南,可以跟着一起学的美食视频,各地特色小吃,以及生活百科等服务,学做菜谱请上美食街.
</div>
<div class="content1-3"><img src="images/08.jpg"></a>
</div>
</div>
<a name="菜品发现"></a>
<div class="content2">
<a name="新闻中心"></a>
<div class="content2-1">
<div class="content2-1-1-1"><a href="https://www.meishij.net/zuofa/hongyousuannizhouhua_1.html"><input name ="submit" type="image" src="images/川菜1.jpg" > </input></a></div>
<div class="content2-1-1-1"><a href="https://www.meishij.net/zuofa/moyushaoya_17.html"><input name ="submit" type="image" src="images/川菜2.jpg"> </input></a></div>
<div class="content2-1-1" >鱼香杏鲍菇</div>
<div class="content2-1-1">重庆豆花鱼</div>
</div>
<div class="content2-2">
<div class="content2-1-1-1"><a href="https://www.meishij.net/zuofa/huluobodunji.html"><input name ="submit" type="image" src="images/湘菜1.jpg"> </input></a></div>
<div class="content2-1-1-1"><a href="https://www.meishij.net/zuofa/yangcongroumofensi.html"><input name ="submit" type="image" src="images/湘菜2.jpg"> </input></a></div>
<div class="content2-2-1">韭菜花炒火焙鱼</div>
<div class="content2-2-1">鲜蘑烩鸽蛋</div>
</div>
<div class="content2-3">
<div class="content2-1-1-1"><a href="https://www.meishij.net/zuofa/zizhiguangshilachang.html"><input name ="submit" type="image" src="images/粤菜1.jpg"> </input></a></div>
<div class="content2-1-1-1"><a href="https://www.meishij.net/zuofa/xiyangcaigunshouroufenchangtang.html"><input name ="submit" type="image" src="images/粤菜2.jpg"> </input></a></div>
<div class="content2-3-1">鲜菇炒荷兰豆</div>
<div class="content2-3-1">翻砂香芋</div>
</div>
<div class="content2-4">
<div class="content2-1-1-1"><a href="https://www.meishij.net/zuofa/shuangweidongbeisuancaifen.html"><input name ="submit" type="image" src="images/东北菜1.jpg"> </input></a></div>
<div class="content2-1-1-1"><a href="https://www.meishij.net/zuofa/tudoudundabaicai.html"><input name ="submit" type="image" src="images/东北菜2.jpg"> </input></a></div>
<div class="content2-4-1">鸡块炖土豆宽粉</div>
<div class="content2-4-1">北鸡蛋辣椒蒸酱</div>
</div>
</div>
<div class="content3"> 美食，顾名思义就是美味的食物，贵的有山珍海味，便宜的有街边小吃。其实美食是不分贵贱的，只要是自己喜欢的，都可以称之为美食。中国素有“烹饪王国”这个美誉。美食吃前有期待、吃后有回味，享受美食也要看场合，场合好美食吃起来才有味道。世界各地美食文化博大精深，营养物质各不相同，品味更多美食，享受更多健康，也让人吃的更加开心。</div>
<div class="content3"><br> 四川菜系，简称川菜。川菜风味包括成都、重庆、乐山、内江、自贡等地方菜的特色，主要特点在于味型多样。川菜的复合味型有20多种，如咸鲜味型、家常味型、麻辣味型、糊辣味型、鱼香味型、姜汁味型、怪味味型、椒麻味型、酸辣味型、红油味型、蒜泥味型、麻酱味型、酱香味型、烟香味型、荔枝味型、五香味型、香糟味型、糖醋味型、甜香味型、陈皮味型、芥末味型、咸甜味型、椒盐味型、糊辣荔枝味型、茄汁味型等等。</div><br><br>
<div class="content3"> 广东菜系，简称粤菜。是中国传统四大菜系、八大菜系之一，发源于岭南。粤菜由广州菜（也称广府菜）、潮州菜（也称潮汕菜）、东江菜（也称客家菜）三种地方风味组成，三种风味各具特色。广州菜范围包括珠江三角洲和韶关、湛江等地，用料丰富，选料精细，技艺精良，清而不淡，鲜而不俗，嫩而不生，油而不腻。以烹制海鲜见长，汤类、素菜、甜菜最具特色。刀工精细，口味清纯。东江菜起源于广东东江一带，菜品多用肉类，极少水产，主料突出，讲究香浓，下油重，味偏咸，以砂锅菜见长，有独特的乡土风味。</div>
<div class="content3"><br> 山东菜系，简称鲁菜。
【特色】：选料精细、刀法细腻，注重实惠，花色多样，善用葱姜。【代表菜品】：九转大肠、糖醋鲤鱼、爆炒腰花、清炒里脊丝、锅烧肘子、葱爆羊肉、葱扒海参、太公望红焖鸡、卤煮鸡杂、鸡丝汤、锅塌豆腐、红烧海螺、炸蛎黄，地三鲜等。
<div class="content3"><br> 江苏菜系，简称苏菜。
由淮扬菜、苏州菜、南京菜等组成。
【特色】：制作精细，因材施艺、四季有别，浓而不腻，味感清鲜，讲究造型。【代表菜品】：烤方、淮扬狮子头、叫花鸡、火烧马鞍桥、松鼠桂鱼、盐水鸭等。
<div class="content3"> 浙江菜系，简称浙菜。由杭州、宁波、绍兴三种地方风味发展而成。【代表菜品】：西湖醋鱼、东坡肘子、龙井虾仁、干炸响铃、油焖春笋、西湖莼菜汤等。
【特色】：浙菜的四方风味既各有特长，又具有共同的四个特点：选料讲究，烹饪独到，注重本味，制作精细。选料讲究，就是做到“细、特、鲜、嫩”4条原则。
</div>
<div class="footer" >
<img src="images/底.jpg">
</div >
<div class="align_center">
<p>©版权所有©2019 **大学***学院学生. All rights reserved.241452453248号</p>
</div>
</div>
</div>
</body>
</html>
- yingyangzhishi.html
<!DOCTYPE html>
<html>
<head>
<meata http-equiv="content-type" content="text/html;charset=utf-8"/>
<title>美食街</title>
<script type="text/javascript" src="time.js">
</script>
<link rel="stylesheet" type="text/css" href="style.css" />
<style type="text/css">
</style>
</head>
<body >
<Script type="text/javascript">
function simg()
{
var r=Math.random();
var ran=Math.floor(r*5);
var arr=new Array();
arr[0]="images/01.jpg";
arr[1]="images/03.jpg";
arr[2]="images/06.jpg";
arr[3]="images/02.jpg";
arr[4]="images/04.jpg";
arr[5]="images/05.jpg";
document.tx.src=arr[ran];
}
window.setInterval("simg()",2000);
</script>
<div class="big">
<div class="newlogo2">
<br><br><span class="logo-text"> 美食街
<br> <span id="Date"></span>
</br> <input type=" button" size="20" value="搜索" class="btn"/>
<button οnclick="window.open();">确定</button>
<font size="3"><a href="denglu.html#登录界面" >登录</a> <a href="zhuce.html#注册界面">注册</a></font>
</span>
</span></span>
</div>
<div class="newlogo"><img src="images/logo.jpg" title="美食街"></div>
</br>
<div id="header"><img src="images/02.jpg" name="tx" ></div>
<div id="navbg">
<nav>
<a href="home.html" >网站首页</a>
<a href="zuixincaipin.html" >最新菜品</a>
<a href="dazhetehui.html">打折特惠</a>
<a href="yingyangzhishi.html">营养知识</a>
<a href="gbook1.php">顾客论坛</a>
<a href="第一次html大作业\网站首页.html">合作伙伴</a>
</nav>
</div>
<div class="dazhelan">
<div class="dazhelanxinxi"><p>
【菜 名】私房菜<br>
【设 计 师】欧阳俊峰<br>
【活动门店】全国美食街连锁<br>
【建议上架】美食·营养·零食·礼品·点心<br>
【活动时间】即日起--2019.12.28<br>
【活动原价】￥5元/份<br>
【活动优惠】2.99元/份<br>
【营养简介】西兰花中含有蛋白质、碳水化合物、脂肪、矿物质、维生素C和胡萝卜素等。此外，西兰花中钙、磷、铁、钾、锌、锰等的含量都很丰富，它的矿物质成分比其他蔬菜更全面。抗癌：菜花中含有“索弗拉芬”能刺激细胞制造对机体有益的保护酶—Ⅱ型酶。、清热解渴：菜花的营养较一般蔬菜丰富。
<br></div>
<div class="dazhelantupian"><img src="images/sifangcai.jpg">></div>
</div>
<div class="dazhelan">
<div class="dazhelanxinxi"><p>
【菜 名】茶叶蛋<br>
【设 计 师】欧阳俊峰<br>
【活动门店】全国美食街连锁<br>
【建议上架】美食·营养·零食·礼品·点心<br>
【活动时间】即日起--2019.12.28<br>
【活动原价】￥5元/个<br>
【活动优惠】2.99元/个<br>
【营养简介】茶：茶中含有咖啡因， 可提神醒脑，消除疲劳；含有单宁酸，能有效地预防中风；所含氟化物，能够预防牙齿疾病；红茶能有效防治皮肤癌，是美容养颜佳品；绿茶所富含的茶多酚，更是人们所熟悉的优秀抗氧化剂，可防癌抗癌、抗衰老、消炎杀菌等。适度饮茶有益身心。 <br></div>
<div class="dazhelantupian"><img src="images/chayedan.jpg"></div>
</div>
</br></br></br></br></br></br></br></br></br>
<div class="align_center">
<p>©版权所有©2019 **大学***学院学生. All rights reserved.241452453248号</p>
</div>
</div>
</body>
</html>
- zhuce.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<title>美食街</title>
<script type="text/javascript" src="time.js">
</script>
<link rel="stylesheet" type="text/css" href="style.css">
<style type="text/css">
.box {
position: relative;
height: 510px;
top: 40px;
width: 400px;
color: #666;
border-radius: 3px;
background: #FFF;
margin: auto auto 100px;
}
#header {
background: #009688;
position: relative;
height: 100px;
width: 100%;
margin-bottom: 30px;
}
.box h1 {
margin-top: 0;
font-size: 24px;
color: #FFF;
text-align: center;
line-height: 100px;
}
.box button {
background: #cfd8dc;
border: 0;
color: #009688;
padding: 10px;
font-size: 16px;
font-weight: 300;
width: 330px;
margin: 20px auto;
display: block;
cursor: pointer;
border-radius: 2px;
}
.box button:active {
background: #009688;
color: #263238;
}
.box button:hover {
background: #009688;
color: #FFF;
}
.box p {
font-size: 14px;
text-align: center;
}
.group {
position: relative;
margin-bottom: 35px;
margin-left: 40px;
}
.inputMaterial {
font-size: 18px;
padding: 10px 10px 10px 5px;
display: block;
width: 300px;
border: none;
border-bottom: 1px solid #757575;
}
.inputMaterial:focus {
outline: none;
}
label {
color: #999;
font-size: 14px;
font-weight: normal;
position: absolute;
pointer-events: none;
left: 5px;
top: 10px;
}
.inputMaterial:focus ~ label, .inputMaterial:valid ~ label {
top: -20px;
font-size: 14px;
color: #009688;
}
.bar {
position: relative;
display: block;
width: 315px;
}
.bar:before, .bar:after {
content: '';
height: 2px;
width: 0;
bottom: 1px;
position: absolute;
background: #009688;
}
.bar:before {
left: 50%;
}
.bar:after {
right: 50%;
}
.inputMaterial:focus ~ .bar:before, .inputMaterial:focus ~ .bar:after {
width: 50%;
}
@-webkit-keyframes inputHighlighter {
from {
background: #5264AE;
}
to {
width: 0;
background: transparent;
}
}
@keyframes inputHighlighter {
from {
background: #5264AE;
}
to {
width: 0;
background: transparent;
}
}
#footer-box {
width: 100%;
height: 50px;
background: #00695c;
position: absolute;
bottom: 0;
}
.footer-text {
color: #cfd8dc;
}
.sign-up {
color: white;
cursor: pointer;
}
.sign-up:hover {
color: #b2dfdb;
}
</style>
</head>
<body >
<div class="big">
<div class="newlogo2">
<br><br><span class="logo-text"> 美食街
<br> <span id="Date"></span>
</br> <input type=" button" size="20" value="搜索" class="btn"/>
<button οnclick="window.open();">确定</button>
<font size="3"><a href="denglu.html#登录界面" >登录</a> <a href="zhuce.html#注册界面">注册</a></font>
</span>
</span></span>
</div>
<div class="newlogo"><img src="images/logo.jpg" title="美食街"></div>
<br><br><br><br><br><br>
<br><br>
<div class="pic1">
<div id="navbg">
<nav>
<a href="home.html" >网站首页</a>
<a href="zuixincaipin.html" >最新菜品</a>
<a href="dazhetehui.html">打折特惠</a>
<a href="yingyangzhishi.html">营养知识</a>
<a href="gbook1.php">顾客论坛</a>
<a href="第一次html大作业\网站首页.html">合作伙伴</a>
</nav>
</div></div>
<div class="content1">
</div>
<div class="content3">
<div class="box">
<div id="header">
<h1>LOGIN</h1>
</div>
<!--注册模块-->
<form action="zhuce.php" method="post">
<div class="group">
<input class="inputMaterial" type="text" name="username" required>
<span class="highlight"></span>
<span class="bar"></span>
<label>账号</label>
</div>
<div class="group">
<input class="inputMaterial" type="password" name="password" required>
<span class="highlight"></span>
<span class="bar"></span>
<label>密码</label>
</div>
<div class="group">
<input class="inputMaterial" type="password" name="kkpassword" required>
<span class="highlight"></span>
<span class="bar"></span>
<label>确认密码</label>
</div>
<button id="buttonlogintoregister" type="submit">注册</button>
</form>
<div id="footer-box"><p class="footer-text">Not a member?<span class="sign-up"> Sign up now</span></p></div>
</div>
</div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="align_center">
<p>©版权所有©2019 **大学***学院学生. All rights reserved.241452453248号</p>
</div>
</div>
</body>
</html>
- zuixincaipin.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<title>美食街</title>
<script type="text/javascript" src="time.js">
</script>
<link rel="stylesheet" type="text/css" href="style.css" />
<style type="text/css">
.content1-1{
width: 302px;
height: 300px;
float: left;
padding-top:10px;
}
.content1-2{
width: 302px;
height: 300px;
float: left;
padding-left: 50px;
padding-top:10px
最低0.47元/天 解锁文章
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
