528.大气的家具定制设计公司网站大学生期末大作业 Web前端网页制作 html+css+js

最新推荐文章于 2024-10-25 11:06:13 发布

仙女网页制作

最新推荐文章于 2024-10-25 11:06:13 发布

阅读量1.9k

点赞数 43

分类专栏： Web网页设计实例家居文章标签：前端 html html5 javascript jquery css bootstrap

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

版权

Web网页设计实例同时被 2 个专栏收录

602 篇文章 29 订阅

订阅专栏

家居

4 篇文章 0 订阅

订阅专栏

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

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

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

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

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

一、网页概述

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

二、网页文件

本网页共包含10个页面：

三、网页效果

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

四、代码展示

1.html

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>xx有限公司</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<link href="zp/templets/default/style/bootstrap.min.css?a=114" rel="stylesheet">
<link href="zp/templets/default/style/main.css?a=114" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="zp/templets/default/style/style.css?a=1511949039"/>

</head>

<body>
<script type="text/javascript">
   if (window.location.toString().indexOf('pref=padindex') != -1) {} else {
       if (/AppleWebKit.*Mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))) {
           if (window.location.href.indexOf("?mobile") < 0) {
               try {
                   if (/Android|Windows Phone|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
                       window.location.href = "#";
                   } else if (/iPad/i.test(navigator.userAgent)) {} else {}
               } catch(e) {}
           }
       }
   }
</script>

<header class="Top_bg">
<div class="Top">
<div class="logo"><a href="/zp/"><img src="zp/templets/default/images/logo.png" width="148" /></a></div>
<nav class="mainnav">
<ul class="menu" id="menu">
<li><a style="color:#b5b5b5;" href='index.html' >HOME</a></li>
<li><a class="nava" href='ppgs.html' >品牌故事</a></li>
<li><a class="nava" href='kct.html' >全屋定制</a></li>
<li><a class="nava" href='join.html' >招商加盟</a></li>
<li><a class="nava" href='cgwd.html' >客户中心</a></li>
<li><a class="nava" href='investment/index.html' >投资者关系</a></li>
<li><a class="nava" href='wzzn.html' >我在找你</a></li>
</ul>
<div class="clear"></div>
</nav>
</div>
<script type="text/javascript">

var urlstr = location.href;

//alert((urlstr + '/').indexOf($(this).attr('href')));

var urlstatus=false;

$("#menu a").each(function () {

if ((urlstr + '/').indexOf($(this).attr('href')) > -1&&$(this).attr('href')!='') {

$(this).addClass('cur'); urlstatus = true;

} else {

$(this).removeClass('cur');

}

});

if (!urlstatus) {$("#menu a").eq(0).addClass('cur'); }

</script>
</header>

</ol>

<video autoplay loop muted>

</ul>
</section>

...

2.CSS

代码如下（节选示例）：

