网易注册页面模仿练习

最新推荐文章于 2022-03-15 14:20:31 发布
407指导员
最新推荐文章于 2022-03-15 14:20:31 发布
阅读量275
点赞数 1
分类专栏： CSS3 文章标签： css
本文链接：https://blog.csdn.net/LIUCHUANQI12345/article/details/109698782
版权
CSS3 专栏收录该内容
77 篇文章 0 订阅
订阅专栏
网易注册页面模仿

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网易注册页面的构建</title>
    <style>
        /*1清空默认边距*/
        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
        }
        /*2清除默认样式*/
        a {
            text-decoration: none;
            font-size: 12px;
            color: #ccc;
        }
         ul ol {
             list-style: none;
         }
        /*3.利用body设置整个界面的文字信息
        文字大小 文字样式 文字颜色*/
        body {
            font-size: 12px;
            font-family: "宋体",serif;
            color: #333;
        }
        .header {
            width: 960px;
            height: 80px;
            /*background-color: deepskyblue;*/
            margin: 0 auto;
            padding-top: 28px;
            box-sizing: border-box;
        }

        .header .logo {
            width: 709px;
            height: 30px;
            background: url("images/Snipaste_2020-11-14_15-45-12.png") no-repeat -6px -104px;
            float: left;
        }

        .header .logo a {
            /*转换为行内块级别可以设置宽高*/
            display: inline-block;
            width: 140px;
            height: 30px;
        }

        .header .links {
            width: 200px;
            height: 30px;
            /*background-color: red;*/
            float: right;
            /*links中的文本右对齐*/
            text-align: right;
        }

        .header .links a {
            /*去掉a标签的样式*/
            text-decoration: none;
            font-size: 12px;
            color: #ccc;
            /*将行高与父元素设置一样，字体垂直方向居中*/
            line-height: 30px;
        }

        .content {
            width: 960px;
            height: 600px;
            margin: 0 auto;
        }

        .content .top {
            height: 38px;
            width: 960px;
            /*可以采用截取部分照片平铺，也可以直接抓取*/
            background-color: #6fa1d5;
            /*border: 1px solid #6fa1d5;*/
            box-sizing: border-box;
            /*border-radius: 10px;*/
            /*overflow: hidden;*/
            /*border: none;*/
            /*box-shadow: 0 0 0 2px;*/
        }

        .content .top .left {
            /*采用图片覆盖来形成左上角圆角*/
            height: 38px;
            width: 960px;
            background: url("images/top-left.png") no-repeat left 0;
        }

        .content .top .left .right {
            /*采用图片覆盖来形成右上角圆角*/
            height: 38px;
            width: 960px;
            background: url("images/top-right.png") no-repeat right 0;
        }

        .content .top .left .right h1 {
            color: #f0f5fa;
            font-size: 12px;
            line-height: 38px;
            /*文字缩进2em，也就是缩进两个文字距离，也可使用margin-left*/
            text-indent: 2em;
        }


        .content .bottom {
            height: 562px;
            width: 960px;
        }

        .content .bottom .article {
            width: 642px;
            height: 562px;
            float: left;
            padding-top: 50px;
            padding-left: 80px;
            box-sizing: border-box;
            background-color: #f9f9f9;
            border: 1px solid #ccc;
            border-top: none;
        }

        .content .bottom .article .articleTop {

            width: 560px;
            height: 60px;
            background-color: yellow;
            background: url(images/ulli.png) 0 0 no-repeat;

        }

        .content .bottom .article .articleTop ul {
            list-style: none;
        }

        .content .bottom .article .articleTop ul li {
            float: left;
            width: 145px;
            height: 34px;
            line-height: 34px;
            text-align: center;
        }

        .content .bottom .article .articleBottom {
            width: 411px;
            height: 373px;
        }

        .content .bottom .article .articleBottom p {
            font-size: 12px;
            margin-left: 80px;
            /*与输入框距离*/
            line-height: 28px;
        }

        .content .bottom .article .articleBottom .line {
            width: 413px;
            height: 28px;
        }

        .content .bottom .article .articleBottom .line .start {
            /*span宽度*/
            width: 0;
            color: red;
            /*float: right;*/
        }

        .content .bottom .article .articleBottom .line span {
            /*提示文字左浮*/
            font-size: 12px;
            /*行高等于高度垂直居中*/
            text-align: right;
            line-height: 28px;
            float: left;
            height: 28px;
            width: 60px;
        }

        .content .bottom .article .articleBottom .line div {
            /*提示文字左浮*/
            height: 28px;
            width: 333px;
            float: right;
        }

        .content .bottom .article .articleBottom .line input {
            /*设置输入框样式 */
            width: 214px;
            height: 24px;
        }

        .content .bottom .article .articleBottom .line select {
            width: 94px;
            height: 28px;
        }

        .content .bottom .article .articleBottom .line .inp2 {
            width: 332px;
        }

        .content .bottom .article .articleBottom .line img {
            width: 100px;
            height: 25px;
            /*浮动是为了让验证码和输入框顶部对齐*/
            float: right;
        }

        .content .bottom .article .articleBottom .line .vscodeInput {
            /*企业开发中想让多个盒子顶部对齐，我们可以让多个盒子同时浮动*/
            float: left;
            margin-right: 10px;
        }

        .content .bottom .article .articleBottom input[type=submit] {
            width: 119px;
            height: 37px;
            background: url(images/Snipaste_2020-11-14_15-45-12.png) -166px -499px no-repeat;
            border: none;
            font-size: 20px;
            color: white;
            margin-left: 80px;
            margin-top: 25px;
        }

        .content .bottom .aside {
            width: 318px;
            height: 562px;
            background-color: #f0edee;
            float: right;
            padding-top: 105px;
            padding-left: 45px;
            box-sizing: border-box;
            border: 1px solid #ccc;
            border-top: none;
        }


        .footer {
            width: 960px;
            height: 48px;
            margin: 0 auto;
        }

        .footer p {
            font-size: 12px;
            color: #cccccc;
            text-align: center;
            line-height: 48px;
        }
    </style>
