112. Web前端网页案例——【Bootstrap框架国风文化传媒响应式企业网站（ 4页）】大学生期末大作业 html5+css3+js-CSDN博客

♬♬♬欢迎光临我的CSDN！这里是Web前端网页案例大集汇，有各行各业的前端网页案例，每天会持续更新！如果你对Web前端网页的学习、开发有困惑，抑或是为Web前端网页期末大作业、课设毕设烦恼，在我这可以提供专业的解决方案，☎☏有兴趣的欢迎联系交流！请点赞关注，谢谢！❤❤❤更多网页案例推荐:

http://angella.blog.csdn.net

提示：以下是本篇文章正文内容，下面案例供参考：

一、网页概述

本实例应用html5+css3+js：Bootstrap框架、导航菜单、图片轮翻、无缝滚动插件、鼠标滑动特效、留言表单等。适用于大学生网页课程作业设计、公司网页制作等。响应式布局可以根据不同的设备屏幕大小自动调整页面布局，提高用户体验；本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。

二、网页文件

本网页共包含4个页面：

三、网页效果

以下是本篇文章正文内容，下面案例仅供参考（节选示例）：

四、代码展示

1.html

<!DOCTYPE html>
<html>
<head>
<title>首页</title>
<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />

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

<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />

<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Fashion Hair Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>

<link href='http://fonts.useso.com/css?family=Poiret+One|Lily+Script+One|Raleway:400,300,500,600,200,700' rel='stylesheet' type='text/css'>


<script src="js/jquery.easydropdown.js"></script>
<link href="css/nav.css" rel="stylesheet" type="text/css" media="all"/>
<style type="text/css">
body,td,th {
   font-family: "微软雅黑";
   color: #011210;
}
a {
   font-family: "微软雅黑";
}
body {
   margin-left: 2px;
   background-color: #FFFFFF;
}
h1,h2,h3,h4,h5,h6 {
   font-family: "微软雅黑";
}
</style>
<script src="js/modernizr.custom.js"></script>
</head>
<body text="#011210">
<div class="banner-bg" id="home">
   <div class="container">
           <div class="header">
           <div class="logo">
               <a href="index.html"><FONT face="微软雅黑"><h1>名况文化传媒</h1>
               <span style="color: #011210"><span><strong><span style="color: #07128C; font-style: normal; font-size: 1.1em; text-align: left; font-family: '微软雅黑'; font-weight: 300;">从此改变你的世界</span></strong></span><span style="color: #011210"><span></span></a>
               </div>
               <div class="top-nav">
                       <label class="mobile_menu" for="mobile_menu">
                       <span>Menu</span>
                       </label>
                       <input id="mobile_menu" type="checkbox">
                   <ul class="nav">
                       <li><span style="font-family: '微软雅黑'"><FONT face=微软雅黑 size=4><a class="active" href="index.html">名况首页</a></FONT></span><FONT face=微软雅黑 size=4><a class="active" href="index.html">　　</a></FONT></li>
                       <li><span style="color: #00B29F"><FONT face=微软雅黑 size=4><a href="about.html">关于名况</a></FONT></span><FONT face=微软雅黑 size=4><a href="about.html">　</a></FONT></li>
                       <li class="dropdown1">
                           <ul class="dropdown2">
                                   <li><a href="404.html">地产行业</a></li>
                                   <li><a href="404.html">教育咨询</a></li>
                                   <li><a href="404.html">广告策划</a></li>
                                   <li><a href="404.html">活动策划</a></li>
                           </ul>
                       </li>
                       <li><FONT face=微软雅黑 size=4><a href="portfolio.html">活动案例　　</a></FONT></li>
                       <li><FONT face=微软雅黑 size=4><a href="contact.html">联系我们 </a></FONT></li>
                   </ul>
               </div>
               <div class="clearfix"></div>
               </div>
                   <div id="top" class="callbacks_container">
                   <ul class="rslides" id="slider4">
                   <li>
                               <div class="banner-info">
                                   <h3>经典传承</h3>
                                   <lable> </lable>
                                   <p>长沙名况文化传媒有限公司一直致力于商业演出、品牌推广活动、广告策划、承接大型会议、会展以及演出全程承办、演唱会筹划组织、礼仪模特及各类艺员代理、赛事运营、舞美工程设计制作、舞台演艺等影视传媒制作服务。</p>
                               </div>
                           </li>
                           <li>
                               <div class="banner-info">
                               <h3>创意策划</h3>
                               <lable> </lable>
                                   <p>公司通过借鉴与学习各行业的先进经验，依靠强大的社会资源和网络支撑，结合湖南本土市场的传播特征和需求，形成了独具差异化的竞争体系，专注于品牌的整合营销传播，运用活动策划、公关传播、网络营销以及与之相关的策略与咨询服务，为客户量身定制最切合湖南市场环境的传播解决方案，帮助企业打造强势品牌，提高企业知名度、美誉度。</p>
                               </div>
                           </li>
                           <li>
                               <div class="banner-info">
                                   <h3>诚信专业</h3>
                                   <lable> </lable>
                                   <p>在竞争激烈的市场氛围中，我们秉承 “团结、务实、创新、守信”的服务宗旨，凭借专业的服务，以及全体员工的勤奋努力，致力于为客户打造精品项目服务.</p>
                               </div>
                           </li>
                       </ul>
                   </div>

