651. 大学生HTML期末大作业 ―【蓝色的燃气公司网页】 Web前端网页制作 html+css+js-CSDN博客

本文链接：https://blog.csdn.net/A240307/article/details/143983055

欢迎光临仙女的网页世界！这里有各行各业的Web前端网页制作的案例，样式齐全新颖，并持续更新！感谢CSDN，提供了这么好的知识学习、技术交流的平台，让我们在这里相遇，小伙伴们，来吧，让我们一起开启Web前端网页制作的奇妙之旅！

说起Web前端，大学开启这扇技术之门以来，一切起始于兴趣爱好和专业钻研。自16年中大研究生毕业步入社会工作以来，才真正开启了这段奇妙的旅行！在一次次需求分析、成品交付和客户服务的过程中，进行了一次又一次的知识应用的实践和验证。学以致用，实践出真知！从最初的Web前端的迷途小书童到如今的技术专家，多年的服务客户和服务大学生的实践经验，早就驾轻就熟！

奇妙之处在于：当你得到客户的认可、公司的赞赏和同事的敬仰，尤其是业余时间为广大的大学生提供各种各样的帮助和指引，学弟学妹们一致好评，认为学姐是他们的榜样的时候，你会发现，知识的应用除了体现自身价值，还能实现自我满足！这种感觉是相当奇妙的！

我在CSDN的奇妙旅行，除了学习其他知识和持续发布优质的网页实例之外，后续时间允许的情况下，我会发布前端相关知识的学习和应用的教程。目前提供的服务类型包括：Web前端网页制作的专题研究辅导、网页定制、大学生课程作业辅导、毕设辅导、网页模板源码、教程资料、技术咨询，以及其他有偿或无偿的服务。如有需要，欢迎随时咨询！能满足你们所需，是我的荣幸！

非常感谢大家的关注和点赞，你们的关注和点赞是我持续创作的动力，谢谢！

一、网页概述

本实例应用html+css+js：导航菜单、图片轮翻、三级页面、无缝滚动、鼠标滑动特效、地图功能等。本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。

二、网页文件

本网页共包含9个页面：

三、网页效果

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

四、代码展示

1.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>燃气</title>
<link href="css/index.css" type="text/css" rel="stylesheet"/>
<link href="css/top.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>
<script src="js/jquery-1.8.3.min.js"></script>

</head>

<body>

<div class="nav">
   <div class="nav_l">
   <a href="#"><img src="images/logo.jpg" /></a>
</div>
<div class="nav_r">
   <ul>
   <li><a href="#" class="this">首页</a></li>
<li><a href="about us.html">关于我们</a></li>
<li><a href="news.html">新闻中心</a></li>
<li><a href="service.html">服务项目</a></li>
<li><a href="successful.html">成功案例</a></li>
<li><a href="safety.html">安全知识</a></li>
<li><a href="contact.html">联系我们</a></li>
   </ul>
</div>
</div>

<div class="banner">
   <div class="banner_box">
<ul>
<li><img src="images/banner_a.jpg" /></li>
<li><img src="images/banner.jpg" /></li>
<li><img src="images/banner_b.jpg" /></li>
</ul>
<div class="white">
<span class="on"></span>
<span></span>
<span></span>
</div>
    </div>
</div>

<div class="main1">
   <div class="us">
   <div class="we">
   <b>关于我们</b>
       <span>我们提供更加安全、便捷、优质的服务</span>
<em>ABOUT US</em>
</div>
</div>
</div>

<div class="main2">
   <div class="main2_l">
   <img src="images/main2_l.jpg" />
</div>
<div class="main2_r">
   <h1><span>公司简介</span></h1>
<p>xx市燃气有限公司前身为xx燃气公司，组件成立于1995年。公司扎根从化近二十年，担负着xxx广大居民及广大企业的瓶装液化石油气（LPG）安全生产和供应服务的重任。公司有着完善的储存、充装先进设施和完整的配送、分销体系，在全市五镇三街均设立了十多间门市部。</p>
<h1><span>经营理念</span></h1>
<p>xxx燃气有限公司秉承‘优质、高效、诚信’的企业生产和经营理念，不断创新业务模式，提高服务质量。</p>
</div>
</div>

<div class="main3a">
   <div class="main3_">
   <div class="service">
   <b>企业优势</b>
<span>我们提供更加安全、便捷、优质的服务</span>
<em>SERVICE ADVANTGE</em>
</div>
</div>
</div>
<div class="main3b">
   <div class="main3b_">
       <ul>
   <li>
   <img src="images/main3_1.jpg" />
<h1>自营</h1>
<p>秉承‘优质、高效、诚信’的企业生产和经营理念，不断创新业务模式，不断的提高我们的服务质量。</p>
    </li>
<li>
   <img src="images/main3_2.jpg" />
