WEB独特的邮箱
摘要：cs前端开发工具 企业前端开发工具 前端开发工具 studio html 代码 <!DOCTYPE html> <html> <head> <meta charset=”UTF-8″> <title>163</title> <……
cs前端开发工具 企业前端开发工具 前端开发工具 studio
html 代码
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>163</title>
<style type=”text/css”>
/*最外层边框*/
#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;
}
</style>
</head>
<body>
<div id=”warp”>
<!–左边部分–>
<div id=”left”>
<div id=”left_content”>
<!–163–>
<div id=”div163″>163</div>
<!–126–>
<div id=”div126″>126</div>
<!–yeah–>
<div id=”divYeah”>yeah</div>
</div>
</div>
<!–右边部分–>
<div id=”right”>
<div id=”div1″>
<!–logo–>
<h3>
<a href=”###” id=”a163″>登录163网易免费邮</a>
<a href=”###” id=”a126″>登录126网易免费邮</a>
<a href=”###” id=”aYeah”>登录Yeah.net网易免费邮</a>
</h3>
</div>
<div id=”div2″>
<!–账号–>
账号：<input type=”text” id=”text1″ autofocus=”autofocus” />
<span id=”span1″>@</span>
<a id=”selectOp”>
<span class=”op”>163.com</span>
<span>126.com</span>
<span>yeah.net</span>
</a>
</div>
<div id=”div3″>
<!–密码–>
密码：<input type=”text” id=”text2″ autofocus=”autofocus” />
<a href=”###” id=”password”>忘记密码?</a>
</div>
<div id=”div4″>
版本：<select disabled=”disabled”>
<option id=”text3″ value=”网易邮箱6.0版”>网易邮箱6.0版</option>
</select>
</div>
<div id=”div5″>
<input type=”checkbox” name=”” id=”check” value=”” /><span id=”span2″>记住账号</span>
</div>
<div id=”div6″>
<input type=”button” name=”btn” id=”btn” value=”登录” />
</div>
<div id=”div7″>
<span id=”span3″>还没有网易免费游</span>
<span id=”span4″>
<a href=”###” id=”start”>立即注册</a>
</span>
</div>
</div>
</body>
<script type=”text/javascript”>
//获取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];
}
}
}
</script>
</html>
前端开发工具vs开发工具 前端框架 快速开发工具 w3c 前端开发工具箱
» 本文来自：前端开发者 » 《WEB独特的邮箱》
» 本文链接地址：https://www.rokub.com/5420.html
» 您也可以订阅本站：https://www.rokub.com
近期评论