437.蓝色简单的多乐士油漆公司网站大学生期末大作业 Web前端网页制作 html+css+js-CSDN博客

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

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

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

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

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

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

一、网页概述

本实例应用html+css+js：导航菜单、图片轮翻、三级页面等。适用于大学生网页课程作业设计、公司网页制作等。本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。

二、网页文件

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

三、网页效果

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

四、代码展示

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" />
</head>

<body>

<iframe src="header.html" frameborder="0" scrolling="no" width="100%" height="166"></iframe>


<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="js/global.js"></script>
<script type="text/javascript" src="js/tab.js"></script>
<script type="text/javascript">
   $(function(){
       var $window = $(window),
           window_width = $window.width();
       $('#js_banner, #js_banner_img li').width(window_width);

       var urlParam = G.util.parse.url(),
           startFrame = 0;
       if (urlParam.search && ('banner' in urlParam.search)) {
           startFrame = (parseInt(urlParam.search['banner'])-1) || 0;
       }

new $.Tab({/*添加圆点按钮*/
           target: $('#js_banner_img li'),
           effect: 'slide3d',
           animateTime: 1000,
           stay: 4000,
           playTo: startFrame,
           autoPlay: true,
           merge: true,
           prevBtn: $('#js_banner_pre'),
           nextBtn: $('#js_banner_next')
       });
       $('#js_banner_img').css('left','-' + (window_width * startFrame) + 'px');
   })
</script>
<div id="js_banner" class="banner">
   <ul id="js_banner_img" class="banner_img clear">
       <li class="bgli01">
           <div class="banner_inner">
               <div class="child child1" data-z="2"><img src="images/1-1.png" /></div>
               <div class="child child2" data-z="3"><img src="images/1-2.png" style=" position:absolute; z-index:9" />
<a href="#"><h1>甲醛克星新房墙推累计千万好评</h1>
<p>多乐士乳胶漆致悦抗甲醛五合一净味套装内墙乳胶漆墙面漆涂料油漆,6L*3套装吸收分解甲醛千万好评超值6L</p>
<span><img src="images/more.png" /></span></a>
</div>
           </div>
       </li>
       <li class="bgli02">
           <div class="banner_inner">
               <div class="child child1" data-z="2"><img src="images/1-1.png" /></div>
               <div class="child child2" data-z="3"><img src="images/2-2.png" style=" position:absolute; z-index:9" />
<a href="#"><h1>甲醛克星新房墙推累计千万好评</h1>
<p>多乐士乳胶漆致悦抗甲醛五合一净味套装内墙乳胶漆墙面漆涂料油漆,6L*3套装吸收分解甲醛千万好评超值6L</p>
<span><img src="images/more.png" /></span></a>
</div>
           </div>
       </li>
       <li class="bgli03">
           <div class="banner_inner">
               <div class="child child1" data-z="2"><img src="images/1-1.png" /></div>
               <div class="child child2" data-z="3"><img src="images/3-2.png" style=" position:absolute; z-index:9" />
<a href="#"><h1>甲醛克星新房墙推累计千万好评</h1>
<p>多乐士乳胶漆致悦抗甲醛五合一净味套装内墙乳胶漆墙面漆涂料油漆,6L*3套装吸收分解甲醛千万好评超值6L</p>
<span><img src="images/more.png" /></span></a>
</div>
           </div>
       </li>
       <li class="bgli04">
           <div class="banner_inner">
               <div class="child child1" data-z="2"><img src="images/1-1.png" /></div>
               <div class="child child2" data-z="3"><img src="images/4-2.png" style=" position:absolute; z-index:9" />
<a href="#"><h1>甲醛克星新房墙推累计千万好评</h1>
<p>多乐士乳胶漆致悦抗甲醛五合一净味套装内墙乳胶漆墙面漆涂料油漆,6L*3套装吸收分解甲醛千万好评超值6L</p>
<span><img src="images/more.png" /></span></a>
</div>
           </div>
       </li>
   </ul>
   <div class="banner_common">
       <a id="js_banner_pre" href="javascript:;" class="banner_pre"></a>
       <a id="js_banner_next" href="javascript:;" class="banner_next"></a>
   </div>
