第一阶段项目总结

1.项目是仿做微软中文官网的12个页面

www.microsoft.com/zh-cn

2.需求简介：

社会进步越来越快，随着电子产品和软件的发展，企业和个人对软件和电子产品需求越来越高，微软作为世界上操作系统用户最广泛的开发商，windows系统最为知名，此网站就是介绍微软旗下各种高科技电子产品和软件产品的平台。

3.实现的功能

1、轮播图
2、页面跳转
3、导航功能
4、图片翻页
5、鼠标悬浮样式
6、图片放大
7、内容的隐藏和显示
8、css绝对定位，相对定位

4.应用的知识点：

HTML
用div或无序列表排版、img标签、video标签、input标签、超链接、table表格、form表单，css和JavaScript的外部引入、内联、内嵌方式、以及标签们的各种属性等

css
超链接样式、id、class、元素选择器、字体，图片样式、边框、背景样式、伪类（超链接样式)、列表样式、浮动布局、盒子模型等

JavaScript
基本语法(var、for、if…else等)和数据类型(数字、字符串、函数、对象、数组，文档对象模型（DOM）等

5.主要内容

首页index.html主要知识点
1、导航使用div结合无序列表ul进行制作排版，用css中的float浮动实现横向排列，每个选项使用了超链接样式，：hover伪类实现鼠标悬浮出现下边框的效果。

<div id="d1">
<ul>
    <li id="logodiv"><a href="#" ><img src="img4/logo.png" id="logo"></a></li>
    <li class="daohang"><a href="#" class="a1">Office</a></li>
    <li class="daohang"><a href="微软/windows.html" target="_blank" class="a1">Windows</a></li>
    <li class="daohang"><a href="项目：微软/about.html" target="_blank" class="a1">Surface</a></li>
    <li class="daohang"><a href="Xbox/box.html" target="_blank" class="a1">Xbox</a></li>
    <li class="daohang"><a href="#" class="a1">支持</a></li>
    <li id="dhgd"><p id="pgd" onClick="ShowDiv()" >更多&nbsp;&nbsp;<img src="img4/after.png"></p></li>
    <li id="seach"><a href="#"><img src="img4/seach.png"></a></li>
    <li id="gouwu"><a href="#"><img src="img4/gouwuche.png"></a></li>
    <li id="daohang2"><a href="#" id="a2">登录</a></li>
    
</ul>
</div>

2、导航中的“更多”选项是用onclick调用一个函数，使点击时，改变内容div的display属性实现点击显示，鼠标移开div时，隐藏，使用的if…else判断语句 

function ShowDiv()
{if(document.getElementById("gengduo").style.display =="block"){
    
  document.getElementById("gengduo").style.display = "none";}
 
 else if( document.getElementById("gengduo").style.display =="none"){
    document.getElementById("gengduo").style.display = "block"; 
 }
}

3.页面的轮播图使用js中的数组实现，左右按钮分别调用两个函数，利用input标签value值，让图片循环，实现点击翻页的功能，并添加一个定时器每隔5秒调用“下一张”这个函数，实现循环播放图片，另一个函数用onmouseover和onmouseout实现鼠标放到轮播图上显示左右按钮，移开隐藏

// JavaScript Document
var arr=["img4/RW5kMO.jpg","img4/RWbZ9R.jpg"];
var a=0;
function change(curr){
    a=curr.value;
    var b=document.getElementById("img1");
    b.src=arr[a];
    
}
function up(){
    if(a==0){
        a=arr.length-1;
        document.getElementById("img1").src=arr[a];
        document.getElementById("lunbo1").style.display="none";
        document.getElementById("lunbo2").style.display="block";
    
    }else{
        a--;
        document.getElementById("img1").src=arr[a];
        document.getElementById("lunbo1").style.display="block";
        document.getElementById("lunbo2").style.display="none";
    }
}
function next(){
    
    if(a==arr.length-1){
        a=0;
        document.getElementById("img1").src=arr[a];
        document.getElementById("lunbo1").style.display="block";
        document.getElementById("lunbo2").style.display="none";
    }else{
        a++;
        document.getElementById("img1").src=arr[a];
        document.getElementById("lunbo2").style.display="block";
        document.getElementById("lunbo1").style.display="none";
    }
    
    }
    var s=0;
 function stop(){
            clearInterval(s);
        }
function start(){
        s=setInterval("next()",5000);
    }
//上面是轮播图
window.onload=function(){
            s=setInterval("next()",5000);//每隔两秒调用一次next函数
            var img=document.getElementById("img1");
            img.addEventListener("mouseover",stop);//当鼠标放在图片上，停止轮播
            img.addEventListener("mouseout",start);//当鼠标移走时，继续轮播
    
    
            var ms = document.getElementById("wechatlogo");
            var ad = document.getElementById("divhover");
            ms.onmouseover = function(){
            ad.style.display = "block";
             };
            ms.onmouseout = function(){
            ad.style.display = "none";
            };//鼠标放在微信图标上显示二维码
    
            var d2 = document.getElementById("d2");
            var in1 = document.getElementById("input1");
            var in2 = document.getElementById("input2");
            d2.onmouseover = function(){
            in1.style.display = "block";
            in2.style.display = "block";
            };
            d2.onmouseout = function(){
            in1.style.display = "none";
            in2.style.display = "none";
            };//鼠标放到d2上，两个左右图片按钮显示
    
            
            document.getElementById("gengduo").onmouseover=function(){
                document.getElementById("gengduo").style.display="block";
            };
            document.getElementById("gengduo").onmouseout=function(){
                document.getElementById("gengduo").style.display="none";
            };
    //鼠标从“gengduo"div中移走后div消失
            
            }

应用windows-10-apps.html主要知识点

1、中间的小图用float浮动横向排列，并且用css中：hover伪类的transform: scale(1.2)属性让图片放大效果，用transition: all 0.6s实现缓冲的视觉效果，以及overflow属性规定当内容溢出元素框时发生的事情

2、下面的效果使运用js中的二维数组，用数组的下标实现，点击一个图片，更换三个不同div中的文字内容和点击图片的背景，在函数中添加一个for循环，实现点击图片换另一张图片，点击其他图片时还原，以此类推

var arr=[["邮件","“邮件”和“日历”应用可帮助你了解最新的电子邮件，管理日程安排并与你最关心的人保持联络。","查看“邮件”应用>","img4/li01.jpg"],["照片","最适合你享受、整理、编辑和分享全部数字回忆的地方。","查看“照片”应用>","img4/li02.jpg"],["相机","重新设计的“相机”应用比以往更快更简单。只需瞄准并按下快门便可自动拍摄到精美图片。可通过所有 Windows 10 设备获得同样的非凡相机体验。","查看“相机”>","img4/li03.jpg"],["人脉","Windows 10 中的“人脉”应用将你与朋友、家人、同事和熟人的所有联系方式集中于一处。","查看“人脉”>","img4/li04.jpg"],["地图","“地图”可引导你去任何地方。借助语音导航和逐向驾驶、公交和步行方向指引来查找路线。","查看“地图”应用>","img4/li05.jpg"],["日历","“邮件”和“日历”应用可帮助你了解最新的电子邮件，管理日程安排并与你最关心的人保持联络。","查看“日历“>","img4/li06.jpg"]];
function show1(){
    
    document.getElementById("show1").innerHTML=arr[0][0];
    document.getElementById("show2").innerHTML=arr[0][1];
    document.getElementById("show3").innerHTML=arr[0][2];
    document.getElementById("email").src=arr[0][3];
for(var i=0;i<arr.length;i++){
                document.getElementById("photo").src="img4/li0202.jpg";            document.getElementById("camera").src="img4/li0303.jpg";
                document.getElementById("people").src="img4/li0404.jpg";
                document.getElementById("map").src="img4/li0505.jpg";
                document.getElementById("calendar").src="img4/li0606.jpg";
            }
}    
function show2()
{
    document.getElementById("show1").innerHTML=arr[1][0];
    document.getElementById("show2").innerHTML=arr[1][1];
    document.getElementById("show3").innerHTML=arr[1][2];
    document.getElementById("photo").src=arr[1][3];
    for(var i=0;i<arr.length;i++){
                document.getElementById("email").src="img4/li0101.jpg";            document.getElementById("camera").src="img4/li0303.jpg";
                document.getElementById("people").src="img4/li0404.jpg";
                document.getElementById("map").src="img4/li0505.jpg";
                document.getElementById("calendar").src="img4/li0606.jpg";
            }
}
function show3()
{
    document.getElementById("show1").innerHTML=arr[2][0];
    document.getElementById("show2").innerHTML=arr[2][1];
    document.getElementById("show3").innerHTML=arr[2][2];
    document.getElementById("camera").src=arr[2][3];
    for(var i=0;i<arr.length;i++){
                document.getElementById("email").src="img4/li0101.jpg";            document.getElementById("photo").src="img4/li0202.jpg";
                document.getElementById("people").src="img4/li0404.jpg";
                document.getElementById("map").src="img4/li0505.jpg";
                document.getElementById("calendar").src="img4/li0606.jpg";
            }
}
function show4()
{
    document.getElementById("show1").innerHTML=arr[3][0];
    document.getElementById("show2").innerHTML=arr[3][1];
    document.getElementById("show3").innerHTML=arr[3][2];
    document.getElementById("people").src=arr[3][3];
    for(var i=0;i<arr.length;i++){
                document.getElementById("email").src="img4/li0101.jpg";            document.getElementById("photo").src="img4/li0202.jpg";
                document.getElementById("camera").src="img4/li0303.jpg";
                document.getElementById("map").src="img4/li0505.jpg";
                document.getElementById("calendar").src="img4/li0606.jpg";
            }
}
function show5()
{
    document.getElementById("show1").innerHTML=arr[4][0];
    document.getElementById("show2").innerHTML=arr[4][1];
    document.getElementById("show3").innerHTML=arr[4][2];
    document.getElementById("map").src=arr[4][3];
    for(var i=0;i<arr.length;i++){
                document.getElementById("email").src="img4/li0101.jpg";            document.getElementById("photo").src="img4/li0202.jpg";
                document.getElementById("camera").src="img4/li0303.jpg";
                document.getElementById("people").src="img4/li0404.jpg";
                document.getElementById("calendar").src="img4/li0606.jpg";
            }
}
function show6()
{
    document.getElementById("show1").innerHTML=arr[5][0];
    document.getElementById("show2").innerHTML=arr[5][1];
    document.getElementById("show3").innerHTML=arr[5][2];
    document.getElementById("calendar").src=arr[5][3];
    for(var i=0;i<arr.length;i++){
                document.getElementById("email").src="img4/li0101.jpg";            document.getElementById("photo").src="img4/li0202.jpg";
                document.getElementById("camera").src="img4/li0303.jpg";
                document.getElementById("people").src="img4/li0404.jpg";
                document.getElementById("map").src="img4/li0505.jpg";
            }
}

////运用数组让三个div分别显示不同的内容