HTML期末作业-仿美食菜谱网站模板(HTML+CSS+JavaScript)

最新推荐文章于 2024-07-20 16:00:35 发布

置顶

@码出未来-web网页设计

最新推荐文章于 2024-07-20 16:00:35 发布

阅读量1.1w

点赞数 62

分类专栏： HTML企业模板学生网页设置作业源码HTML HTML期末大作业文章标签： html+css+Js html美食菜谱网站 HTML期末大作业 html+css+js菜谱网站 HTML 毕业设计模板

本文链接：https://blog.csdn.net/ruan365392777/article/details/118082372

版权

HTML期末作业-仿美食菜谱网站HTML模板(HTML+CSS+JavaScript)

美食菜谱网站模板，DIV+CSS布局设计，自适应分辨率，兼容PC端和移动端，全套模板，包括首页、饮食健康、美食达人、菜谱大全、登录等HTML企业网站模板页面。

效果演示

在这里插入图片描述

代码实现

<!DOCTYPE html>
<html lang="zh-CN">
<head>

    <title>鑫盛辉</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/index.css">

    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery.min.js"></script>
    
    <script src="js/common.js"></script>

</head>
<body>
<header>
	<!--logo-->
	<div class="container-fluid">
		<div class="container logo">
		  <a href="index.html"><img src="images/logo.png" /></a>
		</div>
	</div>
	<!--logo end-->
	
	<!--nav-->
	<div class="nav_all">
		<div class="container-fluid nav_top">
			<div class="container ">
			 <div class="nav_top_left">
			 	<span>诚信&nbsp;&nbsp;&nbsp;&nbsp; 专业 &nbsp;&nbsp;&nbsp;&nbsp; 负责&nbsp;&nbsp;&nbsp;&nbsp;  创新</span>
			 </div>
			 <div class="nav_top_right">
			 	 <a><span class="glyphicon glyphicon-home" aria-hidden="true"></span> |</a>
			 	 <a><span class="glyphicon glyphicon-user" aria-hidden="true"></span> |</a>
			 	 <a><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>info@xxxx.com&nbsp;&nbsp; |</a>
			 	 <a><span class="glyphicon glyphicon-earphone" aria-hidden="true"></span> 0533-8888 8888</a>
			 </div>
			 <div class="clear"></div>
			</div>
		</div>
		<div class="container-fluid nav_navbar">
			<div class="container">
				<ul class="">
				  <li class="active"><a href="index.html">首页</a></li>
				  <li><a href="about.html">走进鑫盛辉</a