【网页制作】制作百度网盘登录页

Python个人网盘源码、云盘系统源程序,基于Django+Mysql Python个人网盘源码、云盘系统源程序,基于Django+Mysql。2、检查配置文件,修改邮箱和数据库配置。4、执行基础sql文件。 阅读详情

🌈据说,看我文章时 关注、点赞、收藏 的 帅哥美女们 心情都会不自觉的好起来。

前言:
🧡作者简介:大家好我是 user_from_future ,意思是 “ 来自未来的用户 ” ,寓意着未来的自己一定很棒~
✨个人主页:点我直达,在这里肯定能找到你想要的~
👍专栏介绍:Html+Css+JS / jQuery小型网页综合实战 ,一个专注于分享网页制作实例的专栏~

专栏文章直链:
【网页制作】注册表单页
【网页制作】jQuery操作css实现设置箭头图片

人生苦短,我用python

制作要求

合理使用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&amp;category=2&amp;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&amp;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&amp;category=2&amp;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&amp;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 🧡 ~

期末又要到了,网页设计作业模版分享(包含网盘链接) 链接:https://pan.baidu.com/s/1JYw2ItQM5tkvTcD837_fGA? 阅读详情

相关推荐

600多个H5网页模板百度云盘

H5网页模板、博客、网站等。

推荐几款网盘源码程序

喜欢收集资源,喜欢分享资源,网盘无疑是必不可少的工具。百度、阿里网盘虽然很好用,但自己有硬盘和主机资源的,都想自建网盘存储数据,实现存储自由和数据安心。

正安一片瓦的软件技术园地 6万+

HTML炫酷的前端登录页面

HTML炫酷的前端登录页面,压缩包里面附带源码,页面炫酷动态

HTML简单的个人博客网站 DIV学生网页设计作品 dreamweaver作业静态HTML网页设计模板 个人网页作业制作

🧑个人网页设计、🙋‍♂️个人简历制作、👨‍💼简单静态HTML个人网页作品、👨‍🏭个人介绍网站模板 、等网站的设计与制作。⭐个人网页设计网站模板采用DIV CSS布局制作,网页作品有多个页面,如 :个人介绍(文字页面)、我的作品(图片列表)、个人技能(图文页面)、在线留言(表单页面)CSS样式方面网页整体采用左右布局结构,制作了网页背景图片,导航区域每个导航背景色不同,导航背景色与页面背景呼应。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面:计划采用目前主流的、能兼容各大

网页设计与制作 | HTML+CSS+JS 513

基于opencv-ANN的水果识别模型训练

本文通过opencv-ann-mlp训练模型,实现对五种水果进行分类识别。本文详细介绍该项目的各个过程,包括数据准备、预处理、样本读取、训练数据集制作、训练标签制作、模型参数设置、模型训练,模型测试验证等,总结该过程需要注意的事项。

qq_15985873的博客 3974

ADRV9026初始化避坑指南:手把手调试PostMcsInit常见故障

本文详细解析了ADRV9026多片同步初始化过程中的PostMcsInit常见故障,包括时钟校准失败、JESD链路建立问题和ARM核通信异常等。通过实际项目经验,提供了硬件检查清单、软件配置要点和分层诊断方法,帮助工程师快速定位和解决问题,提升系统稳定性。

hadoop5ranger的博客 620

网盘类型的UI设计分享,干净简洁

ycy_UI的博客 1197

Python实现安居客新房数据抓取简易版

本文介绍使用Python爬取安居客新房楼盘数据的方法,重点针对三四线城市。通过分析移动端H5页面结构,采用滚动加载方式获取推荐楼盘列表(class="recomm-list"),从中提取楼盘ID并拼接详情页链接。代码展示了如何解析HTML标签获取楼盘名称、状态、价格、户型等基本信息,并处理图片URL。爬取过程涉及一个一级页面和两个二级页面,同时提到可能遇到的验证码问题将在后续处理。核心代码使用BeautifulSoup解析HTML,requests发送请求,并将数据存入MySQL数据库。

qq_37604998的博客 476

Linux系统下C语言实现百度网盘(附实现步骤,和全部代码讲解)

本篇文章,着重讲解linux操作系统下,用C语言实现一个网盘的大概框架,包括查询文件,上传文件,下载文件的一些功能。并附有全部的代码,详细易懂。

m0_63669388的博客 3738

Springer期刊LaTeX模板中参考文献格式选择与编译错误的快速修复指南

本文针对Springer期刊LaTeX模板中参考文献编译后显示问号的常见问题,提供了快速修复指南。核心在于正确选择并配置与期刊匹配的参考文献格式文件(.bst),并执行标准的四步编译流程。文章详细解释了问题根源,并给出了从查找正确.bst文件到修改代码、执行编译的完整解决方案,帮助作者高效解决投稿中的技术障碍。

weixin_29266007的博客 402

openwrt之luci通信原理(一)

从模板中分离,每个LuCI2子页面也需要一个定义并存放在/www/luci2/view/目录下的一个视图,视图是使用了子页面特定对象的L.ui.view扩展的JavaScript文件。有一点需要注意的是需要提供execute方法,创建视图失败有几种原因,特别是当它需要ubus加载额外的数据使用的时候。所以在execute方法中提供成功或者失败的信息是有意义的。不幸的是在异步方法加载特定数据的时候,不能简单的返回true或false,解决的方法是返回一个Promise对象来运行推迟提供是否成功的信息。

1150

网页制作 Html制作简单而漂亮的登录页面

网页制作 Html制作简单而漂亮的登录页面 先来看看样子。 html源码: XML/HTML Code复制内容到剪贴板 > <htmllang="en"> <head> <metacharset="UTF-8"> <title>Logintitle> <linkrel="stylesheet"type="text/css"href="Login.css"/> head> <body> &