@charset "utf-8";
html{ font:normal 62.5%/2.3em "微软雅黑",Arial,"宋体";}
body{ margin:0px; padding:0px; margin:0px auto; font-size:1.2em; color:#414446; width:100%; min-width:1200px; width:expression((documentElement.clientWidth < 1200) ? "1200px" : "100%" ); zoom:1;}
ul,li,form, dl,dt,dd, div{ padding: 0px; margin: 0px; list-style:none;}
select,input,textarea{ border-radius:0; -webkit-border-radius:0; color:#414446;}
input:focus { outline: none;}
input,button,select,textarea{outline:none;/*-webkit-appearance:none;*//*强制去除表单自带的样式*/ }
textarea{resize:none;/*-webkit-appearance:none;*//*强制去除textarea自带的样式*/ }
textarea,input,select { background:none; border:none; margin:0; padding:0;}
article,aside,footer,header,hgroup,nav,section,figure,figcaption{ display: block;} /*html5设置*/
figure,figcaption{ margin:0px; padding:0px;}
audio,canvas,progress,video { display: inline-block; vertical-align: baseline;}
img{ border:none; border:0; max-width:100%; vertical-align:top;}
a{ color:#414446; text-decoration:none; noline:-webkit-tap-highlight-color:rgba(0,0,0,0);}
a:focus {outline:none; -moz-outline:none;}
a:hover{ text-decoration:none;}
.clear{ clear:both; height:0px; overflow:hidden;}

.Contain{ width:1200px; margin:0 auto;}
.SildeBar{}
.MainContent{}
.Content{}
.SinglePage{ text-justify:inter-ideograph; text-align:justify; word-wrap:break-word; clear:both; overflow:hidden; font-size:13px; line-height:24px;}

.Current{}

/*pages*/
.Pages{}
/*pages end*/

/*Top*/

/*#whyGeely .Top_bg{ position:absolute; left:0; top:0; width:100%; background:#fff; z-index:3;}*/
#whyGeely .viewport-cont{ height:760px;}
#whyGeely .viewport-cont-bottom{ height:auto; overflow:hidden;}

.Top{ height:100px; width:1200px; margin:0 auto; position:relative; z-index:3;}
.Top .logo{ float:left; margin-top:23px;}
.Top .logo a{ display:block; width:148px; height:57px;}
.mainnav{ position:absolute; right:20px; bottom:30px;}
.mainnav li{ float:left; color:#b5b5b5;}
.mainnav li a{ display:block; padding:0 30px; font-size:14px;}
.mainnav li a:hover{color:#F00;}
.mainnav li.onnav a{ color:#e60012;}
.nava{color:#b5b5b5;}
.cur {color:red; }

.Top .search_btn{ position:absolute; right:0; bottom:37px; width:12px; height:12px; display:block; background:url(../images/search_btn.jpg) no-repeat;}

.Top .searchbox{ position:absolute; right:0; bottom:23px; width:830px; height:43px; background:#fff; overflow:hidden; display:none; border:1px solid #f2f2f2;}
.Top .searchbox a{ float:right; width:32px; height:45px; background:url(../images/search_bg.png) no-repeat center; margin-right:5px;}
.Top .searchbox input{ padding:0 0 0 20px; width:770px; line-height:45px; height:45px; font-size:14px; color:#777;}

/*Top*/

/*Bottom*/
.Bottom{ width:1200px; margin:0 auto; padding:15px; margin-top:2px;}
.Bottom .div{ float:left;/* width:164px;*/ width:140px;}
.Bottom .div .h3{ font-weight:normal; font-size:12px; color:#333; margin:0; line-height:20px; font-weight:600;}
.Bottom .div li{ height:20px; line-height:20px;}
.Bottom .div li a{ line-height:20px; color:#666; font-size:12px !important;}

.Bottom .div6{ width:100px;}

.Bottom .b_tel{ float:right; width:210px;}
.Bottom .b_tel .h3,.Bottom .b_tel p{ margin:0;}
.Bottom .b_tel .h3{ font-size:14px; color:#999; font-weight:normal; padding-left:20px; background:url(../images/b_telbg.jpg) no-repeat left center;}
.Bottom .b_tel p{ padding:5px 0; font-size:18px; color:#e6002e; }
.Bottom .b_tel .erweima{/* padding-top:15px;*/}
.Bottom .b_tel .erweima li{ float:left; width:38px; height:38px; margin-right:20px; position:relative;}
.Bottom .b_tel .erweima li div{ position:absolute; left:50%; bottom:41px; width:0; height:102px; background:url(../images/erweima_bg.png) no-repeat; transition:all 300ms; -webkit-transition:all 300ms;}
.Bottom .b_tel .erweima .li1{ background:url(../images/bottom_img2.jpg) no-repeat center top; transition:all 300ms; -webkit-transition:all 300ms;}
.Bottom .b_tel .erweima .li1:hover{ background-position:center bottom;}
.Bottom .b_tel .erweima .li2{ background:url(../images/bottom_img3.jpg) no-repeat center top; transition:all 300ms; -webkit-transition:all 300ms;}
.Bottom .b_tel .erweima .li2:hover{ background-position:center bottom;}
.Bottom .b_tel .erweima li:hover div{ width:98px; padding:10px 11px; margin-left:-59px;}

.Bottom .Copyright{ line-height:55px; margin-top:10px; border-top:1px solid #e8e8e8;}
.Bottom .Copyright,.Bottom .Copyright a{ color:#999;}
.Bottom .Copyright .BottomLinks{ float:right;}
.Bottom .Copyright .BottomLinks em{ font-style:normal; padding:0 10px; color:#f2f2f2;}

/*Bottom*/

/*SildeBar*/
.SildeBar{}
/*SildeBar*/

/*Banner*/
.HomeBan{ height:605px; position:relative;}
.HomeBan .bd{ height:605px; position:relative;}
.HomeBan .bd li{ width:100%; height:605px;background-size: 1920px 605px !important;}

.HomeBan .hd{ position:absolute; left:0; bottom:20px; text-align:center; width:100%;}
.HomeBan .hd li{ width:10px; height:10px; cursor:pointer; background:url(../images/home_ban.png) no-repeat center top; display:inline-block; margin:0 10px;}
.HomeBan .hd li.on{ background-position:center bottom;}

...

3.JS

代码如下（节选示例）：

$(function($) {'use strict',

   // Feature Tab Content
   $('.features-nav li').on('click',function(){'use strict',
       $('.features-nav li').removeClass('active');
       $(this).addClass('active');
   });
   $('#community-carousel ul.carousel-indicators li').on('click',function(){'use strict',
       $('.features-nav li').removeClass('active');
       var lists = $('.features-nav li');
       $(lists[$(this).index()]).addClass('active');
   });

   // Coummunity Carousel
   $('#community-carousel').carousel({
       interval: false
   });

   // portfolio filter
$(document).ready(function(){'use strict',
       $portfolio_selectors = $('.portfolio-filter >li>a');
       if($portfolio_selectors!='undefined'){
           $portfolio = $('.portfolio-items');
           $portfolio.isotope({
               itemSelector : '.col-sm-3',
               layoutMode : 'fitRows'
           });

           $portfolio_selectors.on('click', function(){
               $portfolio_selectors.removeClass('active');
               $(this).addClass('active');
               var selector = $(this).attr('data-filter');
               $portfolio.isotope({ filter: selector });
               return false;
           });
       }
   });

   // Contact form validation
   var form = $('.contact-form');
   form.submit(function () {'use strict',
       $this = $(this);
       $.post($(this).attr('action'), function(data) {
           $this.prev().text(data.message).fadeIn().delay(3000).fadeOut();
       },'json');
       return false;
   });

   // Navigation Scroll
   $(window).scroll(function(event) {
       Scroll();
   });

   $('.navbar-collapse ul li a').click(function() {
       $('html, body').animate({scrollTop: $(this.hash).offset().top - 79}, 1000);
       return false;
   });

});

//Preloder script
$(document).ready(function(){'use strict';
$(".preloader").remove();
$("a[data-rel]").prettyPhoto();

   // Slider Height
   //var slideHeight = $(window).height();
   var slideHeight = 609;
   $('#home-carousel .carousel-inner .item, #home-carousel .video-container').css('height',slideHeight);

   $(window).resize(function(){'use strict',
       $('#home-carousel .carousel-inner .item, #home-carousel .video-container').css('height',slideHeight);
   });

...