HTML5前端开发入门之网易注册界面实战

其他 2019-01-10 09:51:17 阅读次数: 0 
代码如下：

图片可通过谷歌浏览器在网易邮箱官网直接下载
<!DOCTYPE html>
<html lang="en" xmlns:http="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>网易邮箱注册界面</title>
    <style>
        body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,
        form,fieldset,legend,input,textarea,p,blockquote,th,td
        {
            margin:0;
            padding:0;
        }
        body{
            background-color: #f9f9f9;
            font-size: 12px;
        }
        .header{
            width: 960px;
            height: 81px;
            margin: 0 auto;
            padding-top: 30px;
            box-sizing: border-box;
        }
        .header .logo{
            width: 644px;
            height: 27px;
            background:url("../images/wy.png") no-repeat 0 0;
            float: left;
        }
        .header .logo a{
            display: inline-block;
            width: 128px;
            height: 27px;
        }
        .header .links{
            width: 200px;
            height: 19px;
            text-align: right;
            float: right;
            color: #999;
        }
        .header .links a{
            text-decoration: none;
            line-height: 19px;
            color: #039;
        }
        .header .links a:hover{border-bottom:1px solid #039;}
        .content{
            width: 960px;
            height: 727px;
            margin: 0 auto;
        }
        .content .top{
            width: 958px;
            height: 38px;
            background-color: #6495C6;
            border: 1px solid #5B88B8;
            border-radius: 3px 3px 0 0;
        }
        .content .top h1{
            font-size: 14px;
            color: white;
            line-height: 38px;
            padding-left: 20px;
        }
        .content .bottom{
            width: 960px;
            height: 687px;
            background-color: white;
        }
        .content .bottom .left{
            width: 642px;
            height: 687px;
            float: left;
            padding-left: 60px;
            padding-top: 50px;
            box-sizing: border-box;
            border: 1px solid #ccc;
            border-top: none;
            border-right: none;
        }
        .content .bottom .left .leftTop{
            width: 582px;
            height: 58px;
            padding-left: 55px;
            box-sizing: border-box;
        }
        .content .bottom .left .leftTop ul{
            width: 412px;
            height: 35px;
            background-image: url("../images/wy3.jpg");
            background-repeat: no-repeat;
            list-style: none;
        }
        .content .bottom .left .leftTop ul li{
            float: left;
            width: 137px;
            height: 35px;
            line-height: 35px;
            text-align: center;
        }
        .content .bottom .left .leftBottom{
            width: 573px;
            height: 543px;
            margin-left: 9px;
        }
        .content .bottom .left .leftBottom .txt-tips{
            color: rgb(153, 153, 153);
        }
        .content .bottom .left .leftBottom .line{
            width: 573px;
            height: 69px;
        }
        .content .bottom .left .leftBottom .special{
            width: 573px;
            height: 119px;
            box-sizing: border-box;
            padding-top: 8px;
            padding-bottom: 8px;
        }
        .content .bottom .left .leftBottom .sub{
            width: 573px;
            height: 53px;
            padding: 8px 0 8px 110px;
            box-sizing: border-box;
        }
        .content .bottom .left .leftBottom .sub a{
            display: inline-block;
            width: 119px;
            height: 37px;
            font-size: 14px;
            background-image: url(../images/wy.png);
            background-position: 0 -360px;
            line-height: 37px;
            color: #FFF;
            text-decoration: none;
            outline: none;
            text-align: center;
            font-weight: bold;
        }
        .content .bottom .left .leftBottom .clause{
            width: 573px;
            height: 36px;
            padding: 8px 0 8px 110px;
            box-sizing: border-box;
            color: #999;
        }
        .content .bottom .left .leftBottom .clause a{
            text-decoration: none;
            line-height: 19px;
            color: #039;
        }
        .content .bottom .left .leftBottom .clause a:hover{border-bottom:1px solid #039;}
        .content .bottom .left .leftBottom .line .item{
            float: left;
            width: 90px;
            height: 19px;
            font-size: 14px;
            text-align: right;
            margin-top: 13px;
        }
        .content .bottom .left .leftBottom .line .item span{
            color: rgb(204, 0, 0);
            margin-right: 4px;
        }
        .content .bottom .left .leftBottom .line .item2{
            float: right;
            width: 463px;
            height: 53px;
            margin-top: 8px;
        }
        .content .bottom .left .leftBottom .line .item2 img{
            width: 116px;
            height: 50px;
            border: 1px solid #E7E7E7;
            margin-right: 130px;
            float: right;
        }
        .content .bottom .left .leftBottom .line .item2 .it1{
            width: 210px;
            height: 25px;
            border: 1px solid rgb(171, 171, 171);
            border-radius: 3px;
        }
        .content .bottom .left .leftBottom .line .item2 .it2{
            width: 332px;
            height: 25px;
            border: 1px solid rgb(171, 171, 171);
            border-radius: 3px;
        }
        .content .bottom .left .leftBottom .line .item2 select{
            width: 97px;
            height: 25px;
            border: 1px solid rgb(171, 171, 171);
            border-radius: 3px;
            font-weight: bold;
        }
        .content .bottom .left .leftBottom .line .item2 .tips{
            width: 463px;
            height: 26px;
            line-height: 16px;
            padding-top: 6px;
            padding-bottom: 4px;
            box-sizing: border-box;
        }
        .content .bottom .left .leftBottom .line .item2 .message{
            width: 463px;
            height: 35px;
            padding-top: 5px;
            box-sizing: border-box;
        }
        .content .bottom .left .leftBottom .line .item2 .message a{
            display: inline-block;
            background-image: url(../images/wybgx.png);
            background-position: 0 -72px;
            background-repeat: repeat-x;
            border: 1px solid #BBB;
            width: 98px;
            height: 28px;
            padding-left: 20px;
            padding-right: 20px;
            font-size: 14px;
            text-decoration: none;
            line-height: 28px;
            color: #555;
            border-radius: 3px;
            outline: none;
        }
        .content .bottom .right{
            width: 318px;
            height: 687px;
            background-color: #f5f5f5;
            float: right;
            padding: 106px 0 0 45px;
            box-sizing: border-box;
            border: 1px solid #ccc;
            border-top: none;
        }
        .footer{
            width: 960px;
            height: 80px;
            margin: 0 auto;
            text-align: center;
            color: #999999;
            line-height: 40px;
        }
        .footer a{
            color: #999999;
            text-decoration: none;
        }
        .footer a:hover{border-bottom:1px solid #999999;}
    </style>
</head>
<body>
<!--头部开始-->
<div class="header">
    <div class="logo">
        <a href="http://mail.163.com/" title="网易163免费邮" target="_blank"></a><a href="http://www.126.com/" title="网易126免费邮" target="_blank"></a><a href="http://www.yeah.net/" title="网易Yeah.net免费邮" target="_blank"></a>
    </div>
    <div class="links">
        <a href="http://mail.163.com/html/mail_intro/" target="_blank">了解更多</a>
        |
        <a href="http://help.mail.163.com/feedback.do?m=add&categoryName=%e6%b3%a8%e5%86%8c" target="_blank">反馈意见</a>
    </div>
</div>
<!--头部结束-->

<!--中间内容开始-->
<div class="content">
    <!--内容头部开始-->
    <div class="top">
        <h1>欢迎注册无限容量网易邮箱！邮件地址可以登录使用其他网易旗下产品。</h1>
    </div>
    <!--内容头部结束，尾部开始-->
    <div class="bottom">
        <!--内容左边部分开始-->
        <div class="left">
            <!--内容左边导航条开始-->
            <div class="leftTop">
                <ul>
                    <li>注册字母邮箱</li>
                    <li>注册手机号码邮箱</li>
                    <li>注册VIP邮箱</li>
                </ul>
            </div>
            <!--导航条结束，表单输入框开始-->
            <div class="leftBottom">
                <div class="line">
                    <div class="item">
                        <span>*</span>邮件地址
                    </div>
                    <div class="item2">
                        <input type="text" class="it1">&nbsp;@
                        <select>
                            <option value="163.com">163.com</option>
                            <option value="126.com">126.com</option>
                            <option value="yeah.net">yeah.net</option>
                        </select>
                        <div class="tips">
                            <span class="txt-tips">6~18个字符，可使用字母、数字、下划线，需以字母开头</span>
                        </div>
                    </div>
                </div>
                <div class="line">
                    <div class="item">
                        <span>*</span>密码
                    </div>
                    <div class="item2">
                        <input type="password" class="it2" >
                        <div class="tips">
                            <span class="txt-tips">6~16个字符，区分大小写</span>
                        </div>
                    </div>
                </div>
                <div class="line">
                    <div class="item">
                        <span>*</span>确认密码
                    </div>
                    <div class="item2">
                        <input type="password" class="it2" >
                        <div class="tips">
                            <span class="txt-tips">请再次填写密码</span>
                        </div>
                    </div>
                </div>
                <div class="line">
                    <div class="item">
                        <span>*</span>手机号码
                    </div>
                    <div class="item2">
                        <input type="text" class="it2" >
                        <div class="tips">
                            <span class="txt-tips">忘记密码时，可以通过该手机号码快速找回密码</span>
                        </div>
                    </div>
                </div>
                <div class="line special">
                    <div class="item">
                        <span>*</span>验证码
                    </div>
                    <div class="item2">
                        <input type="text" class="it1">
                        <img src="../images/wycall.jpg" class="call">
                        <div class="tips">
                            <span class="txt-tips">请填写图片中的字符，不区分大小写</span>
                        </div>
                        <div class="message">
                            <a href="#" ><strong>免费获取验证码</strong></a>
                        </div>
                    </div>
                </div>
                <div class="line">
                    <div class="item">
                        <span>*</span>短信验证码
                    </div>
                    <div class="item2">
                        <input type="text" class="it2" >
                        <div class="tips">
                            <span class="txt-tips">请查收手机短信，并填写短信中的验证码</span>
                        </div>
                    </div>
                </div>
                <div class="clause">
                    <input type="checkbox" checked="checked">
                    同意
                    <a href="http://reg.163.com/agreement.shtml" target="_blank">"服务条款"</a>
                    和
                    <a href="http://reg.163.com/agreement_game.shtml" target="_blank">"隐私权相关政策"</a>
                </div>
                <div class="sub">
                    <a href="#">立即注册</a>
                </div>
            </div>
        </div>
        <!--内容左边部分结束，右边部分开始-->
        <div class="right">
            <img src="../images/wy2.gif" alt="">
        </div>
        <!--内容右边部分结束-->
    </div>
</div>
<!--中间部分结束-->

<!--尾部开始-->
<div class="footer">
    <a href="http://corp.163.com/index_gb.html" target="_blank">关于网易</a>&nbsp;&nbsp;
    <a href="http://mail.163.com/html/mail_intro" target="_blank">关于网易免费邮</a>&nbsp;&nbsp;
    <a href="http://mail.blog.163.com/" target="_blank">邮箱官方博客</a>&nbsp;&nbsp;
    <a href="http://help.163.com/" target="_blank">客户服务</a>&nbsp;&nbsp;
    <a href="http://corp.163.com/gb/legal/legal.html" target="_blank">隐私政策</a>&nbsp;&nbsp;
    |&nbsp;&nbsp;网易版权所有 © 1998-2018
    <br>
    数据来源：艾媒咨询《2015-2018中国个人邮箱行业研究报告》
</div>
<!--尾部结束-->
</body>
</html>

猜你喜欢

转载自blog.csdn.net/qq_41886761/article/details/85397686
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
周排行
Python环境安装与基础语法（1）——计算机基础知识
IMU预积分
ADAS中的LDW、FCW、BSD、LCA、ACC、AEB、APA、DMS代表的含义
B站笔试两道题
skyeye arm 硬件虚拟机环境的搭建
Web前端静态页面示例
数组-合并排序数组 II-简单
springcloud之版本问题启动报错
面向对象-------------匿名对象(六)
输入URL到页面呈现中间发生了什么？
每日归档
更多
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022