大学生HTML5期末作业 Web前端网页制作 html5+css3+js html+css网页制作美食美食每刻4个页面-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_42431718/article/details/144853127

大学生HTML5期末作业 Web前端网页制作 html5+css3+js html+css网页制作美食美食每刻4个页面

网页作品代码简单，可使用任意HTML辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。

获取源码

1，访问该网站 https://download.youkuaiyun.com/download/qq_42431718/90208496
2，点击上方下载

目录1

在这里插入图片描述

项目视频

html+css网页制作美食美食每刻4个页面

页面展示

页面1

在这里插入图片描述

页面2

在这里插入图片描述

页面3

在这里插入图片描述

页面4

在这里插入图片描述

代码展示

<body>
	<!-- 顶部 s -->
	<div class="top">
		<div class="center top_c">
			<p>你好，欢迎来到美食美刻网！</p>
		</div>
	</div>
	<!-- 尾部 E -->
	<!-- logo s -->
	<div class="logo">
		<div class="center l_c">
			<div class="l_left fl">
				<h1>
					<a href="#">美食美刻</a>
				</h1>
			</div>
			<div class="l_center fl">
				<input class="txt fl" type="text" placeholder="请输入菜谱/食材/菜单 ">
				<input  class="btn fl" type="button" value="搜索">
			</div>
			<div class="l_right fr">
				<ul>
					<li><b></b><a href="#">QQ注册</a></li>
					<li><b class="sina"></b><a href="#">微博登陆</a></li>
					<li><a href="#">注册</a></li>
					<li><input type="button" value="登录"></li>
				</ul>
			</div>
		</div>
	</div>
	<!--  logo e-->
	<!-- 登录页面中间部分 s -->
	<div class="all">
		<div class="all_left fl"></div>
		<div class="all_right fl">
			<h2>美食美刻</h2>
			<div>
			
			     
			     <input  class="txt" type="text" placeholder="请输入昵称"> 
			     <br/>
			     
			     <input class="btn" type="password" placeholder="密码"> <br/>
			</div>
			<div class="re">
				 <input  class="fl" type="checkbox">
				 <span class="fl">自动登录</span>
				 <a class="fr" href="">忘记密码？</a>
			</div>
			<input class="btn1" type="button" value="登录" onclick="window.open('temple.html')">
			<div class="other">
				<p>其他方式</p>
				<ul>
					<li>
					<i></i>
					<a href="#">腾讯登录</a>
					</li>
					<li>
					<i class="weibo"></i>
					<a href="#">微博登录</a>
					</li>
					<li>
					<i class="youxiang"></i>
					<a href="#">邮箱注册</a>
					</li>
				</ul>
			</div>

		</div>
	</div>
	<!-- 登录页面中间部分 e-->
	<!-- foot s -->
	<div class="foot">
	   <div class="f_border"> 
	   <div>
	   	<b class="b1"></b>
	   	<b class="b2"></b>
	   	<b class="b3"></b>
	   	<b class="b4"></b>

	   </div>
	   <div class="center">
		<div class="foot_l fl">
			<p>中国最大的菜谱库<em>800000</em>篇</p>
			<p>每月，用户访问数量<em>20000000</em>次</p>
			<p>每年，菜谱被浏览量<em>3600000000</em>次</p>
			<p>现在，这些数字还在不断的增长着，欢迎您来一起使用美食美刻！</p>
		</div>
		<div class="foot_r fr">
			<ul>
				<li>
				     <a href="#">
				     <s></s>
				     <span>点击进入<br/>爱美食微博官网</span>
					
				    </a>
				</li>
				<li>
				    <a href="#">
				    <s class="kongjian"></s>
				    <span>点击进入<br/>爱美食QQ空间</span>
			         </a>
				</li>
				<li>
				    <a href="#">
				    <s class="weixin"></s>
				    <span>扫描二维码<br/>添加爱美食为微信好友</span>
					
				     </a>
				</li>
				<li>
				    <a href="#">
				    <s class="shouji"></s>
				    <span>扫描二维码<br/>添加爱美食手机客户端</span>
					
				     </a>
				</li>
			</ul>
		</div>
		</div>
		</div>
	</div>
	<!-- foot e -->
</body>