</div>

<div class="index_1">
<a href="#"><img src="images/img_1.png" /></a>
<a href="#"><img src="images/img_2.png" /></a>
<a href="#"><img src="images/img_3.png" /></a>
</div>

<div class="index_news">
<div class="index_title"><img src="images/img_4.png" /></div>
<div class="rollBox">
<div class="LeftBotton" οnmοusedοwn="ISL_GoUp()" οnmοuseup="ISL_StopUp()" οnmοuseοut="ISL_StopUp()"></div>
<div class="Cont" id="ISL_Cont">
<div class="ScrCont">
<div id="List1">


<div class="pic">
<a href="#"><img src="images/pic_1.jpg" /></a>
<p><a href="#">多乐士无添加欧美认证家更安心</a></p>
</div>
<div class="pic">
<a href="#"><img src="images/pic_2.jpg" /></a>
<p><a href="#">家易涂管家级焕新服务</a></p>
</div>
<div class="pic">
<a href="#"><img src="images/pic_3.jpg" /></a>
<p><a href="#">多乐士焕彩大师所见即所得</a></p>
</div>
<div class="pic">
<a href="#"><img src="images/pic_1.jpg" /></a>
<p><a href="#">多乐士无添加欧美认证家更安心</a></p>
</div>
<div class="pic">
<a href="#"><img src="images/pic_2.jpg" /></a>
<p><a href="#">家易涂管家级焕新服务</a></p>
</div>
<div class="pic">
<a href="#"><img src="images/pic_3.jpg" /></a>
<p><a href="#">多乐士焕彩大师所见即所得</a></p>
</div>


</div>
<div id="List2"></div>
</div>
</div>
<div class="RightBotton" οnmοusedοwn="ISL_GoDown()" οnmοuseup="ISL_StopDown()" οnmοuseοut="ISL_StopDown()"></div>
</div>
</div>

...

2.CSS

代码如下（节选示例）：

