web网页设计期末课程大作业：美食餐饮文化主题网站设计——上海美食网站制作与实现 5页-CSDN博客

已注销
116 阅读5分钟

🌩️ 精彩专栏推荐👇🏻👇🏻👇🏻
💂 作者主页: 【进入主页—🚀获取更多源码】
🎓 web前端期末大作业： 【📚HTML5网页期末作业 (1000套) 】
🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】

📂文章目录

二、📚网站介绍

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

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

三、🔗网站效果

▶️1.视频演示

F99JP 上海美食 5页 无js 带留言表单

🧩 2.图片演示

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

四、💒 网站代码

🧱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="登 陆" />
          <input type="button" value="注 册" />
        </div>
      </div>
      <div class="lnull"></div>
        <img src="img/hh1.jpg" width="200" />
    </div>
    <div class="content_right">
      <div class="zhuce" >
        <div class="zhuce_info">姓名：
          <input />
        </div>
        <div class="zhuce_info">电话：
          <input />
        </div>
        <div class="zhuce_info">邮箱：
          <input />
        </div>
        <div class="zhuce_info">手机：
          <input />
        </div>
        <div class="">留言：
          <textarea style="width:460px; height:250px; border:1px solid #000; float:right;"></textarea>
        </div>
        <div class="subout">
          <div class="sub" ><a href="#">提交</a></div>
          <div class="sub" ><a href="#">重置</a></div>
        </div>
      </div>
      <div style="clear:both"></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;
}
.login_top {
	width:238px;
	height:40px;
	font-size:20px;
	color:#333333;
	line-height:40px;
	text-align:center;
}
.user {
	width:238px;
	height:60px;
	font-size:18px;
}
.pass {
	width:238px;
	height:60px;
font-size:18px;
}
.right_main{ padding:10px;}

.down {
	width:200px; padding-left:30px;
	height:88px;
}
.lnull {
	width:240px;
	height:30px;
}
.list {
	width:238px;
	height:298px;
	border:1px solid #CCCCCC;
}
.list_one_sum {
	width:218px;
	height:248px;
	padding:0 10px 0 10px;
}
.list_one {
	width:218px;
	height:30px;
	border-bottom:1px dotted #CCCCCC;
	line-height:30px;
	font-size:14px;
}
.list_one_left {
	width:30px;
	height:30px;
	float:left;
}
.list_one_center {
	width:138px;
	height:30px;
	float:left;
}
.list_one_right {
	width:50px;overflow:hidden;
	height:30px;
	float:left;
	font-size:11px;
	color:#666666;
}
.list_one a {
	text-decoration:none;
	color:#666666;
}
.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;}

.subout{width:400px; height:50px; margin-left:200px; font-size:18px; color:#222;}
.sub{width:120px; height:25px; padding:5px; margin:10px; float:left; background-color:#900; text-align:center; }
.sub:hover{ background-color:#000;}
.sub a{ font-size:18px; color:#fff;}

五、🎁更多源码

1.如果我的博客对你有帮助 请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！

2.💗【👇🏻👇🏻👇🏻🉑关注我| 获取更多源码】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、等!

📣以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻

avatar
文章
阅读
粉丝