487.大学生HTML5期末大作业 —【国风文化传媒企业响应式网页(5页)】 Web前端网页制作 html5+css3+js-优快云博客

本文链接：https://blog.youkuaiyun.com/VX_L_5201314168/article/details/146356300

欢迎来到我的优快云主页！您的支持是我创作的动力！Web前端网页制作、网页完整代码、大学生期末大作业案例模板完整代码、技术交流等，有兴趣的联系我交流学习!更多优质博客文章、网页模板点击以下链接查阅：

仙女网页设计-优快云博客

5000+网页案例完整代码，主题涵盖30+种类型:

一、网页简介

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

二、网页文件

本网页实例共包含5个页面：

三、网页效果

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

四、代码展示

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"><FONT face=微软雅黑 size=4><a href="typography.html">　服务项目　　</a></FONT>
                           <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>
                   
                   <script src="js/responsiveslides.min.js"></script>
               <script>
                   // You can also use "$(window).load(function() {"
                   $(function () {
                   // Slideshow 4
                   $("#slider4").responsiveSlides({
                       auto: true,
                       pager: true,
                       nav: true,
                       speed: 500,
                       namespace: "callbacks",
                       before: function () {
                       $('.events').append("<li>before event fired.</li>");
                       },
                       after: function () {
                       $('.events').append("<li>after event fired.</li>");
                       }
                   });

                   });
               </script>
           
       </div>
   </div>

<div class="banner-bottom-section">
   <div class="container">
       <div class="banner-bottom-info">
           <div class="col-md-3 b-grids">
                   <i class="s1"> </i>
                   <div class="album-box">
               <h4>创新</h4>
               <p>弘扬民族优秀文化，倾力打造精品项目</p>
           </div>
       </div>
           <div class="col-md-3 b-grids">
           <i class="s2"> </i>
           <div class="album-box">
               <h4>进取</h4>
               <p>开展多种合作交流，实现双赢互利发展</p>
               </div>
           </div>
           <div class="col-md-3 b-grids">
           <i class="s3"> </i>
           <div class="album-box">
               <h4>诚信</h4>
               <p>吸纳培养优秀人才，塑造公司良好品牌</p>
               </div>
           </div>
           <div class="col-md-3 b-grids lost">
           <i class="s4"> </i>
           <div class="album-box">
               <h4>协作</h4>
               <p>愿与业内有识之士一道，共谋发展，共同成长，携手并进，共创未来</p>
               </div>
           </div>
           <div class="clearfix"></div>
       </div>
</div>
</div>

   <div class="about">
   <div class="container">
       <h3 class="tittle">关于我们</h3>
       <lable class="two"> </lable>
       <h3 class="sub-text">长沙名况文化传媒有限公司</h3>
       <p>公司专注活动策划执行、网络营销推广、品牌策划设计，以高标准、专业化、综合型的品质服务，以整体理念和完善执行力，完美诠释了国内外众多品牌的个性精髓。名况文化传媒为客户量<span style="width: auto; font-family: '微软雅黑', '宋体';">身定制最切合湖南市场环境的传播解决方案，帮助企业打造强势品牌，提高企业知名度、美誉度。自成立以来，名况文化传媒已在湖南传媒领域树立了标杆地位，在汽车、家电、金融、消费品、生物制药、IT高科技行业、房地产、建材家具等多领域服务积累了丰富的专业经验和良好的口碑。凭借多年的经验和传播实践，名况文化传媒在业界拥有追求卓越和实效的良好声誉。我们有幸为众多中国领先企业提供专业服务，并为这些品牌的发展和增值倍感自豪</span>。</p>

   </div>
</div>
<div class="copyrights">Collect from <a href="http://www.17sucai.com/" >企业网站</a></div>
   
<div class="hair-section">
   <div class="container">
       <h3 class="tittle">精彩纷呈</h3>
       <lable class="two"> </lable>
       <h3 class="sub-text">活动报名专区</h3>
   <div class="grid">
           <div class="col-md-4 h-f">
                   <figure class="effect-jazz">
                   <img src="images/s1.jpg" alt="img25"/>
                       <figcaption>
                           <h2>报名 <span>开始</span></h2>
                           <p>中国旅游小姐环球大赛</p>
                           <a href="#">View more</a>
                       </figcaption>
                   </figure>
                   <div class="hf-text"><h5>湖南赛区</h5><p>招商合作</p></div>
               </div>
               <div class="col-md-4 h-f">
                   <figure class="effect-jazz">
                       <img src="images/s2.jpg" alt="img25"/>
                       <figcaption>
                           <h2>报名 <span>开始</span></h2>
                           <p>中国少儿艺术之星大赛</p>
                           <a href="#">View more</a>
                       </figcaption>
                   </figure>
                   <div class="hf-text"><h5>开始招募</h5><p>招商合作</p></div>
               </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%;

}
.banner-info lable{
width: 12%;
height: 10px;
background: #00b29f;
display: inline-block;
}
.banner-info h3 {
   font-size: 3em;
   font-weight: 400;
   color: #011210;
   font-family: "微软雅黑", "宋体";
}
.banner-info p {
   font-size: 1.1em;
   font-weight: 400;
   color: #011210;
   margin: 0.5em 0 0;
   width: 50%;
   line-height: 1.8em;
   font-family: "微软雅黑";
}
#slider2,
#slider3 {
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
margin: 0 auto;
}
.rslides_tabs li:first-child {
margin-left: 0;
}
.rslides_tabs .rslides_here a {
background: rgba(255,255,255,.1);
color: #fff;
font-weight: bold;
}