网易邮箱 html scc js

最新推荐文章于 2023-05-26 19:17:14 发布

原创最新推荐文章于 2023-05-26 19:17:14 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #css #html

本文详细介绍了一个邮箱登录页面的设计与实现过程，包括HTML结构布局、CSS样式设定及JavaScript交互功能，如账号密码验证、二级菜单切换等。

html部分

考试模板

	<div style="width: 1200px;height: 600px;background: #f2fff0;margin: 0px auto; border: solid 0.5px">
		<div style="width: 100%;height: 15%;background: #fff7f4;">
			<img src="开头.PNG">
			<nav  class="nav">
				<a href="#"  style="text-decoration: none;">基本版</a> |
				<a href="#"  style="text-decoration: none;">English</a> |
				<a href="#"  style="text-decoration: none;">手机版</a> |
				<a href="#"  style="text-decoration: none;">企业邮箱</a>
			</nav>
		</div>

		<div style="width: 100%;height: 70%;background: #f9fff6;">
			<img src="1.jpg" id="zuotu">
			<!--登录框-->
			<div style="width: 33%;height: 50%;float: right;background: #fbffff;" id="yznheng">
				<!--点击图-->
				<img src="001.PNG" id="k1">
				<img src="002.PNG" id="k2">
				<img src="003.PNG" id="k3">



				<!--登录验证-->
				<div style="width: 80%;height: 100% ;float: right;background: #f4f2fd">
					<p class="zh" id="zz"> 公告：2019年网易免费邮箱积分处理通知</p>
					<h2 class="zh">邮箱账号登录</h2>


					<p id="qq">@163.com</p>
					<div style="width:90%;height: 60%" id="kuang">
						<input type="text" placeholder="请输入账号/邮箱/手机号" class="one" id="zh"><br>
						<input type="password" placeholder="请输入密码" class="one" id="mim"><br>
						<input type="reset" value="登录" class="one"id="ccc">
					</div>
					<p id="wj">忘记密码  |   注册新号</p>
				</div>
				<script type="text/javascript">
                    var k1= document.getElementById("k1")
                    var k2= document.getElementById("k2")
                    var k3= document.getElementById("k3")
                    var qqobj= document.getElementById("qq")
                    k1.onclick=function () {
                        qqobj.innerText="@163.com";

                    }
                    k2.onclick=function () {
                        qqobj.innerText="@126.com";

                    }
                    k3.onclick=function () {
                        qqobj.innerText="@yeah.com";

                    }

				</script>
		</div>
		</div>
		</div>
	<script src="wl.js"></script>

	<ul>
		<p><li class="wuxu"><a href="http://www.baidu.com" >网易首页</a> | <a href="http://www.baidu.com" >网易严选</a> |
		<a href="http://www.baidu.com">网易有钱</a> | <a href="http://www.baidu.com">隐私政策</a> | <a href="http://www.baidu.com">儿童隐私政策
		</a>  |  网易公司版权所有 ©1998 - 2019 Tencent Inc. All Rights Reserved.</p>
		</li></p>

	</ul>





		<!--<div style="width: 100%;height: 15%;background: pink;">-->
			<!---->
			<!--底部div-->
		<!--</div>-->
		<!---->
	</div>
</body>

scc部分

#fud{
width: 300px;
height: 100px;

float: left;
clear: both;

}

#qq{
position: absolute;
top: 95px;
right: 90px;
z-index: 1;
}

.nav{
/开头的图片，向右浮动/
float: right;
/设置定位元素的上外边距边界与其包含块上边界之间的偏移。/
margin-top:40px;
/设置定位元素右外边距边界与其包含块右边界之间的偏移。/
margin-right:40px;
letter-spacing: 0.5px;
}
. nav a{
color:white;
/删除下划线在CSS中，使用text-decoration属性来定义段落文本的下划线、删除线和顶划线。/
text-decoration: none;
}

/中间的东西/

/中间的轮播图/
#zuotu{
width: 100%;
height: 100%;
}
#yznheng{
position: absolute;
top: 100px;
right: 200px;
z-index: 1;
}
/点击图二级菜单/

#k1{
position: absolute;
top: 10px;
right: 390px;
}
#k2{
position: absolute;
top: 110px;
right: 390px;
}
#k3{
position: absolute;
top: 210px;
right: 390px;
}

#kkk{
position: absolute;
top: 100px;
right: 80px;
display: none;
z-index: 1;
}
#kkk1{
position: absolute;
top: 100px;
right: 80px;
display: none;
z-index: 1;
}
#kkk2{
position: absolute;
top: 100px;
right: 80px;
display: none;
z-index: 1;
}

/账号/
.zh{text-align: center;

}
/公告字体颜色/
#zz{
color: yellow;
}
/验证框/
.one{
width: 282px;
height: 38px;
margin-bottom: 15px; ;

}
/验证框里面的div/
#kuang{
position: absolute;
top: 100px;
right: -80px;
}

/忘记注册/
#wj{
position: absolute;
top: 300px;
right: 110px;
}

.wuxu{
list-style-type:none;
text-align: center;
/浮动向右/
float: right;
/设置定位元素的上外边距边界与其包含块上边界之间的偏移。/
margin-top:0px;
/设置定位元素右外边距边界与其包含块右边界之间的偏移。/
margin-right:200px;

position: absolute;
top: 555px;
right: 10px;

}

js部分
/**

Created by 电一 on 2019/12/20.
*/
var zhobj=document.getElementById(“zh”)
var mimobj=document.getElementById(“mim”)
var cccobj=document.getElementById(“ccc”)

cccobj. οnclick=function () {
{
if (zhobj.value == “admin” && mimobj.value == 123456) {
alert(“欢迎管理员回家！”)
} else if (!(mimobj == “123456”)) {
alert(“您输入的账户密码错误，请重新输入”)
location.href = “模板.html”
}
}}

function sj() {
var zfc=“qwertyuiopasdfghjklzxcvbnm”
var suzu=zfc.split("");
var newsuzu=[];

for(var i=0;i<5;i++){
    newsuzu[newsuzu.length]=  suzu[Math.floor(Math.random()*suzu.length)];
}

twoobj.innerText=newsuzu.join("");

}
document.body.οncοpy=function () {
return false;
}
window.οnlοad=function () {
sj();
}

twoobj.οnclick=function () {
sj();
}

var imgobj=document.getElementById(“zuotu”)
var time=null;
var num=0;
function lb() {
if(num==4){
num=0;
}
num++;
imgobj.setAttribute(“src”,num+".jpg")
}
time=setInterval(“lb()”,1000);

var k1= document.getElementById(“k1”)
var k2= document.getElementById(“k2”)
var k3= document.getElementById(“k3”)
var qqobj= document.getElementById(“qq”)
k1.οnclick=function () {
qqobj.innerText="@163.com";

}
k2.οnclick=function () {
qqobj.innerText="@126.com";

}
k3.οnclick=function () {
qqobj.innerText="@yeah.com";

}

因为电脑分辨率的问题，如果效果不好请自行更改