网易邮箱 html scc js

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";

}

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

• 点赞
• 收藏
• 分享
• 文章举报