目录
欢迎来到我的优快云主页！您的支持是我创作的动力！Web前端网页制作、网页完整代码、大学生期末大作业案例模板完整代码、技术交流等，有兴趣的联系我交流学习!更多优质博客文章、网页模板点击以下链接查阅：
5000+网页案例完整代码，主题涵盖30+种类型:
一、网页简介
一、网页概述
本实例应用html5+css3+js： 导航菜单、图片轮翻、三级页面、下拉菜单、无缝滚动插件、鼠标滑动特效等。适用于大学生网页课程作业设计、公司网页制作等。响应式布局可以根据不同的设备屏幕大小自动调整页面布局，提高用户体验；本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。
二、网页文件
本网页实例共包含7个页面：
三、网页效果
以下是本篇文章正文内容，下面案例仅供参考（节选示例）：
四、代码展示
1.html
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>鑫舆汇</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/nav.css" rel="stylesheet">
<link href="css/css.css" rel="stylesheet">
<style>
.slider{max-width:1920px;text-align:center;}
</style>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="heads">
<div class="top">
<span class="headerRight"><img src="images/phone.png" width="273" height="19" /></span>
</div><!--top/-->
</div><!--heads/-->
<h1 class="xlogo">
<a href="index.html"><img src="images/logo.png" width="210" height="77" /></a>
</h1>
<nav class="nav-collapse">
<ul>
<li class="navCur"><a href="index.html">首页</a></li>
<li><a href="recommend.html">推荐车源</a>
<div class="chilNav">
<div class="row chilNavCar">
<div class="col-sm-6 col-md-2">
<div class="thumbnail">
<img data-src="holder.js/300x300" src="images/car1.jpg" alt="...">
<div class="caption">
<h3>43.8万</h3>
<p>魅•力之承 2014捷豹城市巡展”</p>
<p><a href="proinfo.html" class="more">查看更多>></a></p>
</div>
</div>
</div><!--col-sm-6 col-md-2/-->
<div class="col-sm-6 col-md-2">
<div class="thumbnail">
<img data-src="holder.js/300x300" src="images/car1.jpg" alt="...">
<div class="caption">
<h3>43.8万</h3>
<p>魅•力之承 2014捷豹城市巡展”</p>
<p><a href="proinfo.html" class="more">查看更多>></a></p>
</div>
</div>
</div><!--col-sm-6 col-md-2/-->
<div class="col-sm-6 col-md-2">
<div class="thumbnail">
<img data-src="holder.js/300x300" src="images/car1.jpg" alt="...">
<div class="caption">
<h3>43.8万</h3>
<p>魅•力之承 2014捷豹城市巡展”</p>
<p><a href="proinfo.html" class="more">查看更多>></a></p>
</div>
</div>
</div><!--col-sm-6 col-md-2/-->
<div class="col-sm-6 col-md-2">
<div class="thumbnail">
<img data-src="holder.js/300x300" src="images/car1.jpg" alt="...">
<div class="caption">
<h3>43.8万</h3>
<p>魅•力之承 2014捷豹城市巡展”</p>
<p><a href="proinfo.html" class="more">查看更多>></a></p>
</div>
</div>
</div><!--col-sm-6 col-md-2/-->
<div class="col-sm-6 col-md-2">
<div class="thumbnail">
<img data-src="holder.js/300x300" src="images/car1.jpg" alt="...">
<div class="caption">
<h3>43.8万</h3>
<p>魅•力之承 2014捷豹城市巡展”</p>
<p><a href="proinfo.html" class="more">查看更多>></a></p>
</div>
</div>
</div><!--col-sm-6 col-md-2/-->
</div><!--row/-->
</div><!--chilNav/-->
</li>
<li><a href="select.html">选车中心</a></li>
<li><a href="service.html">金融服务</a>
<div class="chilNav" id="chilNav">
<div class="chiNava"><a href="service.html">信贷</a></div>
<div class="chiNava"><a href="service.html">车险</a></div>
</div><!--chilNav/-->
</li>
<li><a href="business.html">买卖流程</a></li>
<li><a href="contact.html">联系我们</a></li>
</ul>
</nav>
<div class="heights"> </div>
<!--banner-->
<div id="sliderA" class="slider">
<img src="images/banner1.jpg" data-plugin-slide-caption="" />
<img src="images/banner2.jpg" data-plugin-slide-caption="" />
<img src="images/banner3.jpg" data-plugin-slide-caption="" />
<img src="images/banner4.jpg" data-plugin-slide-caption="" />
</div>
<!--banner-->
<div class="hengfu hfBg1">
<div class="hengfuParBox">
<div class="hengfuPar">
<h3>从0起步 成就不止</h3>
<p>捷豹XJL/XF 全系车型“30/70”零利率尊贷领享计划<br />
尊享首付30%，24期月供0利率。轻松拥有捷豹，率享人生成就。</p>
<div class="more"><a href="proinfo.html"></a></div>
</div><!--hengfuPar/-->
</div><!--hengfuParBox/-->
</div><!--hengfu/-->
<div class="hengfu hfBg2">
<div class="hengfuParBox">
<div class="hengfuPar">
<h3>“33”零利优贷金融支持计划</h3>
<p>率先驾驭捷豹新一代高性能完美跑车</p>
<div class="more"><a href="proinfo.html"></a></div>
</div><!--hengfuPar/-->
</div><!--hengfuParBox/-->
</div><!--hengfu/-->
<div class="hengfu hfBg3">
<div class="hengfuParBox">
<div class="hengfuPar">
<h3>捷豹XF 动感成就魅力</h3>
<p>即日起订购捷豹XF, 获锋尚运动装备，晋级捷豹风尚圈<br />
精英会员。</p>
<div class="more"><a href="proinfo.html"></a></div>
</div><!--hengfuPar/-->
</div><!--hengfuParBox/-->
</div><!--hengfu/-->
<div class="removeHengfu hfBg1">
<div class="hengfuLeft">
<img src="images/hengfu1_1.jpg" width="465" height="216" />
</div><!--hengfuLeft/-->
<div class="hengfuParBox">
<div class="hengfuPar">
<h3>从0起步 成就不止</h3>
<p>捷豹XJL/XF 全系车型“30/70”零利率尊贷领享计划<br />
尊享首付30%，24期月供0利率。轻松拥有捷豹，率享人生成就。</p>
<div class="more"><a href="proinfo.html">查看更多</a></div>
</div><!--hengfuPar/-->
</div><!--hengfuParBox/-->
<div class="clearfix"></div>
</div><!--removeHengfu/-->
<div class="removeHengfu hfBg2">
<div class="hengfuLeft">
<img src="images/hengfu3_1.jpg" width="465" height="216" />
</div><!--hengfuLeft/-->
<div class="hengfuParBox">
<div class="hengfuPar">
<h3>“33”零利优贷金融支持计划</h3>
<p>率先驾驭捷豹新一代高性能完美跑车</p>
<div class="more"><a href="proinfo.html">查看更多</a></div>
</div><!--hengfuPar/-->
</div><!--hengfuParBox/-->
<div class="clearfix"></div>
</div><!--removeHengfu/-->
<div class="removeHengfu hfBg1">
<div class="hengfuLeft">
<img src="images/hengfu2_1.jpg" width="465" height="216" />
</div><!--hengfuLeft/-->
<div class="hengfuParBox">
<div class="hengfuPar">
<h3>捷豹XF 动感成就魅力</h3>
<p>即日起订购捷豹XF, 获锋尚运动装备，晋级捷豹风尚圈<br />
精英会员。</p>
<div class="more"><a href="proinfo.html">查看更多</a></div>
</div><!--hengfuPar/-->
</div><!--hengfuParBox/-->
<div class="clearfix"></div>
</div><!--removeHengfu/-->
<h4 class="h4Title">搜搜其他上海在售二手车</h4>
<div class="selectBox">
<table width="100%">
<tr>
<td class="sel1"><h5 class="h5Title">价位：</h5></td>
<td>
<div class="sel2">
<a href="#">7-10万</a>
<a href="#">10-15万</a>
<a href="#">15-20万</a>
<a href="#">20-30万</a>
<a href="#">30-50万</a>
<a href="#">50-80万</a>
<a href="#">80万以上</a>
</div><!--sel2/-->
</td>
</tr>
<tr>
<td class="sel1"><h5 class="h5Title">品牌：</h5></td>
<td>
...
2.CSS
代码如下（节选示例）：
@charset "utf-8";
/* CSS Document */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, select{margin: 0;padding: 0;border: 0;}
table{ border-collapse:collapse;}
body{font-size:12px;color:#333; background:#e7e6e6;}
img,a{border:0; text-decoration:none;}
ol, ul {list-style: none; }
.clears{ clear:both;}
a{color:#333;}
a:hover{color:#F00;}
/*header*/
.heads{
width:100%;
height:40px;
background:url(../images/headerBg.jpg) left top repeat-x;
position:relative;
}
.top{
position:relative;
width:85%;
height:40px;
margin:0 auto;
}
.headerRight{
position:absolute;
right:0;top:9px;
color:#fff;
}
/*logo*/
.xlogo{
padding:10px;
height:97px;
text-align:center;
background:url(../images/logoBg.jpg) left top repeat-x;}
/*banner*/
/* slider
----------------------------------------------------------*/
.slide > * { position:relative;
max-width: 100%;
}
.slider .slide-prev {
cursor: pointer;
height: 48px;
width: 48px;
position: absolute;
left: 0;
top: 50%;
margin-top: -24px;
background-color: rgba(255,255,255,0.8);
padding: 0px;
}
.slider .slide-next {
cursor: pointer;
height: 48px;
width: 48px;
position: absolute;
right: 0;
top: 50%;
margin-top: -24px;
background-color: rgba(255,255,255,0.8);
padding: 0px;
}
.slider .slide-next:hover, .slider .slide-prev:hover {
background-color: rgba(255,255,255,0.9);
}
.slider .slide-next img, .slider .slide-prev img {
position: relative;
top: 0;
left: 0;
max-height: 100%;
max-width: 100%;
}
.es-caption {
position: absolute;
bottom: 0;
text-align: center;
background-color: rgba(0,0,0,0.8);
color: #fff;
font-size: 14px;
padding: 16px;
margin: 10px;
width: auto;
left: 0;
right: 0;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-khtml-border-radius: 6px;
border: 1px solid rgba(255,255,255,0.3);
}
ul.es-pager {
display: block;
width: 100%;
text-align: center;
margin: 5px 0 0 0;
padding: 0;
line-height: 0px;
}
ul.es-pager li {
display: inline-block;
margin: 0;
padding: 0;
height: 16px;
width: 16px;
/*background-image: url("../Images/pagericon.png");*/
background-repeat: no-repeat;
background-position: 0 -16px;
cursor: pointer;
}
ul.es-pager li:hover, ul.es-pager li.act {
background-position: 0 0;
}
ul.es-pager li.act {
cursor: default;
}
...
3.JS
代码如下（节选示例）：
(function (document, window, index) {
"use strict";
var responsiveNav = function (el, options) {
var computed = !!window.getComputedStyle;
// getComputedStyle polyfill
if (!computed) {
window.getComputedStyle = function(el) {
this.el = el;
this.getPropertyValue = function(prop) {
var re = /(\-([a-z]){1})/g;
if (prop === "float") {
prop = "styleFloat";
}
if (re.test(prop)) {
prop = prop.replace(re, function () {
return arguments[2].toUpperCase();
});
}
return el.currentStyle[prop] ? el.currentStyle[prop] : null;
};
return this;
};
}
/* exported addEvent, removeEvent, getChildren, setAttributes, addClass, removeClass, forEach */
// fn arg can be an object or a function, thanks to handleEvent
// read more at: http://www.thecssninja.com/javascript/handleevent
var addEvent = function (el, evt, fn, bubble) {
if ("addEventListener" in el) {
// BBOS6 doesn't support handleEvent, catch and polyfill
try {
el.addEventListener(evt, fn, bubble);
} catch (e) {
if (typeof fn === "object" && fn.handleEvent) {
el.addEventListener(evt, function (e) {
// Bind fn as this and set first arg as event object
fn.handleEvent.call(fn, e);
}, bubble);
} else {
throw e;
}
}
} else if ("attachEvent" in el) {
// check if the callback is an object and contains handleEvent
if (typeof fn === "object" && fn.handleEvent) {
el.attachEvent("on" + evt, function () {
// Bind fn as this
fn.handleEvent.call(fn);
});
} else {
el.attachEvent("on" + evt, fn);
}
}
},
removeEvent = function (el, evt, fn, bubble) {
if ("removeEventListener" in el) {
try {
el.removeEventListener(evt, fn, bubble);
} catch (e) {
if (typeof fn === "object" && fn.handleEvent) {
el.removeEventListener(evt, function (e) {
fn.handleEvent.call(fn, e);
}, bubble);
} else {
throw e;
}
}
} else if ("detachEvent" in el) {
if (typeof fn === "object" && fn.handleEvent) {
el.detachEvent("on" + evt, function () {
fn.handleEvent.call(fn);
});
} else {
el.detachEvent("on" + evt, fn);
}
}
},
getChildren = function (e) {
if (e.children.length < 1) {
throw new Error("The Nav container has no containing elements");
}
// Store all children in array
var children = [];
// Loop through children and store in array if child != TextNode
for (var i = 0; i < e.children.length; i++) {
if (e.children[i].nodeType === 1) {
children.push(e.children[i]);
}
}
return children;
},
setAttributes = function (el, attrs) {
for (var key in attrs) {
el.setAttribute(key, attrs[key]);
}
},
addClass = function (el, cls) {
if (el.className.indexOf(cls) !== 0) {
el.className += " " + cls;
el.className = el.className.replace(/(^\s*)|(\s*$)/g,"");
}
},
removeClass = function (el, cls) {
var reg = new RegExp("(\\s|^)" + cls + "(\\s|$)");
el.className = el.className.replace(reg, " ").replace(/(^\s*)|(\s*$)/g,"");
},
// forEach method that passes back the stuff we need
forEach = function (array, callback, scope) {
for (var i = 0; i < array.length; i++) {
callback.call(scope, i, array[i]);
}
};
var nav,
opts,
navToggle,
styleElement = document.createElement("style"),
htmlEl = document.documentElement,
hasAnimFinished,
isMobile,
navOpen;
var ResponsiveNav = function (el, options) {
var i;
// Default options
this.options = {
animate: true, // Boolean: Use CSS3 transitions, true or false
transition: 284, // Integer: Speed of the transition, in milliseconds
label: "Menu", // String: Label for the navigation toggle
insert: "before", // String: Insert the toggle before or after the navigation
customToggle: "", // Selector: Specify the ID of a custom toggle
closeOnNavClick: false, // Boolean: Close the navigation when one of the links are clicked
openPos: "relative", // String: Position of the opened nav, relative or static
navClass: "nav-collapse", // String: Default CSS class. If changed, you need to edit the CSS too!
navActiveClass: "js-nav-active", // String: Class that is added to <html> element when nav is active
jsClass: "js", // String: 'JS enabled' class which is added to <html> element
init: function(){}, // Function: Init callback
open: function(){}, // Function: Open callback
close: function(){} // Function: Close callback
};
// User defined options
for (i in options) {
this.options[i] = options[i];
}
...
五、总结
设计一个样式美观又人性化的网页，除了具备扎实的专业知识，还需具备美学和人机工程学等相关知识，优秀的网页应具备以下几个特点:
1.简洁实用
尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；
2.使用方便
要满足使用者的要求，网页适合使用，显示出其功能美；
3.整体性好
围绕一个统一的目标设计，强调整体的功能性；
4.形象突出
尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。
5.交互式强
发挥网络的优势，想方设法使每个使用者都参与到其中来。
更多优质博客文章、完整代码案例模板，点击以下链接查阅：
Web前端网页制作、大学生期末大作业、课程设计、毕业设计、完整代码案例模板、Web前端网页定制、教学课程、学习资料等，有需要的添加以下微信交流👇🏻👇🏻👇🏻
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