...

2.CSS

代码如下（节选示例）：

body{
   margin:0;
   padding:0;
   background:#fff;
   font-family: 'Raleway', sans-serif;
}
body a{
   text-decoration:none;
   transition:0.5s all;
   -webkit-transition:0.5s all;
   -moz-transition:0.5s all;
   -o-transition:0.5s all;
   -ms-transition:0.5s all;
}
h1,h2,h3,h4,h5,h6{
   margin:0;
}
p{
   margin:0;
}
ul{
margin:0;
padding:0;
}
/*----*/
.logo {
float: left;
}
.logo a{
   display:block;
}
.logo a h1 {
   font-size: 4em;
   font-weight: 400;
   color: #00b29f;
   font-family: "微软雅黑";
}
.logo a span {
font-weight: 400;
color: #fff;
font-size: 1.1em;
font-family: 'Poiret One', cursive;
text-align: right;
font-style: italic;
margin: 0 0em 0 3em;

}
.banner-bg{
   background:url(../images/banner.jpg) no-repeat;
   background-size:cover;
   -webkit-background-size: cover;
-o-background-size: cover;
-ms-background-size: cover;
-moz-background-size: cover;
   min-height: 900px;
   position:relative;
}
a.shop{
   display:inline-block;
   float:left;
   margin:9px 0 0 30px;
}
.dwn{
   position:absolute;
   bottom:12%;
   left:48%;
}
.top-nav {
float: right;
margin-top: 1.5em;
position: relative;
}
.header{
   margin-top:1.3em;
}
.nav > li > a > img {
max-width: none;
width: 73%;
}
.top-nav{
   float:right;
   margin-top: 0px;
}
.copyrights{
   text-indent:-9999px;
   height:0;
   line-height:0;
   font-size:0;
   overflow:hidden;
}
/*--slide--*/
.banner-info {
margin-top:20%;

}

...

3.JS

代码如下（节选示例）：

/*!
* Bootstrap v3.2.0 (http://getbootstrap.com)
* Copyright 2011-2014 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
if("undefined"==typeof jQuery)throw new Error("Bootstrap's JavaScript requires 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.2.0",d.prototype.close=function(b){function c(){f.detach().trigger("closed.bs.alert").remove()}var d=a(this),e=d.attr("data-target");e||(e=d.attr("href"),e=e&&e.replace(/.*(?=#[^\s]*$)/,""));var f=a(e);b&&b.preventDefault(),f.length||(f=d.hasClass("alert")?d:d.parent()),f.trigger(b=a.Event("close.bs.alert")),b.isDefaultPrevented()||(f.removeClass("in"),a.support.transition&&f.hasClass("fade")?f.one("bsTransitionEnd",c).emulateTransitionEnd(150):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.2.0",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]()),d[e](null==f[b]?this.options[b]:f[b]),setTimeout(a.proxy(function(){"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");"radio"==c.prop("type")&&(c.prop("checked")&&this.$element.hasClass("active")?a=!1:b.find(".active").removeClass("active")),a&&c.prop("checked",!this.$element.hasClass("active")).trigger("change")}a&&this.$element.toggleClass("active")};var d=a.fn.button;a.fn.button=b,a.fn.button.Constructor=c,a.fn.button.noConflict=function(){return a.fn.button=d,this},a(document).on("click.bs.button.data-api",'[data-toggle^="button"]',function(c){var d=a(c.target);d.hasClass("btn")||(d=d.closest(".btn")),b.call(d,"toggle"),c.preventDefault()})}(jQuery),+function(a){"use strict";function b(b){return this.each(function(){var d=a(this),e=d.data("bs.carousel"),f=a.extend({},c.DEFAULTS,d.data(),"object"==typeof b&&b),g="string"==typeof b?b:f.slide;e||d.data("bs.carousel",e=new c(this,f)),"number"==typeof b?e.to(b):g?e[g]():f.interval&&e.pause().cycle()})}var c=function(b,c){this.$element=a(b).on("keydown.bs.carousel",a.proxy(this.keydown,this)),this.$indicators=this.$element.find(".carousel-indicators"),this.options=c,this.paused=this.sliding=this.interval=this.$active=this.$items=null,"hover"==this.options.pause&&this.$element.on("mouseenter.bs.carousel",a.proxy(this.pause,this)).on("mouseleave.bs.carousel",a.proxy(this.cycle,this))};c.VERSION="3.2.0",c.DEFAULTS={interval:5e3,pause:"hover",wrap:!0},c.prototype.keydown=function(a){switch(a.which){case 37:this.prev();break;case 39:this.next();break;default:return}a.preventDefault()},c.prototype.cycle=function(b){return b||(this.paused=!1),this.interval&&clearInterval(this.interval),this.options.interval&&!this.paused&&(this.interval=setInterval(a.proxy(this.next,this),this.options.interval)),this},c.prototype.getItemIndex=function(a){return this.$items=a.parent().children(".item"),this.$items.index(a||this.$active)},c.prototype.to=function(b){var c=this,d=this.getItemIndex(this.$active=this.$element.find(".item.active"));return b>this.$items.length-1||0>b?void 0:this.sliding?this.$element.one("slid.bs.carousel",function(){c.to(b)}):d==b?

...