静态qq邮箱 html scc js

html部分

<!--全部的div-->
<div style="width: 1200px;height: 600px;background: #fff6fc;margin: 0px auto;">

<div style="width: 100%;height: 15%;background: #ffe4af;" id="shang">
<!--float: left向左浮动  clear: both清楚浮动-->
<img src="开头.PNG" class="fud" style="width: 300px;height: 90px ;float: left;clear: both;">

<nav  class="nav">
<a href="#">基本版</a> |
<a href="#">English</a> |
<a href="#">手机版</a> |
<a href="#">企业邮箱</a>
</nav>
</div>

<!--中间的-->
<div style="width: 100%;height: 70%;" id="zhong">
<!--左边的div-->
<div style="width: 50%;height: 100%;background: #faf8ff;float: left;" >
<img src="1.jpg" id="zuotu">
</div>

<!--右边-->
<div style="width: 50%;height: 100%;background:#faf8ff;float: right;">
<div id="shoujicc" style="width: 330px;height: 370px ;border: solid 0.5px">

<div style="width: 330px;height:50px">
<div id="weixin"><h3>微信登录 </h3></div>
<div id="wexinome"><h3>QQ登录</h3></div>
</div>

<div style="width: 290px;height: 230px ;z-index: 1  "id="shouji">
<input type="text" placeholder="请输入账号/邮箱/手机号" class="one" ><br>
<input type="password" placeholder="请输入密码" class="one"><br>
<input type="text" placeholder="请输入验证码" class="two">
<span id="two">验证码</span><br>
<input type="button" value="登录" class="one">
</div>

<br><br><br><br><br><br><br><br><br><br><br><p style="text-align: center">扫码快速登录</p>
<p style="text-align: right;margin-right:10px;">忘记密码 </p>
</div>
</div>
</div>

<div style="width: 100%;height: 15%;background: rgba(255,248,250,0.04);" id="wei">
<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> | <a href="http://www.baidu.com">帮助中心</a> | ©1998 - 2019 Tencent Inc. All Rights Reserved.</p>
</li></p>
</ul>
</div>

</div>

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

scc部分

#fud{
width: 300px;
height: 86px;
}
.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: 280px;
height: 250px;
/上下外边距为0px，左右外边距自动，/
margin: 0px auto;
/相对定位。设置距离/
position: relative;
top: 20%;
right: -20%;
}

/中间右边的登录框/
#shoujicc{
float: right;
/设置定位元素的上外边距边界与其包含块上边界之间的偏移。/
margin-top:5%;
/设置定位元素右外边距边界与其包含块右边界之间的偏移。/
margin-right:25%;
}
/微信登录/
#weixin{
float: left;
width: 50%;
height: 100%;
text-align: center;
}
/QQ登录/
#wexinome{
float: left;
width: 50%;
height: 100%;
text-align: center;
}

/验证框里面的div设置布局/
#shouji{
float: right;
/设置定位元素的上外边距边界与其包含块上边界之间的偏移。/
margin-top:2%;
/设置定位元素右外边距边界与其包含块右边界之间的偏移。/
margin-right:5%;
}

/验证框里面的登录框里面的div/
.one{
width: 282px;
height: 38px;
margin-bottom: 20px; ;
}
.two{
width: 141px;
height: 38px;
margin-bottom: 20px; ;
}
#two{
display: inline-block;
border: 1px #000000 solid;
margin-left: 20px;
width: 118px;
height: 38px;
position: relative;
text-align: center;
font-size: 20px;
bottom: 5px;
}

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

js部分
/**

• Created by 电一 on 2019/12/17.
  */

var inputobj=document.getElementsByTagName(“input”);
var twoobj=document.getElementById(“two”);

inputobj[3].οnclick=function () {
/*
* 2…style.value
* 3.
* */
var text=inputobj[0].value;
var password=inputobj[1].value;
var yzm=inputobj[2].value;

if(text=="admin"&&password=="123456"&&yzm==twoobj.innerText){
alert("欢迎管理员回家！")
}else if(!(password=="123456")){
alert("您输入的账户密码错误，请重新输入")
location.href="模板.html"
}else{
alert("您输入的验证码错误，请重新输入")
inputobj[2].value="";
}

}

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

for(var i=0;i<4;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);

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