282. 大学生HTML期末大作业 ―【简洁宽屏网络公司网页(5页)】 Web前端网页制作 html+css+js-CSDN博客

♬♬♬欢迎光临我的CSDN！这里是Web前端网页案例大集汇，有各行各业的前端网页案例，每天会持续更新！如果你对Web前端网页的学习、开发有困惑，抑或是为Web前端网页期末大作业、课设毕设烦恼，在我这可以提供专业的解决方案，☎☏有兴趣的欢迎联系交流！请点赞关注，谢谢！❤❤❤更多网页案例推荐:

全网最全的的网页案例集合，5000+套网页完整代码，主题涵盖40+种类型，网页案例持续更新中,需要的【建议收藏】这篇文章末尾添加我微信...

【建议收藏】40种主题网页案例大集合 Web前端大学生期末大作业 HTML+CSS+JS-CSDN博客

提示：以下是本篇文章正文内容，下面案例供参考：

一、网页概述

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

二、网页文件

本网页共包含5个页面：

三、网页效果

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

四、代码展示

1.html

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" id="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<link href="/statics/images/apple-touch-icon-57.png" sizes="57x57" rel="apple-touch-icon">
<link href="/statics/images/apple-touch-icon-72.png" sizes="72x72" rel="apple-touch-icon">
<link href="/statics/images/apple-touch-icon-114.png" sizes="114x114" rel="apple-touch-icon">
<title>小角色网络科技有限公司</title>
<meta name="keywords" content="小角色,小角色网络"/>
<meta name="description" content="小角色汇集智能网络营销、企业网站、微信网站、微信开发、计算机信息技术等各种专业互联网技术，为您企业电子商务、办公自动化、信息化建设插上腾飞的翅膀！">
<link href="css/style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/theme_trust.js"></script>
<style type="text/css">
html, body {
   margin: 0;
   padding: 0;
}
html,
body,
wrapper {
height: 100%;
}
.iw_poi_title {
   color: #CC5522;
   font-size: 14px;
   font-weight: bold;
   overflow: hidden;
   padding-right: 13px;
   white-space: nowrap
}
.iw_poi_content {
   font: 12px arial, sans-serif;
   overflow: visible;
   padding-top: 4px;
   white-space: -moz-pre-wrap;
   word-wrap: break-word
}
.taocanbg {
   width:320px;
   height:510px;
   padding-top:10px;
   float:left;
   margin-right:38px;
   margin-left: 15px;
   margin-top:20px;
   margin-bottom:10px;
}
.dan {
   width:320px;
   height:260px;
   display:block;
   background-repeat:no-repeat;
}
.taocan_name {
   width:320px;
   height:auto;
   line-height:25px;
   display:block;
   border-bottom:#96582a 1px dashed;
   text-align:center;
   margin-top:5px;
   font-family:"microsoft yahei";
   font-size:16px;
   color: #281f1d;
   margin-right: auto;
   margin-bottom: 0px;
   margin-left: auto;
}
.dan:hover {
   opacity:0.8;
   filter:alpha(opacity=40);
}
.img-black {
   text-align: center;
   font-size: 16px;
   line-height: 45px;
   font-family:"microsoft yahei";
   color: #666;
}
.img-red {
   font-size: 20px;
   color: #e9544c;
   font-weight: bold;
   line-height: 50px;
   font-family:"microsoft yahei";
}
.img-red2 {
   font-size: 16px;
   color: #e9544c;
   font-weight: bold;
   font-family:"microsoft yahei";
}
.taocan_con {
   height:auto;
   width:300px;
   font-family:"microsoft yahei";
   line-height:20px;
   color:#130c0e;
   font-size: 14px;
   text-decoration:none;
   font-weight: normal;
   margin-top: 5px;
   margin-right: auto;
   margin-bottom: 10px;
   margin-left: auto;
   padding: 0px;
}

...

2.CSS

代码如下（节选示例）：

@charset "UTF-8";
/* CSS Document */
body {
   font:14px/1.5 AppleGothic,Arial,'Microsoft Yahei','Simsun';
   line-height:160%;
   color:#666;
   background:#fff;
   }
body,html,p,h1,h2,h3,h4,h5,h6,dl,dd,dt,ul,li{
   padding:0;
   margin:0;
   }
dl,dd,dt,ul,li{
   list-style:none;
   }
a {
   color: #666;
   text-decoration: none;
   }

a:hover {
   color: #333;
   }
.clearfix {
*zoom: 1;
   }
.clearfix:before,
.clearfix:after {
   display: table;
   content: "";
   line-height: 0;
}
.clearfix:after {
   clear: both;
   }
.tl{
   text-align:left;
   }
.tr{
   text-align: right;
   }
.tc{
   text-align: center;
   }
.fl{
   float:left;
   }
.fr{
   float:right;
   }
.underline{
   text-decoration:underline;
   }
.ct_1{
   color:#000;
   }
.ct_2{
   color:#333;
   }
.ct_3{
   color:#666;
   }
.ct_4{
   color:#999;
   }
.ct_5{
   color:#ccc;
   }
.ct_6{
   color:#fff;
   }
.ct_7{
   color:#0A90BD;
   }
/* */

.k1120{
   max-width:1120px;
   margin:0 auto;
   }
#header{
   width:100%;
   height:100px;
    position:fixed;
   z-index:1100;
   background:#fff;
    top:0;
   box-shadow:0 1px 0 rgba(0,0,0,0.05);
   -webkit-transition: 0.2s ease-in 0s;
   -moz-transition: 0.2s ease-in 0s;
   -ms-transition: 0.1s ease-in 0s;
   -o-transition: 0.2s ease-in 0s;
}
#header .k1120 {
   position:relative;
   padding:0 10px;
   }

...

3.JS

代码如下（节选示例）：

jQuery(document).ready(function(){

//Scrol
jQuery('#menu li a, #logo').click(function() {
   var elementClicked = jQuery(this).attr("href");
   var destination = jQuery(elementClicked).offset().top;
   jQuery("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination-0}, 1000 );
   return false;
});

var current_nav = 'home';

scroll_function = function(){

   jQuery(".scrol-page,").each(function(index) {
       var h = jQuery(this).offset().top;
       var y = jQuery(window).scrollTop();

       if(y + 360 >= h && y < h + jQuery(this).height() && jQuery(this).attr('id') != current_nav) {

           current_nav = jQuery(this).attr('id');

           jQuery('#menu a').removeClass('current');
           jQuery('.nav_' + current_nav).addClass('current').show("fast");

       }
   });
}
jQuery(window).scroll(function(){
       scroll_function();
});

//Scrol
//jQuery('#menu a, #logo, .scrol').click(function() {
   //var elementClicked = jQuery(this).attr("href");
   //var destination = jQuery(elementClicked).offset().top;
   //jQuery("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination-0}, 1000 );
   //return false;
//});

});

...