邮箱前台html,WEB独特的邮箱

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

}

163

126

yeah

登录163网易免费邮

登录126网易免费邮

登录Yeah.net网易免费邮

账号：

@

163.com

126.com

yeah.net

密码：

忘记密码?

版本：

网易邮箱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];

}

}

}