第一阶段项目总结
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()" >更多 <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分别显示不同的内容