<h1>透明</h1>
<p>秉承‘优质、高效、诚信’的企业生产和经营理念，不断创新业务模式，不断的提高我们的服务质量。</p>
    </li>
<li>
   <img src="images/main3_3.jpg" />
<h1>高效</h1>
<p>秉承‘优质、高效、诚信’的企业生产和经理念，不断创新业务模式，不断的提高我们的服务质量。</p>
    </li>
</ul>
</div>
</div>

...

2.CSS

代码如下（节选示例）：

@charset "utf-8";
/* CSS Document */
*{ margin:0px; padding:0px}
img{ border:none}
li{ list-style:none}
a{ text-decoration:none}
body{ font-size:12px; font-family:"微软雅黑"}

/*banner*/
.banner{ width:100%; height:500px;}
.banner_box{ width:1920; height:500px; margin:0 auto; position:relative; overflow:hidden}
.banner_box ul li img{ width:1920px; height:500px; position:absolute; left:50%; margin-left:-960px}
.white{ width:81px; height:14px; position:absolute; left:50%; margin-left:-40px; bottom:16px}
.white span{ float:left; width:14px; height:14px; background:url(../images/banner_bg2.png); margin-right:13px}
.white span.on{ background:url(../images/banner_bg1.png)}
.white span:hover{ background:url(../images/banner_bg1.png)}

