/p>
163#warp {
width: 702px;
height: 402px;
/*border:1px solid red;*/
margin: 50px auto;
overflow: hidden;
}
/*左边*/
#left {
width: 200px;
height: 400px;
float: left;
}
/*右边*/
#right {
width: 500px;
height: 400px;
/*background-color: deepskyblue;*/
float: right;
border-radius: 20px;
border: 1px solid gray;
position: relative;
}
#left_content {
width: 200px;
height: 300px;
margin: 50px auto;
/*background-color: yellow;*/
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
border: 1px solid gray;
border-right: none;
}
#div126,
#div163,
#divYeah {
width: 200px;
height: 100px;
font-size: 50px;
text-align: center;
line-height: 100px;
cursor: pointer;
}
#div163 {
background-color: lightskyblue;
border-bottom: 1px solid gray;
border-top-left-radius: 20px;
color: red;
}
#div126 {
background-color: #eee;
border-bottom: 1px solid gray;
color: green;
}
#divYeah {
background-color: #eee;
border-bottom: 1px solid gray;
border-bottom-left-radius: 20px;
color: red;
}
/*右边部分*/
#right div {
margin-left: 50px;
padding: 10px 0;
}
h3>a {
text-decoration: none;
color: #000;
display: none;
}
h3>a:nth-child(1) {
display: block;
}
#password,
#start {
color: lightskyblue;
}
#btn {
width: 80px;
height: 30px;
color: #FFFFFF;
background-color: lightskyblue;
border: 1px solid transparent;
}
#text1 {
background-color: yellow;
}
#text2 {
background-color: lightskyblue;
}
#selectOp {
/*border: 1px solid red;*/
}
#selectOp span {
display: none;
}
#selectOp span:nth-child(1) {
display: inline-block;
}
密码:
版本:
网易邮箱6.0版
记住账号
还没有网易免费游
//获取div163模块
var div163Obj = document.getElementById(“div163”);
//获取登录按钮
var btnObj = document.getElementById(“btn”);
//获取忘记密码
var passwordObj = document.getElementById(“password”);
//获取立即注册
var startObj = document.getElementById(“start”);
//获取126
var div126Obj = document.getElementById(“div126”);
//获取yeah
var divYeahObj = document.getElementById(“divYeah”);
//获取账号输入框
var text1Obj = document.getElementById(“text1”);
//获取密码输入框
var text2Obj = document.getElementById(“text2”);
//获取登录方式
var doc = document.getElementsByTagName(‘h3’)[0];
var type = doc.getElementsByTagName(‘a’);
//获取左侧3个div的父元素
var left_contentObj = document.querySelectorAll(“#left_content>div”);
//获取邮箱后缀的父元素
var AObj = document.getElementById(“selectOp”);
//获取邮箱后缀
var SpanObj = document.querySelectorAll(“#selectOp>span”);
function out163Function() {
SpanObj[0].style.display = “inline-block”;
SpanObj[1].style.display = “none”;
SpanObj[2].style.display = “none”;
SpanObj[0].style.backgroundColor = “#fff”;
}
function over163Function() {
SpanObj[0].style.backgroundColor = “lightskyblue”;
}
function color163() {
div163Obj.style.backgroundColor = “lightskyblue”;
div126Obj.style.backgroundColor = “”;
divYeahObj.style.backgroundColor = “”;
btnObj.style.backgroundColor = “lightskyblue”;
text2Obj.style.backgroundColor = “palevioletred”;
passwordObj.style.color = “lightskyblue”;
startObj.style.color = “lightskyblue”;
}
function div163Function() {
color163();
for (var i = 0; i < left_contentObj.length; i++) {
if (this == left_contentObj[i]) {
type[i].style.display = “block”;
} else {
type[i].style.display = “none”;
}
}
}
function com163() {
color163();
for (var i = 0; i < SpanObj.length; i++) {
if (this == SpanObj[i]) {
type[i].style.display = “block”;
} else {
type[i].style.display = “none”;
}
}
};
function out126Function() {
SpanObj[0].style.display = “none”;
SpanObj[1].style.display = “inline-block”;
SpanObj[2].style.display = “none”;
SpanObj[1].style.backgroundColor = “#fff”;
}
function over126Function() {
SpanObj[1].style.backgroundColor = “green”;
}
function color126() {
div126Obj.style.backgroundColor = “lightskyblue”;
div163Obj.style.backgroundColor = “#EEEEEE”;
divYeahObj.style.backgroundColor = “”;
btnObj.style.backgroundColor = “green”;
passwordObj.style.color = “green”;
startObj.style.color = “green”;
text2Obj.style.backgroundColor = “darkseagreen”;
}
function div126Function() {
color126();
for (var i = 0; i < left_contentObj.length; i++) {
if (this == left_contentObj[i]) {
type[i].style.display = “block”;
} else {
type[i].style.display = “none”;
}
}
}
function com126() {
color126();
for (var i = 0; i < SpanObj.length; i++) {
if (this == SpanObj[i]) {
type[i].style.display = “block”;
} else {
type[i].style.display = “none”;
}
}
};
function outYeahFunction() {
SpanObj[0].style.display = “none”;
SpanObj[1].style.display = “none”;
SpanObj[2].style.display = “inline-block”;
SpanObj[2].style.backgroundColor = “#FFFFFF”;
}
function overYeahFunction() {
SpanObj[2].style.backgroundColor = “red”;
}
function colorYeah() {
divYeahObj.style.backgroundColor = “lightskyblue”;
btnObj.style.backgroundColor = “red”;
passwordObj.style.color = “red”;
startObj.style.color = “red”;
div163Obj.style.backgroundColor = “#EEEEEE”;
div126Obj.style.backgroundColor = “”;
text2Obj.style.backgroundColor = “palevioletred”;
}
function divYeahFunction() {
colorYeah();
for (var i = 0; i < left_contentObj.length; i++) {
if (this == left_contentObj[i]) {
type[i].style.display = “block”;
} else {
type[i].style.display = “none”;
}
}
}
function comYeah() {
colorYeah();
for (var i = 0; i < SpanObj.length; i++) {
if (this == SpanObj[i]) {
type[i].style.display = “block”;
} else {
type[i].style.display = “none”;
}
}
}
function AllBlockFunction() {
for (var i = 0; i < SpanObj.length; i++) {
SpanObj[i].style.display = “inline-block”;
}
}
div163Obj.onclick = div163Function;
div126Obj.onclick = div126Function;
divYeahObj.onclick = divYeahFunction;
AObj.onmouseover = AllBlockFunction;
var on = [com163, com126, comYeah];
var over = [over163Function, over126Function, overYeahFunction];
var out = [out163Function, out126Function, outYeahFunction];
for (var i = 0; i < SpanObj.length; i++) {
for (var j = 0; j < on.length; j++) {
if (i == j) {
SpanObj[i].onclick = on[j];
}
}
for (var m = 0; m < over.length; m++) {
if (i == m) {
SpanObj[i].onmouseover = over[m];
}
}
for (var n = 0; n < out.length; n++) {
if (i == n) {
SpanObj[i].onmouseout = out[n];
}
}
}