找回密码
当前位置：前端开发者 > 教程 > 正文

WEB独特的邮箱

2018-08-28 23:23:28 分类：教程 阅读(778) 评论(0)

cs前端开发工具 企业前端开发工具 前端开发工具 studio

html 代码

<!DOCTYPE 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
赞(0)
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论