2824

在 ABAP SEGW OData 服务里,把 Function Import 参数长度校验真正跑起来

SAP Gateway服务中Function Import参数长度校验的实现机制解析:在SEGW中定义Max Length参数后,需通过模型特性USE_STRICT_FUNCTION_PARAM_CHK(7.52+版本支持)启用严格检查。该特性需在MPC_EXT的DEFINE方法中设置,框架会在URI解析阶段拦截超长参数,避免错误进入业务逻辑。对于低版本系统,建议在应用层手动添加校验。这种模型驱动的方式符合Clean Core原则,能有效提升接口健壮性。

2007 年 ~ 2025 年,深耕 SAP 技术 18 年 494

【网页制作】jQuery制作动态指针钟表

jQuery制作动态指针钟表

user_from_future的博客 1568

uniapp - 实现移动端H5微信公众号网页内置浏览器中预览和下载word文档(doc)、excel表格(xls)、ppt文稿、pdf文档等文件,微信内部打开预览和下载到本地详教程,兼容安卓苹果手机

uni-app,微信公众号,h5,移动端,web平台端,网页,网站,Uniapp微信公众号H5网站,内置浏览器下载文档,如何在微信浏览器中预览office文件,word文档,excel文档,pdf文档,ppt文档,office,微信内置浏览器下载文件,下载文件,在微信浏览器里面实现下载任意文件,H5需要在微信浏览器中下载excel文件,UniApp实现网页在微信内置浏览器中下载文件详细教程,安卓点击下载会提示打开浏览器,后端返回流文件,如何解决无法下载文件,跳转至浏览器下载文件,发送到电脑微信,安卓,苹果,

🏆 前端领域优质创作者 1万+

Allegro172版本如何在联机模式下使用skill文件操作指导

注意:如果下次重新开启Symphony模式的时候可能导致symphony_skill中的文件内容被清空,所以最好将自己常用的skill文件都写到symphony_skill.txt中去,然后做好备份,需要的时候,在开启软件后把文件放到env目录中去。在用Allegeo172版本进行PCB设计的时候,有时会用到Symphony模式进行多人实时在线协同设计,如下图。这个模式设计起来可以提升设计速度,但是也有一个缺陷,就是不能使用skill文件。如下图,当调用skill的时候就会出现如下报错。

weixin_54787054的博客 1588

【网页制作】制作静态钟表

制作静态钟表

user_from_future的博客 1054

计算机控制技术及应用

《计算机控制技术及应用》通过总结作者的科研成果和吸收国内外的先进理论、方法和技术,以计算机控制系统的网络化、开放化、智能化和集成化发展趋势为主线索,主要介绍计算机控制系统的基本概念和计算机控制系统的典型形式,计算机控制系统的数学描述与基本分析方法,以及数字PID控制器、最少拍控制系统、达林算法、状态变量设计法等设计方法及其各种改进算法。重点突出计算机控制系统输入输出通道接口的设计方法和典型控制系统的设计案例与实现方法等。

【网页制作】原生JavaScript制作汉字时钟

原生JavaScript制作汉字时钟

user_from_future的博客 850

IEM模型,地表粗糙度模拟

利用微波反演土壤水分时候,利用IEM模型可以实现对随机地表的模拟

SAP B1中文培訓教材_SDK

公司内部培训资料,对开发工具 ,DIAPI, UIAPI,Add-ON有详细解说

【网页制作】原生JavaScript制作“井字棋”

原生JavaScript制作“井字棋”

user_from_future的博客 821

复分析 阿尔福斯(Ahlfors) 第三版答案 英文

答案分为十章,有部分习题没有答案,全英文复分析阿尔福斯(Ahlfors) 第三版答案

【网页制作】jQuery模拟提交表单生成卡片

使用jQuery模拟提交表单生成卡片

user_from_future的博客 587

【网页制作】jQuery控制页面侧边栏的收缩与展开

jQuery控制页面侧边栏的收缩与展开

user_from_future的博客 1536

专栏博文目录

专栏博文目录

qq_39603829的博客 870

php网盘代码,php网盘源码

【实例简介】php网盘源码【实例截图】【核心代码】e93956c1-bd16-4ee0-8605-9d6e3787e56e├── docs│ ├── about.html│ ├── change.html│ ├── install.html│ └── license.html├── readme.txt└── upload├── account.php├── admin│ ├─...

weixin_35750953的博客 1175

HTML+CSS实现百度网盘首页

HTML+CSS实现百度云盘首页 HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="./css/index.css" /> </head> <body> <!-- 头部信息 -->

matafeiyanll的博客 5013

220套html模版百度云,220套静态网页模板

【实例简介】220套静态网页模板【实例截图】【核心代码】静态网页└── 静态网页├── 001.rar├── 002.rar├── 003.rar├── 004.rar├── 005.rar├── 006.rar├── 007.rar├── 008.rar├── 009.rar├── 010.rar├── 102.rar├── 103.rar├── 104.rar├── 105.rar├── 10...

weixin_35671798的博客 1957

自己写个网盘系列:② 看我用不到700行代码,完成了个网盘后端编码

使用不到700行代码,基本实现了整个网盘的常用功能:文件夹、文件增删改,文件分享,前端一些预览功能(这部分没怎么编码),使用的技术也非常简单,但是不可否认,这已经是一个完整的项目,快来一起学习吧。

hhaaii11的博客 1290
上一篇: 【网页制作】注册表单页
下一篇: 我终于突破千粉啦~
user_from_future
博客等级 码龄5年 4067粉丝 115原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值