/* CSS Document */
body{margin:0 0;padding:0 0;font-size:14px;}
a{ text-decoration:none; color:#000}
a img{border:0}
ul,li,dl,dt,dd,p,h1,h2,h3,h4,h5,h6{margin:0;padding:0}
li{ list-style:none;}

/*头部*/
.header{height:100px;width:100%; background-color:#012169; margin:auto}
.header_top{width:1080px;height:100px; margin:auto;}
.nav{width:100%;height:65px;border-bottom:1px solid #e7e9ea; background:#FFF;margin:auto;}
.nav ul{width:1079px;height:65px;border-left:1px solid #e7e9ea; margin:auto}
.nav ul li{border-right:1px solid #e7e9ea;padding:0 20px;line-height:65px;float:left;}
.nav .cur{float:right;line-height:20px;padding-top:10px;padding-bottom:5px;}
.nav .curr{float:right;border-left:1px solid #e7e9ea;line-height:20px;padding-top:10px;padding-bottom:5px; text-align:center;}

/*首页轮换图*/
.banner{width:100%;height:435px;margin:auto;}
.banner_inner{height:435px; width:1080px;margin:0 auto}
.banner_img{width:100%}
.banner_img li{float:left;width:100%;position:relative}
.banner_img li.bgli01{ background:#2e6fbf url(../images/1-0.png) top center no-repeat; }
.banner_img li.bgli01 a{color:#FFF}
.banner_img li.bgli02{ background:#E8E8E8 url(../images/2-0.png) top center no-repeat;}
.banner_img li.bgli03{ background:#f9c476 url(../images/3-0.png) top center no-repeat;}
.banner_img li.bgli04{ background:#c1e3ea url(../images/4-0.png) top center no-repeat;}
.banner_img li.bgli04 a{color:#012169}
.banner .child1{width:662px;height:435px; float:left;}
.banner .child2{width:654px;height:435px; z-index:99;float:right;margin-top:-435px;}
.banner .child1 img{width:462px;height:375px;margin:30px 100px; float:left;}
.banner .child2 a{ color:#333; position:absolute; z-index:99}
.banner .child2 h1{font-size:30px;width:420px;height:70px; margin-top:50px;margin-left:220px; line-height:35px; float:left;}
.banner .child2 p{font-size:14px;width:450px;height:120px; margin-top:30px;margin-left:170px; line-height:35px;float:left;}
.banner .child2 span{width:300px;height:54px;margin-left:60px; float:left;}
.banner_common{position:relative;width:1080px;margin:0 auto}
.banner_pre{position:absolute;top:50%;left:0;margin-top:180px;width:60px;height:60px;z-index:9999;cursor:pointer;background:url(../images/banner_btn_l_24.png) no-repeat;opacity:.5;filter:alpha(opacity=50)}
.banner_next{position:absolute;top:50%;right:0;margin-top:180px;width:60px;height:60px;z-index:9999;cursor:pointer;background:url(../images/banner_btn_r_24.png) no-repeat;opacity:.5;filter:alpha(opacity=50)}
.banner_pre:hover, .banner_next:hover{opacity:1;filter:alpha(opacity=100)}
.banner .control{width:130px;position:absolute;margin-top:370px; z-index:9999;left:50%;}
.banner .control li{float:left;margin-left:10px;width:18px;height:18px;border-radius:50%;cursor:pointer;background:#fff}
.banner .control li a{display:none}
.banner .control li.current{background:#ff7f02}

/*首页图标*/
.index_1{width:1080px;height:300px; margin:35px auto;}
.index_1 img{width:277px;height:300px; margin:0 40px; float:left;}

/*首页新闻*/
.index_news{height:420px;width:100%;padding-top:100px; background-color:#dfe1e3; background-image:url(../images/index_1.jpg); background-repeat:no-repeat; background-size:100%;margin:auto;}
.index_title{width:100%; text-align:center; margin:auto;}
.rollBox{width:1080px;overflow:hidden;margin:30px auto;}
.rollBox .LeftBotton{height:60px;width:60px;background:url(../images/news_left.png);overflow:hidden;float:left;display:inline;margin:120px 0 0 0;cursor:pointer;}
.rollBox .RightBotton{height:60px;width:60px;background:url(../images/news_right.png);overflow:hidden;float:left;display:inline;margin:120px 0 0 0;cursor:pointer;}
.rollBox .Cont{width:960px;overflow:hidden;float:left;}
.rollBox .ScrCont{width:10000000px;}
.rollBox .Cont .pic{width:300px;height:300px; background-color:#FFF;margin:0 5px;padding:5px;float:left;text-align:center;}
.rollBox .Cont .pic img{width:300px;height:235px;display:block;margin:0 auto;}
.rollBox .Cont .pic p{line-height:30px;font-size:16px; font-weight:bold;margin-top:5px;color:#505050;}
.rollBox #List1,.rollBox #List2{float:left;}

/*首页底部*/
.index_bottom{height:160px;width:100%;padding-top:70px; background-color:#FFF; background-image:url(../images/index_2.jpg); background-repeat:no-repeat; background-size:100%;margin:auto;}
.index_bottom_1{width:600px;height:160px; margin:auto;}
.index_bottom_1 img{margin:20px 50px 0 100px; float:left}
.index_bottom_1 ul{width:130px;margin-top:20px; float:left;}
.index_bottom_1 li{ line-height:30px; font-size:12px;}

...

3.JS

代码如下（节选示例）：

var G = {};

G.createFnQueue = function(shift) {
var _list = [];

   return {
       add   : function(fn) {
           if ($.isFunction(fn))
               _list.push(fn);
       },

       exec   : function(o) {
           if (shift !== false) {
               while (_list.length > 0) {
                   _list.shift()(o);
               }
           }
           else {
               for (var i = 0, len = _list.length; i < len; i++) {
                   if (_list[i](o) === false) {
                       return false; // 类似事件的回调函数
                   }
               }
           }
       },

       clear   : function() {
           _list.length = 0;
       }
   };
};

G.app = {}; // 应用
G.logic = {}; // 业务公共逻辑相关
G.ui = {}; // 界面相关
G.util = {}; // 工具相关

if ($.browser.msie && parseInt($.browser.version, 10) < 7) {
   try {
       document.execCommand("BackgroundImageCache", false, true);
   } catch(e) {}
}
/*
* Cookie 相关操作
*/
G.util.cookie = {
   get   : function(name) {
       var r = new RegExp("(^|;|\\s+)" + name + "=([^;]*)(;|$)");
       var m = document.cookie.match(r);
       return (!m ? "": unescape(m[2]));
   },

   add   : function(name, v, path, expire, domain) {
       var s = name + "=" + escape(v)
           + "; path=" + ( path || '/' ) // 默认根目录
           + (domain ? ("; domain=" + domain) : '');
       if (expire > 0) {
           var d = new Date();
           d.setTime(d.getTime() + expire * 1000);
           s += ";expires=" + d.toGMTString();
       }
       document.cookie = s;
   },

   del   : function(name, domain) {
       document.cookie = name + "=;path=/;" +(domain ? ("domain=" + domain + ";") : '') +"expires=" + (new Date(0)).toGMTString();
   }
};

/*
* token 相关操作
*/
G.util.token = {
   //给连接加上token
   addToken : function(url,type){
       //type标识请求的方式,jq标识jquery，lk标识普通链接,fr标识form表单,ow打开新窗口
       var token=this.getToken();
       //只支持http和https协议，当url中无协议头的时候，应该检查当前页面的协议头
       if(url=="" || (url.indexOf("://")<0?location.href:url).indexOf("http")!=0){
           return url;
       }
       if(url.indexOf("#")!=-1){
           var f1=url.match(/\?.+\#/);
           if(f1){
               var t=f1[0].split("#"),newPara=[t[0],"&g_tk=",token,"&g_ty=",type,"#",t[1]].join("");
               return url.replace(f1[0],newPara);
           }else{
               var t=url.split("#");
               return [t[0],"?g_tk=",token,"&g_ty=",type,"#",t[1]].join("");
           }
       }
       //无论如何都把g_ty带上，用户服务器端判断请求的类型
       return token==""?(url+(url.indexOf("?")!=-1?"&":"?")+"g_ty="+type):(url+(url.indexOf("?")!=-1?"&":"?")+"g_tk="+token+"&g_ty="+type);
   },
   //获取转换后的token
   getToken : function(){
       var skey=G.util.cookie.get("skey"),
           token=skey==null?"":this.time33(skey);
           return token;
   },
   //skey转token
   time33 : function(str){
       //哈希time33算法
       for(var i = 0, len = str.length,hash = 5381; i < len; ++i){
       hash += (hash << 5) + str.charAt(i).charCodeAt();
       };
       return hash & 0x7fffffff;
   }
}

/*新增token处理*/
G.util.getACSRFToken=function(){
if(G.util.cookie.get("g_tk")){
       return G.util._DJB(G.util.cookie.get("g_tk"))
       }else{
       return false;
       };
}

G.util._DJB=function(str){
       var hash = 5381;
       for(var i = 0, len = str.length; i < len; ++i){
           hash += (hash << 5) + str.charAt(i).charCodeAt();
       }
       return hash & 0x7fffffff;
   }

G.util.token_post = function(options){
var opt=jQuery.extend({
           "type":"POST",
           "cache":false,
           "dataType":"json",
           "timeout":8000
   }, options);

...