🌈据说，看我文章时 关注、点赞、收藏 的 帅哥美女们 心情都会不自觉的好起来。
前言：
🧡作者简介：大家好我是 user_from_future ，意思是 “ 来自未来的用户 ” ，寓意着未来的自己一定很棒~
✨个人主页：点我直达，在这里肯定能找到你想要的~
👍专栏介绍：Html+Css+JS / jQuery小型网页综合实战 ，一个专注于分享网页制作实例的专栏~
专栏文章直链：
【网页制作】注册表单页
【网页制作】jQuery操作css实现设置箭头图片
制作要求
合理使用css布局完成百度网盘登录页的模仿制作。
制作效果图
打开 百度网盘登录页 就能看到纯天然无污染的效果图了~
参考源代码
目录结构
└──网页文件夹
├── pan.baidu0.html
├── pan.baidu1.html
└── pan.baidu2.html
为什么没有任何图片素材？都模仿网页了，图片肯定直接上原链呀！
pan.baidu0.html
看过前两篇文章的读者都知道，我这又是分了三步来实现网页效果了，但实际上三步是被迫了，我本来想实现两步，但第三步是在要求下，对网页 “降档” 处理的作品（丢掉部分网页响应式布局）。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>百度网盘-免费云盘丨文件共享软件丨超大容量丨存储安全</title>
<!-- https://pan.baidu.com/ -->
<!-- <link rel="stylesheet" href="main.css" /> -->
<!-- <script type="text/javascript" src="main.js"></script> -->
<link href="https://nd-static.bdstatic.com/m-static/infocenter/static/images/favicon.ico" rel="shortcut icon"
type="images/x-icon">
<style>
* {
margin: 0;
padding: 0;
}
body {
font-size: 14px;
font-family: Microsoft YaHei, SimHei, Tahoma !important;
}
a {
color: #999;
cursor: pointer;
text-decoration: none;
}
@media screen and (min-width: 1400px) {
#main {
width: 100%;
height: 720px;
overflow: hidden;
min-width: 1200px;
background-color: red;
}
}
@media screen and (max-width: 1400px) {
#main {
width: 100%;
height: 550px;
overflow: hidden;
min-width: 1102px;
background-color: red;
}
}
#header {
width: 100%;
height: 60px;
overflow: hidden;
min-width: 1002px;
background-color: blue;
}
#text {
bottom: 0;
clear: both;
height: calc(100% - 60px);
width: 1102px;
margin: 0 auto;
overflow: hidden;
position: relative;
background-color: #0F0;
}
#login {
right: 0;
float: right;
width: 312px;
z-index: 999;
height: 400px;
padding: 0 20px;
position: absolute;
border-radius: 4px;
background-color: #FFF;
top: calc(50% - 200px);
box-shadow: rgb(0 0 0 / 30%) 0 0 50px;
}
#download {
clear: both;
width: 750px;
height: 110px;
margin: 0 auto;
margin-top: 30px;
background-color: yellow;
}
#footer {
width: 100%;
color: #b6bac3;
font-size: 12px;
text-align: center;
padding-bottom: 10px;
}
#teamwork {
display: none;
}
</style>
</head>
<body>
<noscript>你的浏览器没有启用 JavaScript ，无法为您加载网页</noscript>
<!-- 首先定义大局，三大部件，并确认他们的最外层响应式大小。 -->
<div id="main">
<div id="header">先将头部做完，再搞登录框，最后再弄轮播图和鼠标移动上效果！</div>
<div id="text">
<div id="login"></div>
</div>
</div>
<div id="download"></div>
<div id="footer">
<div xmlns="http://www.w3.org/1999/xhtml">©2022 Baidu <div href="javascript:;"
style="display: inline-block;">商务合作
<div id="teamwork">
<ul>
<li><span>·</span>会员业务合作联系：bccwp@baidu.com</li>
<li><span>·</span>开放平台业务合作联系：mars-union@baidu.com<a
href="https://pan.baidu.com/union?from=web" target="_blank">了解更多</a></li>
</ul>
</div>
</div> | <a href="https://pan.baidu.com/disk/duty/" target="_blank">服务协议</a> | <a
href="http://yun.baidu.com/disk/privacy" target="_blank">权利声明</a> | <a
href="http://yun.baidu.com/disk/version" target="_blank">版本更新</a> | <a
href="http://yun.baidu.com/disk/help" target="_blank">帮助中心</a> | <a
href="http://copyright.baidu.com/index.php/index/complaint" target="_blank">版权投诉</a> | <a
href="http://e.baidu.com?refer=1008" target="_blank">百度营销</a> | <a
href="http://pan.baidu.com/disk/main#/certification/introductionweb?from=loginFooter"
target="_blank">企业认证</a></div>
</div>
<script></script>
</body>
</html>
预先做好网页，必先清楚大局，将大框架搭建好，尾部只有文字也能加上，后面做起来会非常顺滑，效果图：
pan.baidu1.html
在上面位置划分之后，我就已经加入响应式布局了，几乎完全模仿官网的响应（博主要做一个精致的男人）~
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>百度网盘-免费云盘丨文件共享软件丨超大容量丨存储安全</title>
<!-- https://pan.baidu.com/ -->
<!-- <link rel="stylesheet" href="main.css" /> -->
<!-- <script type="text/javascript" src="main.js"></script> -->
<link href="https://nd-static.bdstatic.com/m-static/infocenter/static/images/favicon.ico" rel="shortcut icon"
type="images/x-icon">
<style>
* {
margin: 0;
padding: 0;
}
body {
font-size: 14px;
font-family: Microsoft YaHei, SimHei, Tahoma !important;
}
a {
color: #999;
cursor: pointer;
text-decoration: none;
}
ul {
list-style-type: none;
}
ul>li {
float: left;
}
@media screen and (min-width: 1400px) {
#main {
width: 100%;
height: 720px;
overflow: hidden;
min-width: 1200px;
position: relative;
}
.bg {
left: 0;
width: 100%;
height: 720px;
z-index: -999;
min-width: 1200px;
object-fit: cover;
position: absolute;
}
}
@media screen and (max-width: 1400px) {
#main {
width: 100%;
height: 550px;
overflow: hidden;
min-width: 1102px;
position: relative;
}
.bg {
left: 0;
width: 100%;
height: 550px;
z-index: -999;
min-width: 1102px;
object-fit: cover;
position: absolute;
}
}
#header {
width: 100%;
height: 60px;
overflow: hidden;
min-width: 1002px;
}
#logo {
float: left;
width: 157px;
height: 33px;
display: inline;
overflow: hidden;
margin: 13px 0 0 25px;
}
#bar {
float: right;
height: 60px;
}
#bar>a {
color: #FFF;
line-height: 80px;
margin-right: 20px;
}
#bar>a:hover {
text-decoration: underline;
}
.huiyuan {
padding: 4px 10px;
border-radius: 20px;
background-color: #F0D7A3;
}
#text {
bottom: 0;
clear: both;
height: calc(100% - 60px);
width: 1102px;
margin: 0 auto;
overflow: hidden;
position: relative;
}
.banner {
color: #FFF;
bottom: 80px;
font-size: 44px;
position: absolute;
}
.banner>p {
position: relative;
padding: 10px 100px;
}
.left {
top: 8px;
left: 40px;
width: 46px;
height: 32px;
overflow: hidden;
position: absolute;
background: url(https://nd-static.bdstatic.com/m-static/infocenter/static/images/16new/leftquote.png) no-repeat top;
}
.right {
top: 20px;
right: 40px;
width: 46px;
height: 32px;
overflow: hidden;
position: absolute;
background: url(https://nd-static.bdstatic.com/m-static/infocenter/static/images/16new/rightquote.png) no-repeat top;
}
#login {
right: 0;
float: right;
width: 312px;
z-index: 999;
height: 400px;
padding: 0 20px;
position: absolute;
border-radius: 4px;
background-color: #FFF;
top: calc(50% - 200px);
box-shadow: rgb(0 0 0 / 30%) 0 0 50px;
}
#pass {
margin: 42px 0 0 0px;
font-size: 18px;
text-align: left;
font-weight: 600;
}
#sms {
top: 42px;
right: 20px;
width: auto;
height: auto;
background: 0;
color: #09AAFF;
cursor: pointer;
font-size: 16px;
position: absolute;
}
form {
width: 310px;
margin-top: 40px;
}
form>p {
width: 100%;
height: 41px;
}
form>p>input {
width: 100%;
height: 100%;
outline: none;
padding-left: 15px;
border: 1px solid #E7E7E7;
}
form>p>input[type="button"] {
border: 0;
color: #FFF;
cursor: pointer;
margin-top: 60px;
border-radius: 4px;
background-color: #09AAFF;
}
form>p>input[type="button"]:hover {
opacity: 0.8;
}
#forget {
color: #666;
margin: 5px;
font-size: 14px;
cursor: pointer;
margin-top: 70px;
}
#bottom {
left: 0;
bottom: 0;
width: 100%;
height: 65px;
position: absolute;
background-color: #f3f8ff;
}
#scan {
float: left;
color: #09AAFF;
cursor: pointer;
margin-left: 20px;
line-height: 65px;
}
#other {
float: left;
width: 120px;
margin-left: 50px;
line-height: 80px;
}
#other>li {
cursor: pointer;
margin-left: 5px;
}
#register {
float: left;
color: #09AAFF;
cursor: pointer;
text-align: right;
line-height: 65px;
}
#sms:hover, #forget:hover, #scan:hover, #register:hover, #other>li:hover {
opacity: 0.5;
}
#download {
clear: both;
width: 750px;
height: 110px;
margin: 0 auto;
margin-top: 30px;
}
#download>li {
width: 150px;
height: 70px;
text-indent: -999em;
}
#download>li>a {
width: 90px;
height: 70px;
display: block;
margin: 0 auto;
cursor: pointer;
background: url(https://nd-static.bdstatic.com/m-static/infocenter/static/images/16new/newlogin.png) no-repeat;
}
#footer {
width: 100%;
color: #b6bac3;
font-size: 12px;
text-align: center;
padding-bottom: 10px;
}
</style>
</head>
<body>
<noscript>你的浏览器没有启用 JavaScript ，无法为您加载网页</noscript>
<!-- 首先定义大局，三大部件，并确认他们的最外层响应式大小。 -->
<div id="main">
<img class="bg" id="bg1"
src="https://nd-static.bdstatic.com/m-static/infocenter/static/images/16new/bg1.png"
style="display: block;" />
<img class="bg" id="bg2"
src="https://nd-static.bdstatic.com/m-static/infocenter/static/images/16new/bg2.jpg"
style="display: none;" />
<img class="bg" id="bg3"
src="https://nd-static.bdstatic.com/m-static/infocenter/static/images/16new/bg3.jpg"
style="display: none;" />
<img class="bg" id="bg4"
src="https://nd-static.bdstatic.com/m-static/infocenter/static/images/16new/bg4.jpg"
style="display: none;" />
<div id="header">
<a id="logo" href="https://pan.baidu.com/"><img
src="https://nd-static.bdstatic.com/m-static/infocenter/static/images/16new/logo.png" /></a>
<div id="bar">
<a class="item" href="http://yun.baidu.com/res/static/notic.html" target="_blank"
style="color: #F00;">严打违规文件公告及非法有害信息举报入口</a>
<a class="bar-item" href="http://www.baidu.com" target="_blank">百度首页</a>
<a class="bar-item" href="//pan.baidu.com/download" target="_blank">客户端下载</a>
<a class="bar-item" href="http://weibo.com/p/1006062952668222" target="_blank">官方微博</a>
<a class="bar-item" href="https://help.baidu.com/newadd?prod_id=29&category=2&ptype=48"
target="_blank">问题反馈</a>
<a class="bar-item f-ln-trans"
href="https://pan.baidu.com/disk/main#/certification/introductionweb?from=webdl"
target="_blank">企业认证</a>
<a class="bar-item" href="https://pan.baidu.com/union?from=panlogin" target="_blank">开放平台</a>
<a class="bar-item huiyuan" href="https://pan.baidu.com/buy/center?tag=8&from=loginpage"
target="_blank" style="color: #333; text-decoration: none;">会员中心</a>
</div>
</div>
<div id="text">
<div class="banner" id="banner1" style="display: block;">
<p><span class="left"></span>百度网盘企业版</p>
<p>企业级文件极速传输工具<span class="right"></span></p>
</div>
<div class="banner" id="banner2" style="display: none;">
<p><span class="left"></span>在线预览</p>
<p>文件即开即看<span class="right"></span></p>
</div>
<div class="banner" id="banner3" style="display: none;">
<p><span class="left"></span>多端并用</p>
<p>数据随身携带<span class="right"></span></p>
</div>
<div class="banner" id="banner4" style="display: none;">
<p><span class="left"></span>好友分享</p>
<p>共度幸福时光<span class="right"></span></p>
</div>
<div id="login">
<div id="pass">账号密码登录</div>
<div id="sms">短信快捷登录></div>
<form>
<p><input type="text" placeholder="手机号/用户名/邮箱" /></p>
<p><input type="password" placeholder="密码" /></p>
<p><input type="button" value="登录" /></p>
</form>
<div id="forget">忘记密码？</div>
<div id="bottom">
<div id="scan">扫一扫登录</div>
<ul id="other">
<li><img
src="https://nd-static.bdstatic.com/m-static/infocenter/static/images/16new/logo_sinaweibo.png" />
</li>
<li><img
src="https://nd-static.bdstatic.com/m-static/infocenter/static/images/16new/logo_qq.png" />
</li>
<li><img
src="https://nd-static.bdstatic.com/m-static/infocenter/static/images/16new/logo_wechat.png" />
</li>
</ul>
<div id="register">立即注册</div>
</div>
</div>
</div>
</div>
<ul id="download">
<li><a href="https://issuepcdn.baidupcs.com/issue/netdisk/yunguanjia/BaiduNetdisk_7.14.1.6.exe"
style="background-position: -500px -70px;">Windows</a>
</li>
<li><a href="https://downpack.baidu.com/Baidunetdisk_AndroidPhone_1026962m.apk"
style="background-position: -320px 0px;">Android</a></li>
<li><a href="http://itunes.apple.com/cn/app/bai-du-wang-pan/id547166701?mt=8"
style="background-position: -270px -160px;">iPhone</a></li>
<li><a href="http://itunes.apple.com/cn/app/bai-du-yun-hd/id554602005?mt=8"
style="background-position: -500px 0px;">iPad</a></li>
<li><a href="https://issuepcdn.baidupcs.com/issue/netdisk/MACguanjia/BaiduNetdisk_mac_4.7.1.dmg"
style="background-position: -180px -160px;">MAC</a>
</li>
</ul>
<div id="footer">
<div xmlns="http://www.w3.org/1999/xhtml">©2022 Baidu <div href="" style="display: inline-block;">商务合作
</div> | <a href="https://pan.baidu.com/disk/duty/" target="_blank">服务协议</a> | <a
href="http://yun.baidu.com/disk/privacy" target="_blank">权利声明</a> | <a
href="http://yun.baidu.com/disk/version" target="_blank">版本更新</a> | <a
href="http://yun.baidu.com/disk/help" target="_blank">帮助中心</a> | <a
href="http://copyright.baidu.com/index.php/index/complaint" target="_blank">版权投诉</a> | <a
href="http://e.baidu.com?refer=1008" target="_blank">百度营销</a> | <a
href="http://pan.baidu.com/disk/main#/certification/introductionweb?from=loginFooter"
target="_blank">企业认证</a></div>
</div>
<script>
function auto_change_picture() {
var l = ["1", "2", "3", "4"];
for (var i = 0; i < l.length; i++) {
if (document.getElementById("bg" + l[i]).style.display == "block") {
document.getElementById("bg" + l[i]).style.display = "none";
document.getElementById("banner" + l[i]).style.display = "none";
if (i + 1 >= l.length) {
j = 0;
} else {
j = i + 1;
}
document.getElementById("bg" + l[j]).style.display = "block";
document.getElementById("banner" + l[j]).style.display = "block";
break;
}
}
}
setInterval(auto_change_picture, 6000);
</script>
</body>
</html>
从100多行代码直接暴涨到400多行代码，就直接完成了，其实我当时还忘了做那四个小点点和鼠标移动缩放，就是：
主要还是因为那天有点晚了，加上我困了，加上我忘了，种种因素让我没有实现这个，但想实现的人总能把它实现好的对吧？
效果图：
基本模仿官网的响应程度，并将各处的鼠标样式也模仿过来了，该出现鼠标小手的时候就会出现鼠标小手。
现在看上去好像和官网有点区别，这很正常，因为我这是之前，一个多月前做的了，今天才决定发出来。
pan.baidu2.html
接下来这个版本的阉割版本，去掉了响应式处理，但在全屏模式下也看不出来啥：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>百度网盘-免费云盘丨文件共享软件丨超大容量丨存储安全</title>
<!-- https://pan.baidu.com/ -->
<link href="https://nd-static.bdstatic.com/m-static/infocenter/static/images/favicon.ico" rel="shortcut icon"
type="images/x-icon">
<style>
* {
margin: 0;
padding: 0;
}
body {
font-size: 14px;
font-family: Microsoft YaHei, SimHei, Tahoma !important;
}
a {
color: #999;
cursor: pointer;
text-decoration: none;
}
ul {
list-style-type: none;
}
ul>li {
float: left;
}
#main {
width: 100%;
height: 720px;
overflow: hidden;
min-width: 1200px;
position: relative;
}
.bg {
left: 0;
width: 100%;
height: 720px;
z-index: -999;
min-width: 1200px;
object-fit: cover;
position: absolute;
}
#header {
width: 100%;
height: 60px;
overflow: hidden;
min-width: 1002px;
}
#logo {
float: left;
width: 157px;
height: 33px;
display: inline;
overflow: hidden;
margin: 13px 0 0 25px;
}
#bar {
float: right;
height: 60px;
}
#bar>a {
color: #FFF;
line-height: 80px;
margin-right: 20px;
}
#bar>a:hover {
text-decoration: underline;
}
.huiyuan {
padding: 4px 10px;
border-radius: 20px;
background-color: #F0D7A3;
}
#text {
bottom: 0;
clear: both;
height: calc(100% - 60px);
width: 1102px;
margin: 0 auto;
overflow: hidden;
position: relative;
}
.banner {
color: #FFF;
bottom: 80px;
font-size: 44px;
position: absolute;
}
.banner>p {
position: relative;
padding: 10px 100px;
}
.left {
top: 8px;
left: 40px;
width: 46px;
height: 32px;
overflow: hidden;
position: absolute;
background: url(https://nd-static.bdstatic.com/m-static/infocenter/static/images/16new/leftquote.png) no-repeat top;
}
.right {
top: 20px;
right: 40px;
width: 46px;
height: 32px;
overflow: hidden;
position: absolute;
background: url(https://nd-static.bdstatic.com/m-static/infocenter/static/images/16new/rightquote.png) no-repeat top;
}
#login {
right: 0;
float: right;
width: 312px;
z-index: 999;
height: 400px;
padding: 0 20px;
position: absolute;
border-radius: 4px;
background-color: #FFF;
top: calc(50% - 200px);
box-shadow: rgb(0 0 0 / 30%) 0 0 50px;
}
#pass {
margin: 42px 0 0 0px;
font-size: 18px;
text-align: left;
font-weight: 600;
}
#sms {
top: 42px;
right: 20px;
width: auto;
height: auto;
background: 0;
color: #09AAFF;
cursor: pointer;
font-size: 16px;
position: absolute;
}
form {
width: 310px;
margin-top: 40px;
}
form>p {
width: 100%;
height: 41px;
}
form>p>input {
width: 100%;
height: 100%;
outline: none;
padding-left: 15px;
border: 1px solid #E7E7E7;
}
form>p>input[type="button"] {
border: 0;
color: #FFF;
cursor: pointer;
margin-top: 60px;
border-radius: 4px;
background-color: #09AAFF;
}
#forget {
color: #666;
margin: 5px;
font-size: 14px;
cursor: pointer;
margin-top: 70px;
}
#bottom {
left: 0;
bottom: 0;
width: 100%;
height: 65px;
position: absolute;
background-color: #f3f8ff;
}
#scan {
float: left;
color: #09AAFF;
cursor: pointer;
margin-left: 20px;
line-height: 65px;
}
#other {
float: left;
width: 120px;
margin-left: 50px;
line-height: 80px;
}
#other>li {
cursor: pointer;
margin-left: 5px;
}
#register {
float: left;
color: #09AAFF;
cursor: pointer;
text-align: right;
line-height: 65px;
}
#sms:hover, #scan:hover, #register:hover {
color: #84D5FF;
}
#download {
clear: both;
width: 750px;
height: 110px;
margin: 0 auto;
margin-top: 30px;
}
#download>li {
width: 150px;
height: 70px;
text-indent: -999em;
}
#download>li>a {
width: 90px;
height: 70px;
display: block;
margin: 0 auto;
cursor: pointer;
background: url(https://nd-static.bdstatic.com/m-static/infocenter/static/images/16new/newlogin.png) no-repeat;
}
#footer {
width: 100%;
color: #b6bac3;
font-size: 12px;
text-align: center;
padding-bottom: 10px;
}
</style>
</head>
<body>
<noscript>你的浏览器没有启用 JavaScript ，无法为您加载网页</noscript>
<!-- 首先定义大局，三大部件，并确认他们的最外层响应式大小。 -->
<div id="main">
<img class="bg" id="bg1"
src="https://nd-static.bdstatic.com/m-static/infocenter/static/images/16new/bg1.png"
style="display: block;" />
<img class="bg" id="bg2"
src="https://nd-static.bdstatic.com/m-static/infocenter/static/images/16new/bg2.jpg"
style="display: none;" />
<img class="bg" id="bg3"
src="https://nd-static.bdstatic.com/m-static/infocenter/static/images/16new/bg3.jpg"
style="display: none;" />
<img class="bg" id="bg4"
src="https://nd-static.bdstatic.com/m-static/infocenter/static/images/16new/bg4.jpg"
style="display: none;" />
<div id="header">
<a id="logo" href="https://pan.baidu.com/"><img
src="https://nd-static.bdstatic.com/m-static/infocenter/static/images/16new/logo.png" /></a>
<div id="bar">
<a class="item" href="http://yun.baidu.com/res/static/notic.html" target="_blank"
style="color: #F00;">严打违规文件公告及非法有害信息举报入口</a>
<a class="bar-item" href="http://www.baidu.com" target="_blank">百度首页</a>
<a class="bar-item" href="//pan.baidu.com/download" target="_blank">客户端下载</a>
<a class="bar-item" href="http://weibo.com/p/1006062952668222" target="_blank">官方微博</a>
<a class="bar-item" href="https://help.baidu.com/newadd?prod_id=29&category=2&ptype=48"
target="_blank">问题反馈</a>
<a class="bar-item f-ln-trans"
href="https://pan.baidu.com/disk/main#/certification/introductionweb?from=webdl"
target="_blank">企业认证</a>
<a class="bar-item" href="https://pan.baidu.com/union?from=panlogin" target="_blank">开放平台</a>
<a class="bar-item huiyuan" href="https://pan.baidu.com/buy/center?tag=8&from=loginpage"
target="_blank" style="color: #333; text-decoration: none;">会员中心</a>
</div>
</div>
<div id="text">
<div class="banner" id="banner1" style="display: block;">
<p><span class="left"></span>百度网盘企业版</p>
<p>企业级文件极速传输工具<span class="right"></span></p>
</div>
<div class="banner" id="banner2" style="display: none;">
<p><span class="left"></span>在线预览</p>
<p>文件即开即看<span class="right"></span></p>
</div>
<div class="banner" id="banner3" style="display: none;">
<p><span class="left"></span>多端并用</p>
<p>数据随身携带<span class="right"></span></p>
</div>
<div class="banner" id="banner4" style="display: none;">
<p><span class="left"></span>好友分享</p>
<p>共度幸福时光<span class="right"></span></p>
</div>
<div id="login">
<div id="pass">账号密码登录</div>
<div id="sms">短信快捷登录></div>
<form>
<p><input type="text" placeholder="手机号/用户名/邮箱" /></p>
<p><input type="password" placeholder="密码" /></p>
<p><input type="button" value="登录" /></p>
</form>
<div id="forget">忘记密码？</div>
<div id="bottom">
<div id="scan">扫一扫登录</div>
<ul id="other">
<li><img
src="https://nd-static.bdstatic.com/m-static/infocenter/static/images/16new/logo_sinaweibo.png" />
</li>
<li><img
src="https://nd-static.bdstatic.com/m-static/infocenter/static/images/16new/logo_qq.png" />
</li>
<li><img
src="https://nd-static.bdstatic.com/m-static/infocenter/static/images/16new/logo_wechat.png" />
</li>
</ul>
<div id="register">立即注册</div>
</div>
</div>
</div>
</div>
<ul id="download">
<li><a href="https://issuepcdn.baidupcs.com/issue/netdisk/yunguanjia/BaiduNetdisk_7.14.1.6.exe"
style="background-position: -500px -70px;">Windows</a>
</li>
<li><a href="https://downpack.baidu.com/Baidunetdisk_AndroidPhone_1026962m.apk"
style="background-position: -320px 0px;">Android</a></li>
<li><a href="http://itunes.apple.com/cn/app/bai-du-wang-pan/id547166701?mt=8"
style="background-position: -270px -160px;">iPhone</a></li>
<li><a href="http://itunes.apple.com/cn/app/bai-du-yun-hd/id554602005?mt=8"
style="background-position: -500px 0px;">iPad</a></li>
<li><a href="https://issuepcdn.baidupcs.com/issue/netdisk/MACguanjia/BaiduNetdisk_mac_4.7.1.dmg"
style="background-position: -180px -160px;">MAC</a>
</li>
</ul>
<div id="footer">
<div xmlns="http://www.w3.org/1999/xhtml">©2022 Baidu <div href="" style="display: inline-block;">商务合作
</div> | <a href="https://pan.baidu.com/disk/duty/" target="_blank">服务协议</a> | <a
href="http://yun.baidu.com/disk/privacy" target="_blank">权利声明</a> | <a
href="http://yun.baidu.com/disk/version" target="_blank">版本更新</a> | <a
href="http://yun.baidu.com/disk/help" target="_blank">帮助中心</a> | <a
href="http://copyright.baidu.com/index.php/index/complaint" target="_blank">版权投诉</a> | <a
href="http://e.baidu.com?refer=1008" target="_blank">百度营销</a> | <a
href="http://pan.baidu.com/disk/main#/certification/introductionweb?from=loginFooter"
target="_blank">企业认证</a></div>
</div>
<script>
function auto_change_picture() {
var l = ["1", "2", "3", "4"];
for (var i = 0; i < l.length; i++) {
if (document.getElementById("bg" + l[i]).style.display == "block") {
document.getElementById("bg" + l[i]).style.display = "none";
document.getElementById("banner" + l[i]).style.display = "none";
if (i + 1 >= l.length) {
j = 0;
} else {
j = i + 1;
}
document.getElementById("bg" + l[j]).style.display = "block";
document.getElementById("banner" + l[j]).style.display = "block";
break;
}
}
}
setInterval(auto_change_picture, 6000);
</script>
</body>
</html>
然后他的效果图，全屏起来和之前的版本是一致的：
致谢
本篇实例素材来自于 X Y H 🧡 ~
2427
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