</head>
<body>
<!--头部开始-->
<div class="header">
    <!-- 再次把头部分为两块，左右浮动 -->
    <div class="logo">
        <!--让鼠标放到logo上有提示信息-->
        <a href="#" title="网易163免费邮"></a>
        <a href="#" title="网易126免费邮"></a>
        <a href="#" title="网易Yeah.net免费邮"></a>
    </div>
    <div class="links">
        <!-- 鼠标放到文字上也会变成小手指，说明是超链接-->
        <a href="#">了解更多</a>
        |
        <a href="#">反馈意见</a>
    </div>
</div>
<!--头部结束-->
<!--内容开始-->
<div class="content">
    <!--    中间区域又可以划分为顶部区域和底部区域  -->
    <!--    内容顶部-->
    <div class="top">
        <div class="left">
            <!--需要放到left里边,如果放到left并列，块级别元素就会去下一行-->
            <!--本质上是一层覆盖一层最内层的就是最上边的-->
            <div class="right"><h1>欢迎注册无容量的网易邮箱！ 邮件地址可以登录使用其他网易旗下产品。</h1></div>
        </div>
    </div>
    <!--    内容顶部结束-->
    <!--    内容底部开始-->
    <div class="bottom">
        <!--  再把下半部分分为左右浮动的两个盒子      -->
        <div class="article">
            <!--  又可以分为上方导航条和下方表单两块          -->
            <div class="articleTop">
                <!-- 看到导航条就想到ul和li-->
                <ul>
                    <li>注册字母邮箱</li>
                    <li>注册手机号邮箱</li>
                    <li>注册VIP邮箱</li>
                </ul>
            </div>
            <div class="articleBottom">
                <!--        输入部分为左边提示文字和输入框部分        -->
                <div class="line">
                    <!--        作为模板，下边输入框形式和这差不多            -->
                    <span><span class="start">*</span>邮件地址</span>
                    <div>
                        <label>
                            <input type="text" value="建议使用手机号码注册">
                        </label>@<label>
                        <select>
                            <option value="163.com">163.com</option>
                            <option value="126.com">126.com"</option>
                            <option value="lnj.net">lnj.net</option>
                        </select>
                    </label>
                    </div>
                </div>
                <p>6~18个字符，可使用数字、字母、下划线,需要以字母开头</p>

                <div class="line">
                    <!--        作为模板，下边输入框形式和这差不多            -->
                    <span><span class="start">*</span>密码</span>
                    <div>
                        <label>
                            <input type="password" class="inp2">

                        </label>
                    </div>
                </div>
                <p>6~16个字符，区分大小写</p>

                <div class="line">
                    <!--        作为模板，下边输入框形式和这差不多            -->
                    <span><span class="start">*</span>确认密码</span>
                    <div>
                        <label>
                            <input type="password" class="inp2">

                        </label>
                    </div>
                </div>
                <p>请再次确认密码</p>

                <div class="line">
                    <!--        作为模板，下边输入框形式和这差不多            -->
                    <span><span class="start">*</span>手机号码</span>
                    <div>
                        <label>
                            <input type="password" class="inp2">

                        </label>
                    </div>
                </div>
                <p>忘记密码时，可以通过改手机号快速找回密码</p>

                <div class="line">
                    <!--        作为模板，下边输入框形式和这差不多            -->
                    <span><span class="start">*</span>验证码</span>
                    <div>
                        <label>
                            <input type="text" class="vscodeInput">
                            <img src="images/vscode.png" alt="diudiu">
                        </label>
                    </div>
                </div>
                <p>请填写图片中的字符，不区分大小写</p>

                <p>
                    <label>
                        <input type="checkbox" checked="checked">
                    </label>
                    同意<a href="#">“服务条款”</a>和<a href="#">“隐私保护和个人信息利用政策”</a>
                </p>

                <input type="submit" value="立即注册" class="">


            </div>
        </div>
        <div class="aside">
            <img src="images/bottomaside.png" alt="图片走丢了">
        </div>
    </div>
    <!--    内容底部结束-->
</div>
<!--内容结束-->
<!--尾部开始-->
<div class="footer">
    <p>
        <a href="#">关于网易</a>
        <a href="#">关于网易免费邮</a>
        <a href="#">邮箱官方博客</a>
        <a href="#">客户服务</a>
        <a href="#">隐私政策</a>
        | 网易版权所有 © 1997-2016</p>
</div>
<!--尾部结束-->
</body>
</html>
在这里插入图片描述
1.注释部分需要注意，在htm/cssl中的注释可以很好帮助我们读懂代码.
2.css中公共部分可以提出来类似全部变量减少冗余代码。
3.分块时候，块可以尽量详细，这样每块内容反而更加简单，公共块可以直接复制。
4.本页面大的模块分为上中下三块
407指导员
关注
1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
网易注册页面模仿练习

网易注册页面模仿<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>网易注册页面的构建</title> <style> /*1清空默认边距*/ body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code,
复制链接

扫一扫