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

标签：Web 网页 Bottom height width html li js margin

一、网页概述

二、网页文件

三、网页效果

欢迎光临仙女的网页世界！这里有各行各业的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);
   });

...

五、总结

设计一个样式美观又人性化的网页，除了具备扎实的专业知识，还需具备美学和人机工程学等相关知识，优秀的网页应具备以下几个特点:

1.简洁实用

尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；

2.使用方便

要满足使用者的要求，网页适合使用，显示出其功能美；

3.整体性好

围绕一个统一的目标设计，强调整体的功能性；

4.形象突出

尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。

5.交互式强

发挥网络的优势，想方设法使每个使用者都参与到其中来。

六、更多推荐

【关注作者|获取更多源码|优质文章】；Web前端网页制作、大学生毕业设计辅导、期末大作业辅导、模板源码、技术咨询等，有兴趣的联系我!

您的支持是我创作的动力！看到这里就【点赞收藏博文】，Thanks！

更多优质博客文章、网页模板点击以下链接查阅：仙女网页设计-CSDN博客。

标签：Web,网页,Bottom,height,width,html,li,js,margin
From： https://blog.csdn.net/A240307/article/details/142748260

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

一、网页概述

二、网页文件

三、网页效果

四、代码展示

1.html

2.CSS

3.JS

五、总结

1.简洁实用

2.使用方便

3.整体性好

4.形象突出

5.交互式强

六、更多推荐

相关文章

赞助商

阅读排行

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

一、网页概述

二、网页文件

三、网页效果

四、代码展示

1.html

2.CSS

3.JS

五、总结

1.简洁实用

2.使用方便

3.整体性好

4.形象突出

5.交互式强

六、更多推荐

相关文章

赞助商

阅读排行

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