/*内容一*/
.main1{ width:100%; height:164px; border-bottom:1px solid #e5e5e5; overflow:hidden;}
.us{ width:1200px; height:164px; margin:0 auto;}
.we{ width:296px; height:64px; margin:60px auto 38px; border:1px solid #999999; line-height:64px; text-align:center; position:relative; color:#989898; font-size:14px}
.we b{ font-size:30px; font-family:"微软雅黑"; color:#3e3e3e; font-weight:normal; position:absolute; left:85px; top:-22px; background:#FFF; height:40px; line-height:40px; padding:0 5px}
.we em{ font-size:24px; font-style:normal; position:absolute; top:45px; left:90px; background:#FFF; height:40px; line-height:40px; padding:0 5px}

/*内容二*/
.main2{ width:1200px; height:373px; margin:0 auto; padding-top:22px}
.main2_l{ width:600px; height:331px; float:left}
.main2_r{ width:565px; height:331px; float:right}
.main2_r h1{ height:35px; line-height:35px; background:url(../images/main2_rbg.jpg); font-size:18px; font-weight:normal; color:#333333;font-family:"微软雅黑";}
.main2_r h1 span{ margin-left:30px}
.main2_r p{ line-height:35px; margin:0 50px 0 30px; letter-spacing:1px; text-indent:2em; color:#777777; font-size:14px}

/*内容三a*/
.main3a{ width:100%; height:164px; background:#084d8e; border-bottom:1px solid #5ba9f3; overflow:hidden;}
.main3_{ width:1200px; height:164x; margin:0 auto;}
.service{ width:296px; height:64px; margin:60px auto 38px; border:1px solid #5ba9f1; line-height:64px; text-align:center; position:relative; color:#5499dc; font-size:14px}
.service b{ font-size:30px; font-family:"微软雅黑"; color:#ffffff; font-weight:normal; position:absolute; left:85px; top:-22px; background:#084d8e; height:40px; line-height:40px; padding:0 5px}
.service em{ font-size:24px; font-style:normal; position:absolute; top:45px; left:26px; background:#084d8e; height:40px; line-height:40px; padding:0 5px; color:#5ba9f3}
/*内容三b*/
.main3b{ width:100%; height:396px; background:#084d8e}
.main3b_{ width:1200px; height:396px; margin:0 auto}
.main3b_ ul li{ float:left; width:230px; margin:34px 10px auto 120px}
.main3b_ ul li img{ margin-left:24px}
.main3b_ ul li h1{ text-align:center; color:#fff; font-family:"微软雅黑"; font-weight:normal; line-height:65px}
.main3b_ ul li p{ color:#8ac5fd; line-height:20px; letter-spacing:1px}

/*内容四a*/
.main4a{ width:100%; height:164px; border-bottom:1px solid #e5e5e5; overflow:hidden;}
.main4a_{ width:1200px; height:164x; margin:0 auto;}
.case{ width:296px; height:64px; margin:60px auto 38px; border:1px solid #999999; line-height:64px; text-align:center; position:relative; color:#989898; font-size:14px}
.case b{ font-size:30px; font-family:"微软雅黑"; color:#3e3e3e; font-weight:normal; position:absolute; left:80px; top:-22px; background:#FFF; height:40px; line-height:40px; padding:0 5px}
.case em{ font-size:24px; font-style:normal; position:absolute; top:45px; left:40px; background:#FFF; height:40px; line-height:40px; padding:0 5px; color:#989898}
/*内容四b*/
.main4b{ width:100%; height:396px; }
.main4b_{ width:1200px; height:331px; margin:0 auto; padding-top:24px; overflow:hidden}
.main4b_ ul li{ float:left; margin-right:53px; width:260px; height:330px}
.box a.left{ background:url(../images/case_l.jpg); position:absolute; width:30px; height:60px; top:150px; left:-40px;}
.box a.right{ background:url(../images/case_r.jpg); position:absolute; width:30px; height:60px; top:150px; right:-40px;}
.box{width:1200px; height:331px; margin:0 auto;position:relative;}

/*内容五a*/
.main5a{ width:100%; height:164px; background:#cccccc; border-bottom:1px solid #b5b5b5; overflow:hidden;}
.main5a_{ width:1200px; height:164x; margin:0 auto;}
.contact{ width:296px; height:64px; margin:60px auto 38px; border:1px solid #666666; line-height:64px; text-align:center; position:relative; color:#777777; font-size:14px}
.contact b{ font-size:30px; font-family:"微软雅黑"; color:#222222; font-weight:normal; position:absolute; left:85px; top:-22px; background:#cccccc; height:40px; line-height:40px; padding:0 5px}
.contact em{ font-size:24px; font-style:normal; position:absolute; top:45px; left:75px; background:#cccccc; height:40px; line-height:40px; padding:0 5px; color:#666666}
/*内容五b*/
.main5b{ width:100%; height:396px; background:#cccccc}
.main5b_{ width:1200px; height:374px; margin:0 auto; padding-top:22px}

/*内容六a*/
.main6a{ width:100%; height:164px; border-bottom:1px solid #b5b5b5; overflow:hidden;}
.main6_{ width:1200px; height:164x; margin:0 auto;}
.partner{ width:296px; height:64px; margin:60px auto 38px; border:1px solid #999999; line-height:64px; text-align:center; position:relative; color:#999999; font-size:14px}
.partner b{ font-size:30px; font-family:"微软雅黑"; color:#222222; font-weight:normal; position:absolute; left:85px; top:-22px; background:#fff; height:40px; line-height:40px; padding:0 5px}
.partner em{ font-size:24px; font-style:normal; position:absolute; top:45px; left:92px; background:#fff; height:40px; line-height:40px; padding:0 5px; color:#999999}
/*内容六b*/
.main6b{ width:100%; height:185px}
.main6b_{ width:1200px; height:131px; margin:0 auto; padding-top:54px}
.main6b_ ul li{ float:left; margin-right:73px}
.main6b_ ul li.logo{ margin-right:0px; float:right}

...

3.JS

代码如下（节选示例）：

// JavaScript Document
//无缝滚动
var leng=$('.main4b_ ul li').length;
var ulW=313*leng;
$('.main4b_ ul').css({'width':ulW+'px'});
var i=0;
var tt;
function autoMove(){
   tt=setInterval(function(){
       $('.main4b_ ul').animate({marginLeft:'-313px'},function(){
           $(this).css({'margin-left':'0'}).find('li:first').appendTo('.main4b_ ul');
       })
   },2000)
}
autoMove();
$('.main4b').hover(function(){
   //
   clearInterval(tt);
},function(){
   autoMove();
})
$('.box a.right').click(function(){
       $('.main4b_ ul').animate({marginLeft:'-313px'},function(){
           $(this).css({'margin-left':'0'}).find('li:first').appendTo('.main4b_ ul');
       })
})
$('.box a.left').click(function(){
   $('.main4b_ ul').css({'margin-left':'-313px'}).find('li:last').prependTo('.main4b_ ul');
   $('.main4b_ ul').animate({marginLeft:'0'});
})

//文本框获得焦点事件
$('.bottom_l form input').focus(function(){
   var searchs=$('.bottom_l form input').val();
   if(searchs=='请输入关键字'){
       $(this).val('');
   }
})
//文本框失去焦点
$('.bottom_l form input').blur(function(){
   var searchs=$('.bottom_l form input').val();
   if(searchs==''){
       $(this).val('请输入关键字');
   }
})

/*轮播图*/
//隐藏第一张以外的图片
$('.banner_box ul li:gt(0)').hide();
var n=0;
var len=$('.banner_box ul li').length; //获取的是li的长度数量
var t;
function play(){
   //alert(n)
   $('.banner_box ul li').eq(n).show().siblings().hide();
       //给当前的span增加on样式，移除
   $('.white span').eq(n).addClass('on').siblings().removeClass('on');
}
function autoPlay(){
   //自动播放
   t=setInterval(function(){
       //alert(1)
       n++;
       if(n>=len){
           n=0;
       }
       play();
   },2000)
}
//alert(len)
autoPlay(); //调用自动播放函数

//鼠标经过banner停止播放，移开继续播放
$('.banner_box').hover(function(){
   clearInterval(t)
},function(){
   autoPlay();
})
//点击数字显示相应的图片
$('.white span').each(function(index) {
   //alert(index)
   $(this).click(function(){
       //alert(index)
       n=index;
       play();
   })
});

...