207. 大学生HTML5期末大作业 ―【简单的网站建站公司网站首页(1页)】 Web前端网页制作 html5+css3+js

一、网页概述

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

二、网页文件

本网页共包含1个页面：

三、网页效果

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

四、代码展示

1.html

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <link rel="stylesheet" type="text/css" href="css/document.css"/>
       <title>廖灿坤</title>
       <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
       <script src="js/roll.js" type="text/javascript" charset="utf-8"></script>
       <script src="js/gVerify.js" type="text/javascript" charset="utf-8"></script>
   </head>

   <body>
       <div id="head">
           <div id="headone">编号：527a00001 所属行业：建站公司</div>
           <div id="headtwo">选用</div>
           <div id="headthree">电脑</div>
           <div id="headfour">手机</div>
           <div id="headtwohid">赶快点回去</div>
           <div id="headthreehid">赶快点回去</div>
           <div id="headfourhid">赶快点回去</div>
       </div>
       <div id="hid">
           <a href="img1.html"><img id="hidimg" src="img/1.jpg" ></a>
           <a href="img2.html"><img id="hidimg" src="img/2.jpg" ></a>
       </div>
       <div id="top">
           <div id="logo"><img src="img/LOGO.png" ></div>
           <div id="kefu"><img src="img/kefu.png" style="float: left;" ></div>
           <div id="guide">
       <nav class="hl_nav">
       <ul class="nav_list">
       <li class="active">
       <a class="nav_head" href="#">网站首页</a>

       </li>
       <li>
       <a class="nav_head" href="#">关于我们</a>
       </li>
       <li>
       <a class="nav_head" href="#">网站建设</a>
       </li>
               <li>
               <a class="nav_head" href="#">解决方案</a>
               </li>
       <li>
       <a class="nav_head" href="#">客户案例</a>
       <a class="nav_body" href="#">网站</a>
       <a class="nav_body" href="#">小程序</a>
       </li>
       <li>
       <a class="nav_head" href="#">服务项目</a>
       </li>
       <li>
       <a class="nav_head" href="#">新闻资讯</a>
       <a class="nav_body" href="#">公司新闻</a>
                   <a class="nav_body" href="#">行业新闻</a>
       </li>
       <li>
       <a class="nav_head" href="#">联系我们</a>
       </li>
       </ul>
       </nav>

...

2.CSS

代码如下（节选示例）：

/* 案例 */
       .service{
           width: 80%;
           margin: 20px auto;
       }
       .service_top{
           float: left;
           width: 100%;
           height: 110px;
           background: #f90;
       }
       .service_con{
           float: left;
           width: 100%;
           height: 60px;
           text-align: center;
           background: #ced;
           margin: 20px auto;
       }
       .service_table{
           float: left;
           width: 100%;
       }
       .service_table div{
           float: left;
           width: 24%;
           height: 400px;
           margin-right: 1.05%;
           /* border: 1px solid #eee; */
       }
       .service_table div:nth-child(4),.service_table div:nth-child(8){
           margin-right: 0;
       }
       .service_table div img{
           width: 100%;
           height: 330px;
       }
       #img1_con,#img2_con,#img3_con,#img4_con,#img5_con,#img6_con,#img7_con,#img8_con{
           display: none;
           position: relative;
           top: -335px;
           left: 0;
           z-index: 2;
           width: 100%;
           height: 330px;
           background: black;
           opacity: 0.5;
           color: white;
           white-space: nowrap;
           overflow: hidden;
           text-overflow: ellipsis;
       }
       .service_table div h3{
           width: 100%;
           height: 50px;
           line-height: 50px;
           font-weight: 200;
           font-size: 16px;
           text-align: center;
       }

...

3.JS

代码如下（节选示例）：

$(function(){
   var oul = $('.wrap ul');
   var oulHtml = oul.html();
   oul.html(oulHtml+oulHtml)
   var timeId = null;

   var ali = $('.wrap ul li');
   var aliWidth = ali.eq(0).width();
   var aliSize = ali.size();
   var ulWidth = aliWidth*aliSize;
   oul.width(ulWidth);   //1600px

   var speed = 2;

function slider(){

       if(speed<0){
           if(oul.css('left')==-ulWidth/2+'px'){
          oul.css('left',0);
          }
          oul.css('left','+=-2px');
       }

       if(speed>0){
           if(oul.css('left')=='0px'){
          oul.css('left',-ulWidth/2+'px');
          }
          oul.css('left','+='+speed+'px');
       }

   }

   // setInterval()函数的作用是：每隔一段时间，执行该函数里的代码
   timeId = setInterval(slider,30);

   $('.wrap').mouseover(function(){
       // clearInterval()函数的作用是用来清除定时器
       clearInterval(timeId);
   });

   $('.wrap').mouseout(function(){
       timeId = setInterval(slider,30);
   });

   $('.goLeft').click(function(){
       speed=-2;
   });

   $('.goRight').click(function(){
       speed=2;
   });

});

...