Html5+css做的一款网页设计界面，仿微软官网，导航栏下拉列表，轮播图，具体界面效果如下：
HTML代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Windows | Microsoft Windows 10 家庭版和 Windows 10 专业版操作系统、笔记本电脑、电脑、平板电脑等内容的官方网站</title>
<link rel="shortcut icon" href="img/19.png"/>
<link rel="stylesheet" href="css/ms.css" />
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css" />
<link rel="stylesheet" href="css/Footer.css" />
<script type="text/javascript" src="js/Surface Pro 6.js"></script>
<script type="text/javascript" src="js/ms.js" ></script>
<script type="text/javascript" src="bootstrap-3.3.7-dist/js/bootstrap.js" ></script>
</head>
<body>
<!--整个页面-->
<div class="page">
<!--导航开始-->
<div class="HeaderBase">
<div class="Logo">
<a href="#">
<img src="img/1.png" />
</a>
</div>
<div class="VerticalLine">|</div>
<div class="Surface">
<a href="#"><span>Windows</span></a>
</div>
<ul class="Choose">
<li id="one" onmouseover="showUnderList1()" onmouseout="hidUnderList1()"><a href="#">Windows 10∨</a></li>
<li id="two" onmouseover="showUnderList2()" onmouseout="hidUnderList2()"><a href="#">设备∨</a></li>
<li onmouseover="showUnder3()" onmouseout="hidUnder3()"><a href="#">应用</a></li>
<li onmouseover="showUnder4()" onmouseout="hidUnder4()"><a href="#">游戏</a></li>
<li onmouseover="showUnder5()" onmouseout="hidUnder5()"><a href="#">面向企业</a></li>
<li><a class="Purchase" href="#" style="border: 1px solid;border-radius: 3px;padding: 7px;">购买WINDOWS 10</a></li>
</ul>
<ul class="Choose-">
<li style="font-size: 15px;"><a class="DL">登录</a></li>
<li onmouseover="showUnder8()" onmouseout="hidUnder8()"><a href="#">购物车</a><span class="fa fa-shopping-cart fa-lg"></span></li>
<li onmouseover="showUnder7()" onmouseout="hidUnder7()"><a href="#">搜索</a><span class="fa fa-search fa-lg"></span></li>
<li id="three" onmouseover="showUnder6()" onmouseout="hidUnder6()"><a href="#">所有 Microsoft∨</a></li>
</ul>
</div>
<div id="Under1" onmouseover="showUnderList1()" onmouseout="hidUnderList1()"></div>
<div id="Under2" onmouseover="showUnderList2()" onmouseout="hidUnderList2()"></div>
<div id="Under3" onmouseover="showUnder3()" onmouseout="hidUnder3()"></div>
<div id="Under4" onmouseover="showUnder4()" onmouseout="hidUnder4()"></div>
<div id="Under5" onmouseover="showUnder5()" onmouseout="hidUnder5()"></div>
<div id="Under6" onmouseover="showUnder6()" onmouseout="hidUnder6()"></div>
<div id="Under7" onmouseover="showUnder7()" onmouseout="hidUnder7()"></div>
<div id="Under8" onmouseover="showUnder8()" onmouseout="hidUnder8()"></div>
<div id="UnderList1" onmouseover="showUnderList1()" onmouseout="hidUnderList1()">
<ul>
<li id="Pro" onmouseover="changePro()" onmouseout="rechangePro()">获取 Windows 10                  </li>
<li id="Laptop" onmouseover="changeLaptop()" onmouseout="rechangeLaptop()">为什么使用Windows 10            </li>
<li id="Go" onmouseover="changeGo()" onmouseout="rechangeGo()">功能                      </li>
<li id="Book" onmouseover="changeBook()" onmouseout="rechangeBook()">Window Maxed Reality                          </li>
<li id="Studio" onmouseover="changeStudio()" onmouseout="rechangeStudio()">比较Windows 10 的各个版本           </li>
<li><a href="#">规格</a></li>
</ul>
</div>
<div id="UnderList2" onmouseover="showUnderList2()" onmouseout="hidUnderList2()">
<ul>
<li><a href="#">概述</a></li>
<li><a href="#">笔记本电脑</a></li>
<li><a href="#">二合一设备</a></li>
<li><a href="#">一体机</a></li>
<li><a href="#">游戏电脑</a></li>
<li><a href="#">Windows Mixed Reality 头戴显示设备</a></li>
<li><a href="#">Windows Mixed Reality Ready PC</a></li>
<li><a href="#">手机</a></li>
<li><a href="#">查看所有 设备</a></li>
</ul>
</div>
<div id="All" onmouseover="showUnder6()" onmouseout="hidUnder6()">
<div class="AllNav">
<ul>
<li><a href="#">Office</a></li>
<li><a href="#">Windows</a></li>
<li><a href="#">Surface</a></li>
<li><a href="#">Xbox</a></li>
<li><a href="#">支持</a></li>
</ul>
</div>
<div class="All_Nav">
<h5>Software
最低0.47元/天 解锁文章
扫一扫
370
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
