HTML，模仿网易登陆界面

最新推荐文章于 2023-05-26 19:17:14 发布

竹骄傲

最新推荐文章于 2023-05-26 19:17:14 发布

阅读量3.6k

点赞数 6

分类专栏：前端文章标签： html css javascript vue.js 网易

本文链接：https://blog.csdn.net/qq_51131331/article/details/122401125

版权

前端专栏收录该内容

12 篇文章 1 订阅

订阅专栏

1、展示效果：

2、网页代码：

<!DOCTYPE html>

<html lang="en">

<head>

        <meta charset="UTF-8">

        <meta http-equiv="X-UA-Compatible" content="IE=edge">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <title>网易邮箱登录</title>

        <link rel="stylesheet" href="wy.css" />

</head>

<body>

        <div class="container">

                <section class="section1">             

                        <div class="content">

                            <div class="card">

                               <div class="box">

                                       <font family="verdana" color="red" font size="4">163</font>网易免费邮mail.163.com

                               </div></div>

                        <div class="card"><div class="box2">中文邮箱第一品牌</div></div>

                        <div class="card"><div class="box"></div></div>

                        <div class="card"><div class="box"></div></div>

                        <div class="card"><div class="box"></div></div>

                        <div class="card"><div class="box"></div></div>

                        <div class="card7"><div class="box">

                                <a href="https://vipmail.163.com/?from=fmail">VIP</a>

                                <a href="https://v.mail.163.com/?utm_source=163loginnav">会员</a>

                                <a href="https://qiye.163.com/?from=M163_LOGIN">企业邮箱</a>

                                <a href="https://hw.mail.163.com/#163">海外登录</a>

                        </div></div>

                        <div class="card"><div class="box">

                                <a href="https://help.mail.163.com/">帮助</a>

                                反馈

                                <a href="https://mail.163.com/html/accounts-repair/index.html#/taskPublicity">修复公示</a>

                        </div></div>

                        <div class="clear"></div>

                        </div>

                </section>

          

                <section class="section2">             

                        <div class="content">

                            

                        <div class="card1"><div class="box"></div></div>

                        <div class="card"><div class="box">

                                <td align="center">

                                        <img src="https://img2.baidu.com/it/u=1077474659,1142599871&fm=26&fmt=auto"/width="500" heigth="4000">

                                    </td>

                        </div></div>

                        <div class="card"><div class="box">

                                <tr><font family="verdana" color="black" font size="4">邮箱账号登录</font></tr>

                                <form action="" method="post">

                                        <p>

                                                用户名：

                                                <input type="text" name="emial" />@163.com

                                        </p>

                                        <p>

                                                密码：<area shape="" coords="" href="" alt="" />

                                                <input type="password" id="pass" size="30" />

                                        </p>

                                        <p>

                                                <td><input type="checkbox" name="checkbox" id="" value="十天内免登录" />十天内免登录</td>

                                                <td><a href="https://reg.163.com/naq/findPassword">忘记密码？</a></td>

                                        </p>

                                        <p>

                                                <button style="background-color: blue;width: 330px;heigth:38px"><font family="verdana" color="white" font size="5">登录</font></button>

                                        </p>

                                        <p>

                                                <td><a href="https://mail.163.com/register/index.htm?from=163mail&utm_source=163mail">注册网易邮箱</a></td>

                                                <td><a href="https://mail.163.com/dashi/dlpro.html?scene=appTrack&session_id=D582BD74-6163-4C3B-93A6-7604E42D62FA&uid=&from=mail87&spm=pos.free_webmail_9c89159b6fde1dc2.loginPage.login163Page.loginPanel.link">邮箱官方App</a></td>

                                        </p>

                                </form>

                        </div></div>

                        <div class="card4"><div class="box"></div></div>

                        <div class="clear"></div>

                        </div>

                </section>  

                <footer>

                        <a href="https://www.163.com/">网易首页</a>

                        <a href="https://you.163.com/">网易严选</a>

                        <a href="https://help.mail.163.com/faqDetail.do?code=d7a5dc8471cd0c0e8b4b8f4f8e49998b374173cfe9171305fa1ce630d7f67ac2842e8b50ff6a4ebb">政府公益热线</a>

                        <a href="https://reg.163.com/agreement_mobile_ysbh_wap.shtml?v=20171127">隐私政策</a>

                        <a href="https://hc.reg.163.com/iTerm/doc.html?id=347">儿童隐私政策</a>

                </footer> 

        </div>

</body>

</html>

Css：body{

    background-color: #eee;

}

*{

    box-sizing: border-box;

}

.container{

    max-width: 1600px;

    background-color: #eee;

    margin: 2px auto;

    padding: 1px;

}

.clear{

    clear:both;

}



.section1,

.section2{

    background-color: #eee;

    text-align: center;

    padding: 10px 10px;

    margin-bottom: 1px;

}

.section1 .card,

.section1 .card7{

    width: 12%;

    float: left;

    padding: 0 2px;

}

.section1 .card7{

    width: 16%;

}

.box, .box2{

    background-color: #eee;

    text-align: center;

    padding: 20px 10px;

    margin-bottom: 1px;

}

.box2{

    padding: 30px 10px;

}

.section2 .card,

.section2 .card1,

.section2 .card4{

    width: 15%;

    float: left;

    padding: 0 2px;

}

.section2 .card{

    width: 35%;

}

.section2 .box{

    background-color: #eee;

    text-align: center;

    padding: 100px 10px;

    margin-bottom: 1px;

}

footer{

    background-color: #ddd;

    text-align: center;

    padding: 30px 15px;

    margin-bottom: 20px;

}

3、设计过程：

观察163邮箱登录的这张网页，有三个部分组成，一个是头部菜单，一个是登录界面，一个是尾部菜单。在设计头部菜单和中间的登录界面时时，使用了分块的方法。将头部表单分为了8个块，然后在最左边的两个块填入163邮箱，中文邮箱第一品牌。在右边的两个块内填入vip，会员，企业邮箱，海外登录，帮助，反馈，修复公示。

在设计好头部表单后，下一个是网易的图片，使用img src，再将其在块内居中，然后在右边是登录表格，按照网易的填入元素即可。最后是页面的尾部菜单，做好链接等元素。

4、设计总结：

主要是网页的布局方法需要掌握，还有7种标签子，这样才能学好网页的布局，将网页的大致布局设计出来。