目录
博主寄语
火锅美食响应式网页设计实例，应用html+css+js： Div、导航栏、图片轮翻效果、注册登录页面、等。适用于大学生网页课程作业设计。
响应式布局可以根据不同的设备屏幕大小自动调整页面布局，提高用户体验；
支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；
支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。
二、网页文件
本网页实例共包含4个页面：
三、网页效果
以下是本篇文章正文内容，下面案例仅供参考（节选示例）：
四、代码展示
1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link type="text/css" rel="stylesheet" href="css/bootstrap.css" />
<link type="text/css" rel="stylesheet" href="css/style.css" />
<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<title>火锅</title>
</head>
<body style="background: #fff">
<!--顶部-->
<header class="clearfix">
<div class="logo"> <img src="images/logo.jpg" height="120"/></div>
<div class="container">
<div class="nav clearfix"> <a href="index.html">首页</a><a href="food.html">菜品</a><a href="about.html">介绍</a><a href="shop.html">火锅店</a> </div>
<div class="clear"></div>
</div>
</header>
<div class="container">
<!--内容-->
<div class="con">
<div class="pic">
<div class="banner">
<div id="myCarousel" class="carousel slide">
<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>
<div class="carousel-inner">
<div class="item active"> <img src="images/banner.jpg" alt="First slide" /> </div>
<div class="item"> <img src="images/banner2.jpg" alt="Second slide" /> </div>
<div class="item"> <img src="images/banner3.jpg" alt="Third slide" /> </div>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$("#myCarousel").carousel({ interval: 5000 }); //每隔5秒自动轮播
});
</script>
</div>
<div class="container part2">
<h2 class="Title">火锅菜品</h2>
<ul>
<li class="col-sm-3"> <img src="images/1.jpg" width="100%" />
<p>菜品</p>
</li>
<li class="col-sm-3"> <img src="images/2.jpg" width="100%" />
<p>菜品</p>
</li>
<li class="col-sm-3"> <img src="images/3.jpg" width="100%" />
<p>菜品</p>
</li>
<li class="col-sm-3"> <img src="images/4.jpg" width="100%" />
<p>菜品</p>
</li>
<li class="col-sm-3"> <img src="images/5.jpg" width="100%" />
<p>菜品</p>
</li>
<li class="col-sm-3"> <img src="images/6.jpg" width="100%" />
<p>菜品</p>
</li>
<li class="col-sm-3"> <img src="images/7.jpg" width="100%" />
<p>菜品</p>
</li>
<li class="col-sm-3"> <img src="images/8.jpg" width="100%" />
<p>菜品</p>
</li>
</ul>
</div>
<div class="Part1 container">
<h2 class="Title">火锅介绍</h2>
<div class="col-sm-6"><img src="images/img.jpg" width="100%" /></div>
<div class="col-sm-6 text"> 火锅是我国独创的一种民间美食，它汤料合一，现吃现烫，营养丰富，方便快捷，深受大众喜爱。经过人们不断的改良，今天的火锅类型，以及所使用的汤底和食材都花样翻新，种类更加繁多，成为人们日常生活中一道必不可少的佳肴。<br />
火锅起源之说也是众说纷纭，就好比阿拉伯数字一样，起源于印度，但却是经由阿拉伯人传向四方的。这就是后来人们误解阿拉伯数字是阿拉伯人发明的原因。<br />
关于火锅的起源，有两种说法：一种说是在中国三国时期或魏文帝时代，那时的“铜鼎”，就是火锅的前身；另一种说是火锅始于东汉，出土文物中的“斗”就是指火锅。可见火锅在中国已有1900多年的历史了。<br />
我国的火锅，历史悠久，源远流长。浙江等地曾出土5000多年前的与陶釜配套使用的小陶灶，可以很方便地移动，可以算是火锅初级形式。北京延庆县龙庆峡山戎文化遗址中出土的春秋时期青铜火锅，有加热过的痕迹。奴隶社会后期，出现了一种小铜鼎，高不超过20厘米，口径15厘米左右。有的鼎与炉合二为一，即在鼎中铸有一个隔层，将鼎腹分为上下两部分，下层有一个开口，可以送入炭火，四周镂空作通风的烟孔。有的鼎腹较浅，鼎中间夹一炭盘，人们称这种类型的鼎为“温鼎”，它小巧便利，可以说是一种较好的火锅了。汉代出现一种称为“染炉”、“染杯”的小铜器，构造分为三部分：主体为炭炉；上面有盛食物的杯，容积一般为250至300毫升；下面有承接炭火的盘。可以推断这就是古代单人使用的小火锅。唐宋时，火锅开始盛行，官府和名流家中设宴，多备火锅。 </div>
</div>
<div class="Part6 container">
<h2 class="Title">火锅店</h2>
<div class="col-sm-4">
<div>
<h2>火锅店</h2>
<div><img src="images/a1.jpg" width="100%" /></div>
</div>
</div>
<div class="col-sm-4">
<div>
<h2>火锅店</h2>
<div><img src="images/a2.jpg" width="100%" /></div>
</div>
</div>
<div class="col-sm-4">
<div>
<h2>火锅店</h2>
<div><img src="images/a3.jpg" width="100%" /></div>
</div>
</div>
</div>
<div class="Part6 container" >
<h2 class="Title">注册</h2>
<div class="clearfix">
<div class="col-sm-6"><img src="images/7.jpg" width="100%" /></div>
<div class="col-sm-6">
<form>
<div class="form-group">
<label for="exampleInputEmail1">邮箱</label>
<input
type="email"
class="form-control"
id="exampleInputEmail1"
placeholder="邮箱"
/>
</div>
<div class="form-group">
<label for="exampleInputEmail1">账号</label>
<input
type="email"
class="form-control"
id="exampleInputEmail1"
placeholder="账号"
/>
</div>
<div class="form-group">
<label for="exampleInputPassword1">密码</label>
<input
type="password"
class="form-control"
id="exampleInputPassword1"
placeholder="密码"
/>
</div>
<div class="form-group">
<label for="exampleInputPassword1">确认密码</label>
<input
type="password"
class="form-control"
id="exampleInputPassword1"
placeholder="确认密码"
/>
</div>
<div class="checkbox">
<label>
<input type="checkbox" />
勾选同意 </label>
</div>
<button type="submit" class="btn btn-danger btn-lg"> 立刻注册 </button>
</form>
</div>
</div>
</div>
</div>
<br />
<br />
<!--底部-->
<footer>
<p>版权所有</p>
</footer>
</div>
</body>
</html>
...
2.CSS
代码如下（节选示例）：
html {
font-family:sans-serif;
-webkit-text-size-adjust:100%;
-ms-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
}
template {
display:none
}
a {
background-color:transparent
}
a:active,a:hover {
outline:0
}
abbr[title] {
border-bottom:1px dotted
}
b,strong {
font-weight:700
}
dfn {
font-style:italic
}
h1 {
margin:.67em 0;
font-size:2em
}
mark {
color:#000;
background:#ff0
}
small {
font-size:80%
}
sub,sup {
position:relative;
font-size:75%;
line-height:0;
vertical-align:baseline
}
sup {
top:-.5em
}
sub {
bottom:-.25em
}
img {
border:0
}
svg:not(:root) {
overflow:hidden
}
figure {
margin:1em 40px
}
hr {
height:0;
-webkit-box-sizing:content-box;
-moz-box-sizing:content-box;
box-sizing:content-box
}
pre {
overflow:auto
}
code,kbd,pre,samp {
font-family:monospace,monospace;
font-size:1em
}
button,input,optgroup,select,textarea {
margin:0;
font:inherit;
color:inherit
}
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 {
padding:0;
border:0
}
input {
line-height:normal
}
input[type=checkbox],input[type=radio] {
-webkit-box-sizing:border-box;
-moz-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-box-sizing:content-box;
-moz-box-sizing:content-box;
box-sizing:content-box;
-webkit-appearance:textfield
}
input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration {
-webkit-appearance:none
}
fieldset {
padding:.35em .625em .75em;
margin:0 2px;
border:1px solid silver
}
legend {
padding:0;
border:0
}
textarea {
overflow:auto
}
optgroup {
font-weight:700
}
table {
border-spacing:0;
border-collapse:collapse
}
td,th {
padding:0
}
...
3.JS
代码如下（节选示例）：
/*!
* Bootstrap v3.3.5 (http://getbootstrap.com)
* Copyright 2011-2015 Twitter, Inc.
* Licensed under the MIT license
*/
if ("undefined" == typeof jQuery) throw new Error("Bootstrap's JavaScript requires jQuery"); + function (a) {
"use strict";
var b = a.fn.jquery.split(" ")[0].split(".");
if (b[0] < 2 && b[1] < 9 || 1 == b[0] && 9 == b[1] && b[2] < 1) throw new Error("Bootstrap's JavaScript requires jQuery version 1.9.1 or higher")
}(jQuery), + function (a) {
"use strict";
function b() {
var a = document.createElement("bootstrap"),
b = {
WebkitTransition: "webkitTransitionEnd",
MozTransition: "transitionend",
OTransition: "oTransitionEnd otransitionend",
transition: "transitionend"
};
for (var c in b)
if (void 0 !== a.style[c]) return {
end: b[c]
};
return !1
}
a.fn.emulateTransitionEnd = function (b) {
var c = !1,
d = this;
a(this).one("bsTransitionEnd", function () {
c = !0
});
var e = function () {
c || a(d).trigger(a.support.transition.end)
};
return setTimeout(e, b), this
}, a(function () {
a.support.transition = b(), a.support.transition && (a.event.special.bsTransitionEnd = {
bindType: a.support.transition.end,
delegateType: a.support.transition.end,
handle: function (b) {
return a(b.target).is(this) ? b.handleObj.handler.apply(this, arguments) : void 0
}
})
})
}(jQuery), + function (a) {
"use strict";
function b(b) {
return this.each(function () {
var c = a(this),
e = c.data("bs.alert");
e || c.data("bs.alert", e = new d(this)), "string" == typeof b && e[b].call(c)
})
}
var c = '[data-dismiss="alert"]',
d = function (b) {
a(b).on("click", c, this.close)
};
d.VERSION = "3.3.5", d.TRANSITION_DURATION = 150, d.prototype.close = function (b) {
function c() {
g.detach().trigger("closed.bs.alert").remove()
}
var e = a(this),
f = e.attr("data-target");
f || (f = e.attr("href"), f = f && f.replace(/.*(?=#[^\s]*$)/, ""));
var g = a(f);
b && b.preventDefault(), g.length || (g = e.closest(".alert")), g.trigger(b = a.Event("close.bs.alert")), b.isDefaultPrevented() || (g.removeClass("in"), a.support.transition && g.hasClass("fade") ? g.one("bsTransitionEnd", c).emulateTransitionEnd(d.TRANSITION_DURATION) : c())
};
var e = a.fn.alert;
a.fn.alert = b, a.fn.alert.Constructor = d, a.fn.alert.noConflict = function () {
return a.fn.alert = e, this
}, a(document).on("click.bs.alert.data-api", c, d.prototype.close)
}(jQuery), + function (a) {
"use strict";
function b(b) {
return this.each(function () {
var d = a(this),
e = d.data("bs.button"),
f = "object" == typeof b && b;
e || d.data("bs.button", e = new c(this, f)), "toggle" == b ? e.toggle() : b && e.setState(b)
})
}
var c = function (b, d) {
this.$element = a(b), this.options = a.extend({}, c.DEFAULTS, d), this.isLoading = !1
};
c.VERSION = "3.3.5", c.DEFAULTS = {
loadingText: "loading..."
}, c.prototype.setState = function (b) {
var c = "disabled",
d = this.$element,
e = d.is("input") ? "val" : "html",
f = d.data();
b += "Text", null == f.resetText && d.data("resetText", d[e]()), setTimeout(a.proxy(function () {
d[e](null == f[b] ? this.options[b] : f[b]), "loadingText" == b ? (this.isLoading = !0, d.addClass(c).attr(c, c)) : this.isLoading && (this.isLoading = !1, d.removeClass(c).removeAttr(c))
}, this), 0)
}, c.prototype.toggle = function () {
var a = !0,
b = this.$element.closest('[data-toggle="buttons"]');
if (b.length) {
var c = this.$element.find("input");
...
五、总结
一个优秀的网页应具备以下几个特点:
1.简洁实用
尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；
2.使用方便
要满足使用者的要求，网页适合使用，显示出其功能美；
3.整体性好
围绕一个统一的目标设计，强调整体的功能性；
4.形象突出
尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。
5.交互式强
发挥网络的优势，想方设法使每个使用者都参与到其中来。
六、更多推荐
【关注作者|获取更多源码（2000+个网页源码）|优质文章】；您的支持是我创作的动力！看到这里就【点赞收藏博文】，三连支持下吧，3Q！
Web前端网页制作、整站模板、3D炫酷效果、图片展示、文字效果、大学生毕业HTML、期末大作业模板案例等技术内容，有兴趣的联系我交流学习!
更多优质博客文章、网页模板点击以下链接查阅：仙女网页设计-CSDN博客。
标签：function,Web,网页,火锅,box,html,var,input,type From： https://blog.csdn.net/A240307/article/details/139205873