目录
一、网页概述
二、网页文件
三、网页效果
四、代码展示
1.HTML
2.CSS
3.JS
欢迎来到我的CSDN主页！Web前端网页制作、大学生期末大作业、课程设计、毕业设计、网页模版源码、学习资料等，更多优质博客文章、网页模板点击以下链接查阅：
仙女网页设计-CSDN博客
5000+完整代码，主题涵盖30+种类型:
一、网页概述
美食城网页设计实例，应用html+css+js，响应式网页，图片轮翻效果，自适应屏幕等，供大家参考。
二、网页文件
三、网页效果
以下为网页正文（节选示例）：
四、代码展示
1.HTML
代码如下（节选示例）：
<!DOCTYPE html>
<html>
<head>
<title>美食城</title>
<link rel="stylesheet" href="../../../pro2/default.css">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
<meta name="format-detection" content="telephone=no">
<meta name="renderer" content="webkit">
<meta name="author" content="www.yunalading.com" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Cache-Control" content="no-siteapp" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="stylesheet" href="default.css">
</head>
<body>
<header>
<div class="header-nav">
<div role="navigation">
<a href="#" rel="home" class="hd-logo" title="美食餐厅"><img src="images/logo.png"></a>
<ul class="hd-nav">
<li class="search-box-li">
<div><input type="text" name="search-keyword" placeholder="输入关键词" form="search-keyword"><i
class="iconfont search-submit"></i></div>
<i class="search-exit"></i></li>
<li><a href="index.html" name="index">网站首页<span><i class="iconfont "></i></span></a></li>
<li><a href="about.html" name="about">关于我们<span><i class="iconfont "></i></span></a></li>
<li><a href="productlist.html" name="productlist">菜式欣赏<span><i class="iconfont "></i></span></a></li>
<li><a href="article.html" name="article">美食资讯<span><i class="iconfont "></i></span></a></li>
<li><a href="contact.html" name="contact">在线预订<span><i class="iconfont "></i></span></a></li>
</ul>
<div class="motai"></div>
<ul>
<li><a><i class="iconfont search-botton"></i></a></li>
<li><a>中文</a></li>
<li><a>En</a></li>
<li><a><i class="iconfont nav-bottom"></i></a></li>
</ul>
</div>
<div class="search-box">
<form method="post" action="#" id="search-keyword">
<input type="text" name="search-keyword" placeholder="请输入您的内容">
<span>
</span>
</form>
</div>
</div>
<div class="header-carousel container">
<div id="myCarousel" class="carousel slide">
<!-- 轮播（Carousel）指标 -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- 轮播（Carousel）项目 -->
<div class="carousel-inner">
<div class="item active">
<img src="images/banner.jpg" style="width:100%;" alt="First slide">
</div>
<div class="item">
<img src="images/banner2.jpg" style="width:100%;" alt="Second slide">
</div>
<div class="item">
<img src="images/banner3.jpg" style="width:100%;" alt="Third slide">
</div>
</div>
<!-- 轮播（Carousel）导航 -->
<a class="carousel-control left" href="#myCarousel"
data-slide="prev"></a>
<a class="carousel-control right" href="#myCarousel"
data-slide="next"></a>
</div>
</div>
</header>
<main class="main-first-bgcolor">
<div>
<div class="main-head">
<p>
<span>我们提供</span>
</p>
</div>
<div class="main-we-provide">
<ul>
<li><span><img src="images/lunch.png" alt=""></span>
<h2>中餐</h2>
<p>公司目前经营的范围包括：电子商务平台开发技术支持、技术转让、运维技术服务大数据、云计算等。</p></li>
<li><span><img src="images/dinner.png" alt=""></span>
<h2>晚餐</h2>
<p>公司目前经营的范围包括：电子商务平台开发技术支持、技术转让、运维技术服务大数据、云计算等。</p></li>
<li><span><img src="images/coffee.png" alt=""></span>
<h2>甜品/咖啡</h2>
<p>公司目前经营的范围包括：电子商务平台开发技术支持、技术转让、运维技术服务大数据、云计算等。</p></li>
</ul>
</div>
</div>
<div>
<div class="main-head">
<p>
<span>菜式欣赏</span>
</p>
</div>
</div>
</main>
<main>
<img class="mdbanner" src="images/mdbanner.jpg">
</main>
<main>
<div class="main-body">
......
2.CSS
代码如下（节选示例）：
/*
Theme Name:yuncms theme
Theme URI:http://www.haothemes.com/name
Author:author
Author URI:http://www.haothemes.com
Description:yuncms
Version:1.0.0
License:MIT
Tags:wordpress,themes,haothemes,Bootstrap,full-width,one-column,font-awesome
*/
/*!
* Bootstrap v3.3.7 (http://getbootstrap.com)
* Copyright 2011-2016 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
html {
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
display: block;
}
audio,
canvas,
progress,
video {
display: inline-block;
vertical-align: baseline;
}
audio:not([controls]) {
display: none;
height: 0;
}
[hidden],
template {
display: none;
}
a {
background-color: transparent;
}
a:active,
a:hover {
outline: 0;
}
abbr[title] {
border-bottom: 1px dotted;
}
b,
strong {
font-weight: bold;
}
dfn {
font-style: italic;
}
h1 {
font-size: 2em;
margin: 0.67em 0;
}
mark {
background: #ff0;
color: #000;
}
small {
font-size: 80%;
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
img {
border: 0;
}
svg:not(:root) {
overflow: hidden;
}
figure {
margin: 1em 40px;
}
hr {
-webkit-box-sizing: content-box;
box-sizing: content-box;
height: 0;
}
pre {
overflow: auto;
}
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em;
}
button,
input,
optgroup,
select,
textarea {
color: inherit;
font: inherit;
margin: 0;
}
button {
overflow: visible;
}
button,
select {
text-transform: none;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;
cursor: pointer;
}
button[disabled],
html input[disabled] {
cursor: default;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
input {
line-height: normal;
}
input[type="checkbox"],
input[type="radio"] {
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
height: auto;
}
input[type="search"] {
-webkit-appearance: textfield;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
......
3.JS
代码如下（节选示例）：
/*
Theme Name:yuncms theme
Theme URI:http://www.haothemes.com/name
Author:author
Author URI:http://www.haothemes.com
Description:yuncms
Version:1.0.0
License:MIT
Tags:wordpress,themes,haothemes,Bootstrap,full-width,one-column,font-awesome
*/
(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);throw new Error("Cannot find module '"+o+"'")}var f=n[o]={exports:{}};t[o][0].call(f.exports,function(e){var n=t[o][1][e];return s(n?n:e)},f,f.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
'use strict';
require('./global');
//头部导航搜索按钮事件
$('.search-botton').on('click', function () {
$('.search-box').css('display', 'block');
$(document).keypress(function (e) {
// 回车键事件
if (e.keyCode == 13) {
$('#search-keyword').submit();
}
});
});
//头部搜索框退出按钮事件
$('.search-box span').click(function () {
$('.search-box').css('display', 'none');
});
$('.search-box-li i').click(function () {
$('.hd-nav').css('display', 'none');
$('.motai').css('display', 'none');
$('.carousel-indicators').css('z-index', '15');
});
//头部响应式手机导航按钮
$('.nav-bottom').click(function () {
$('.hd-nav').css('display', 'block');
$('.motai').css('display', 'block');
$('.search-box-li').css('display', 'block');
$('.carousel-indicators').css('z-index', '0');
$('.motai').css('top', $('.hd-nav').css('height'));
$('.motai').css('height', document.body.scrollHeight - parseInt($('.hd-nav').css('height')) + 'px');
});
//头部响应式手机搜索按钮事件
$('.search-submit').click(function () {
$('#search-keyword').submit();
});
//main-head的高度自适应
$(function () {
var aa =$(document).width();
var b = aa * 0.06 + 'px';
var c = aa * 0.06 - 10 + 'px';
$('.main-head').css('padding-top', b);
$('.main-we-provide').css('padding-top', c);
$('.main-body p').css('height', $('.main-body-img li').css('height'));
});
//商品鼠标mousemove详情事件
$('.main-submenu-info a').hover(
function (e) {
e.stopPropagation();
var a = $(this).find('img').css('width');
var b = $(this).find('img').css('height');
$('.img-bg').css('width', a);
$('.img-bg').css('height', b);
$(this).find('.food-name').slideDown('slow');
$(this).find('.food-price').slideDown('slow');
$(this).find('.img-bg').slideDown('slow');
return false;
},
function (e) {
e.stopPropagation();
$(this).find('.food-name').slideUp('slow');
$(this).find('.food-price').slideUp('slow');
$(this).find('.img-bg').slideUp('slow');
return false;
}
);
$(function () {
var aa = $('.activity-duration').next('img').css('width');
var bb = $('.activity-duration').next('img').css('height');
var aaa = parseInt(aa);
var bbb = parseInt(bb);
$('.activity-duration').css('width', aaa * 0.36);
$('.activity-duration').css('height', bbb * 0.45);
});
//预定功能提交按钮
$('.reserve').click(function () {
$('#food-reserve').submit();
return false;
});
//轮播时间控制
$('.carousel').carousel({
interval: 2000
})
//关于我们图片高度一致
$(function(){
var a=$('.main-about-body').find('img').css('width');
var b=parseInt(a)*0.6988;
$('.main-about-body > div').css('height',b+'px');
});
//关于我们团队成员高度控制
$(function(){
var teamHeight=$('.main-team li').css('height') ;
$('.main-team').css('height',teamHeight);
});
//关于我们团队成员翻页按钮
$(function(){
var l=$('.main-team li').length;
var indexa=$('.main-team li').index($('.main-team-display'));
var indexb=l-1;
$('.prevbtn').click(function(){
if(indexa===0){
return false;
}else if(indexa > 0){
indexa -= 1;
$('.main-team li').removeClass('main-team-display');
$('.main-team li').eq(indexa).addClass('main-team-display');
}
});
$('.nextbtn').click(function(){
if(indexa===indexb){
return false;
}else if(indexa<l){
indexa += 1;
$('.main-team li').removeClass('main-team-display');
$('.main-team li').eq(indexa).addClass('main-team-display');
}
});
});
//顶部导航栏跟随页面显示hover效果
$(function(){
var pathname=window.location.pathname;
if(pathname.length>=3){
$('.hd-nav li').removeClass('on');
$('.hd-nav a').each(function(){
if($(this).attr('href').indexOf(pathname) !== -1){
$(this).parent().addClass('on');
}
......
更多优质博客文章、完整代码案例模板，点击以下链接查阅：
仙女网页设计-CSDN博客
Web前端网页制作、大学生期末大作业、课程设计、毕业设计、完整代码案例模板、Web前端网页定制、教学课程、学习资料等，有需要的添加以下微信交流👇🏻👇🏻👇🏻
