项目实战2：豆瓣首页-注册区域

最新推荐文章于 2024-05-30 15:07:12 发布

guai_guai_guai

最新推荐文章于 2024-05-30 15:07:12 发布

阅读量41

点赞数

分类专栏： # 前端知识总结文章标签：前端 java javascript

本文链接：https://blog.csdn.net/guai_guai_guai/article/details/134516221

版权

前端知识总结专栏收录该内容

24 篇文章 0 订阅

订阅专栏

横幅（login）区域：

我们将以上部分做成一个新的页面（iframe），之后将该页面嵌入在主页面即可

接着我们将短信注册和密码登录两个界面放至类名为container的div的盒子中

首先构造短信注册（类名为login的div），注册里又可分为三部分，选择区域，表单区域，

第一部分为switch-menu，switch-menu中又包含两个区域，由于这两个区域均为文字，在这里我们就将两个区域放到span中，先计算整体的宽度，两个span将总宽度评分，为使两个span横向排列，就给他们设置浮动，之前我们将左右浮动都通过类选择器设置过，所以我们直接在span元素后面加上float-left或者float-right即可，设置浮动就要考虑高度坍塌，故clearfix也要写在css代码中

又因为浮动和高度坍塌为制作页面常见的问题，故将浮动以及clearfix设置在common.css中

link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/loginframe.css">

<body>
    <div class="container">
        <!-- 短信登录/注册,密码登录-->
        <div class="login">
            <!-- 切换菜单 -->
            <div class="switch-menu">
            /*选中效果*/
                <span class="float-left selected">
                    短信登录/注册
                </span>
                <span class="float-left">
                    密码登录
                </span>
            </div>
        </div>
        <!-- 扫码登录 -->
    </div>

接着就设置选择菜单里具体的样式，switch-menu中有下边框，选中时，边框颜色更深，这里我们通过类选择器给选中时的span设置下边框，还有span垂直居中，整个·container文字颜色，行高等

这里要注意一点span选中的下边框在 switch-menu原始下边框上边，为了使其覆盖，我们将span的margin-bottom设置为-1即可

.container .login .switch-menu{
    border-bottom: 1px solid #ececec;
    font-size: 13px;
}
.container .login .switch-menu span{
    width: 150px;
    text-align: center;
    cursor: pointer;
}
.container .login .switch-menu span.selected{
    font-weight: bold;
    color: #333;
    border-bottom: 1px solid #494949;
    margin-bottom:-1px;

这里如果不设置margin-bottom，则是以下效果：

设置之后是以下效果：

接着是表单区域，表单区域由form元素包含，其中又包含两个div，分别表示短信登录表单页面和密码登录表单页面，先看短信登录表单页面，首先是“登录注册表示同意豆瓣使用协议，隐私政策”，该区域为类名为form-item的div，里面的文字可用p元素包含，注意文字里面还包含了a元素

            <form>
                <!-- 短信登录/注册表单 -->
                <div>
                    <div class="form-item">
                        <p class="txt">
                            登录注册表示同意
                            <a href="">豆瓣使用协议，隐私政策</a>
                            
                        </p>
                    </div>
                </div>
                <!-- 密码登录 -->
                <div>

                </div>
            </form>

设置form-item的外边距，以及文字的大小，超链接文字的样式，新的页面中a元素样式相同，我们将其写为通用样式

.container .login .form .form-item{
    margin: 10px 0;
}
.container .login .form .form-item .txt{
    font-size: 12px;
}

接着是下面的文本框（新的类名为form-item的div盒子），页面中input（type为text和password）样式相同，故对其样式进行统一设置

a{
    color: #41ac52;
}
input[type="rext"],
input[type="password"]{
    width: 100%;
    border: 1px solid #e4e6e5;
    /* 不增加整体盒子宽高 */
    box-sizing: border-box;
    height: 34px;
    /* 首行缩进 */
    text-indent: 10px;
    border-radius: 4px;
    font-size: 13px;
}

我们可以发现第一个文本框首行缩进较多，在这里我们可以将更多的首行缩进通过类选择器设置在统一的样式里

.more-text-indent{
    text-indent: 75px;
}

如果给首行缩进多的input加上类名”more-text-indent“

 <input type="text" class="more-text-indent" placeholder="手机号">

这时我们发现并未实现更多的首行缩进

检查之后发现样式被覆盖，是因为层叠样式中input既有元素选择器，又有属性选择器（0 1 0），而此时more-text-indent只有类选择器（0 1 0），故样式被覆盖，在类选择器前加上input[type=”text“ ]即可

右边框不充满问题

紧接着就是手机号前面的国家编码，在input后面加一个div元素（country-code）

.container .login .form .form-item .country-code{
    position: absolute;
    width: 51px;
    height: 34px;
    left: 0;
    top: 0;
    text-align: center;
    color: #333;
    font-weight: bold;
    line-height:34px;
    font-size: 15px;
}

设置country-code右边框时，注意观察，他的边框并未充满，这时只需要将country-code高度减小，因为垂直居中，所以line-height也要相应减小，但定位top值就要变成减小的值/2.

.container .login .form .form-item .country-code{
    position: absolute;
    width: 51px;
    /* 高度减小8px */
    height: 26px;
    left: 0;
    /* top增加为8/2=4（边框上下距离相等） */
    top: 4px;
    text-align: center;
    color: #333;
    font-weight: bold;
    /* 垂直居中，所以相应减小8px */
    line-height:26px;
    font-size: 15px;
    border-right: 1px solid #e4e6e5;
}

效果如图：

首行缩进与padding区别

在这里要注意，如果给文本框设置首行缩进的话，当输入文字过长时，就会出现以下效果：

故为+86腾出空间时，应使用padding-left

接下来制作+86具体的样式

这部分就命名为codes

这部分就命名为choose-area，这部分背景为白色半透明，由于整个注册区域我们将它做成了整个页面，故这部分区域我们将其设置为固定定位，固定定位包含块为整个视口，故left，top均为0.

                        <div class="country-code">
                            <div class="selected">
                                +86
                            </div>
                            <div class="choose-area">
                            </div>
                        </div>

.container .login .form .form-item .country-code .choose-area{
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: rgba(255,255,255,.5);
}

接下来是点击+86所弹出的页面时的内容，设置其为类名为center的div（choose-area的子元素），设置其为绝对定位，页面居中（上下左右距离为0，margin：auto）边框，圆角边框，接着是里面的文字内容，首先为标题（title），为标题设置背景颜色。先看效果：

                        <div class="country-code">
                            <div class="selected">
                                +86
                            </div>
                            <div class="choose-area">
                                <div class="center">
                                    <div class="title">
                                        选择国际区号
                                    </div>
                                </div>
                            </div>
                        </div>

.container .login .form .form-item .country-code .choose-area .center
{
    width: 285px;
    height: 225px;
    position: absolute;
    top: 0;
    left: 0;
    left: 0;
    right:0;
    margin: auto;
    border: 1px solid;
    border-radius: 5px;
    box-sizing: border-box;
    background-color: white;
    /* 其会继承父元素的小手样式，为了避免混淆在这里我们去除小手样式 */
    cursor: default;
}
.container .login .form .form-item .country-code .choose-area .center .title{
    background-color: #ebf5eb;
}

背景颜色覆盖圆角边框问题

注意观察圆角边框附近背景颜色，背景颜色将圆角边框覆盖了，要解决这个问题，可以将center设置overflow：hidden，也可以为title设置圆角边框，在这里我们就设置溢出隐藏吧

接着设置title的高度，文字垂直居中，水平靠左，文字颜色，文字加粗

然后就是选项了，这里选项用ul>li设置，每个li里都有两个span元素，一个代表国家（左浮动），一个代表国家编码（右浮动），由于li元素数量可能较多，故写代码时用速写属性

ul>li.clearfix*50>(span.float-left>{国家$})+(span.float-right>{+$})
/*效果*/
<ul>
    <li class="clearfix"><span class="float-left">国家1</span><span class="float-right">+1</span></li>
    <li class="clearfix"><span class="float-left">国家2</span><span class="float-right">+2</span></li>
    <li class="clearfix"><span class="float-left">国家3</span><span class="float-right">+3</span></li>
    <li class="clearfix"><span class="float-left">国家4</span><span class="float-right">+4</span></li>
    <li class="clearfix"><span class="float-left">国家5</span><span class="float-right">+5</span></li>
    <li class="clearfix"><span class="float-left">国家6</span><span class="float-right">+6</span></li>
    <li class="clearfix"><span class="float-left">国家7</span><span class="float-right">+7</span></li>
    <li class="clearfix"><span class="float-left">国家8</span><span class="float-right">+8</span></li>
    <li class="clearfix"><span class="float-left">国家9</span><span class="float-right">+9</span></li>
    <li class="clearfix"><span class="float-left">国家10</span><span class="float-right">+10</span></li>
    <li class="clearfix"><span class="float-left">国家11</span><span class="float-right">+11</span></li>
    <li class="clearfix"><span class="float-left">国家12</span><span class="float-right">+12</span></li>
    <li class="clearfix"><span class="float-left">国家13</span><span class="float-right">+13</span></li>
    <li class="clearfix"><span class="float-left">国家14</span><span class="float-right">+14</span></li>
    <li class="clearfix"><span class="float-left">国家15</span><span class="float-right">+15</span></li>
    <li class="clearfix"><span class="float-left">国家16</span><span class="float-right">+16</span></li>
    <li class="clearfix"><span class="float-left">国家17</span><span class="float-right">+17</span></li>
    <li class="clearfix"><span class="float-left">国家18</span><span class="float-right">+18</span></li>
    <li class="clearfix"><span class="float-left">国家19</span><span class="float-right">+19</span></li>
    <li class="clearfix"><span class="float-left">国家20</span><span class="float-right">+20</span></li>
    <li class="clearfix"><span class="float-left">国家21</span><span class="float-right">+21</span></li>
    <li class="clearfix"><span class="float-left">国家22</span><span class="float-right">+22</span></li>
    <li class="clearfix"><span class="float-left">国家23</span><span class="float-right">+23</span></li>
    <li class="clearfix"><span class="float-left">国家24</span><span class="float-right">+24</span></li>
    <li class="clearfix"><span class="float-left">国家25</span><span class="float-right">+25</span></li>
    <li class="clearfix"><span class="float-left">国家26</span><span class="float-right">+26</span></li>
    <li class="clearfix"><span class="float-left">国家27</span><span class="float-right">+27</span></li>
    <li class="clearfix"><span class="float-left">国家28</span><span class="float-right">+28</span></li>
    <li class="clearfix"><span class="float-left">国家29</span><span class="float-right">+29</span></li>
    <li class="clearfix"><span class="float-left">国家30</span><span class="float-right">+30</span></li>
    <li class="clearfix"><span class="float-left">国家31</span><span class="float-right">+31</span></li>
    <li class="clearfix"><span class="float-left">国家32</span><span class="float-right">+32</span></li>
    <li class="clearfix"><span class="float-left">国家33</span><span class="float-right">+33</span></li>
    <li class="clearfix"><span class="float-left">国家34</span><span class="float-right">+34</span></li>
    <li class="clearfix"><span class="float-left">国家35</span><span class="float-right">+35</span></li>
    <li class="clearfix"><span class="float-left">国家36</span><span class="float-right">+36</span></li>
    <li class="clearfix"><span class="float-left">国家37</span><span class="float-right">+37</span></li>
    <li class="clearfix"><span class="float-left">国家38</span><span class="float-right">+38</span></li>
    <li class="clearfix"><span class="float-left">国家39</span><span class="float-right">+39</span></li>
    <li class="clearfix"><span class="float-left">国家40</span><span class="float-right">+40</span></li>
    <li class="clearfix"><span class="float-left">国家41</span><span class="float-right">+41</span></li>
    <li class="clearfix"><span class="float-left">国家42</span><span class="float-right">+42</span></li>
    <li class="clearfix"><span class="float-left">国家43</span><span class="float-right">+43</span></li>
    <li class="clearfix"><span class="float-left">国家44</span><span class="float-right">+44</span></li>
    <li class="clearfix"><span class="float-left">国家45</span><span class="float-right">+45</span></li>
    <li class="clearfix"><span class="float-left">国家46</span><span class="float-right">+46</span></li>
    <li class="clearfix"><span class="float-left">国家47</span><span class="float-right">+47</span></li>
    <li class="clearfix"><span class="float-left">国家48</span><span class="float-right">+48</span></li>
    <li class="clearfix"><span class="float-left">国家49</span><span class="float-right">+49</span></li>
    <li class="clearfix"><span class="float-left">国家50</span><span class="float-right">+50</span></li>
</ul>

之后

设置ul li的滚动条

overflow：auto

设置li边框，如果上下边框均设置，可能会出现边框折叠现象，如图：

边框颜色会变深

解决边框重复问题

只设置border-top，单独设置最后一个li元素的border-bottom，这里就要用到伪元素选择器

.container .login .form .form-item .country-code .choose-area .center ul li{
    height: 38px;
    line-height: 38px;
    border-top: 1px solid #e5e5e5;
    /* border-bottom: 1px solid #e5e5e5; */
   }
.container .login .form .form-item .country-code .choose-area .center ul li:last-child{
    border-bottom:1px solid #e5e5e5 ;
}

之后设置国家编码的颜色

设置选中效果时的样式，给要选中的li加上类名selected

.container .login .form .form-item .country-code .choose-area .center ul li.selected{
    color: #42bd56;
}
.container .login .form .form-item .country-code .choose-area .center ul li.selected .float-right{
    color:inherit;
}
.container .login .form .form-item .country-code .choose-area .center ul li.selected .gou{
    width: 30px;
    height: 38px;
    background: url(../imgs/303正确、完成\ \(1\).png) no-repeat left top/30px 38px;
}

<ul>
                                        <li class="clearfix selected">
                                            <span class="float-left">国家名1</span><span class="float-right">+1</span>
                                            <span class="gou float-left"></span>
                                        </li>
                                        <li class="clearfix"><span class="float-left">国家名2</span><span class="float-right">+2</span></li>
                                        <li class="clearfix"><span class="float-left">国家名3</span><span class="float-right">+3</span></li>
                                        <li class="clearfix"><span class="float-left">国家名4</span><span class="float-right">+4</span></li>
                                        <li class="clearfix"><span class="float-left">国家名5</span><span class="float-right">+5</span></li>
                                        <li class="clearfix"><span class="float-left">国家名6</span><span class="float-right">+6</span></li>
                                        <li class="clearfix"><span class="float-left">国家名7</span><span class="float-right">+7</span></li>
                                        <li class="clearfix"><span class="float-left">国家名8</span><span class="float-right">+8</span></li>
                                        <li class="clearfix"><span class="float-left">国家名9</span><span class="float-right">+9</span></li>
                                        <li class="clearfix"><span class="float-left">国家名10</span><span class="float-right">+10</span></li>
                                        <li class="clearfix"><span class="float-left">国家名11</span><span class="float-right">+11</span></li>
                                        <li class="clearfix"><span class="float-left">国家名12</span><span class="float-right">+12</span></li>
                                        <li class="clearfix"><span class="float-left">国家名13</span><span class="float-right">+13</span></li>
                                        <li class="clearfix"><span class="float-left">国家名14</span><span class="float-right">+14</span></li>
                                        <li class="clearfix"><span class="float-left">国家名15</span><span class="float-right">+15</span></li>
                                        <li class="clearfix"><span class="float-left">国家名16</span><span class="float-right">+16</span></li>
                                        <li class="clearfix"><span class="float-left">国家名17</span><span class="float-right">+17</span></li>
                                        <li class="clearfix"><span class="float-left">国家名18</span><span class="float-right">+18</span></li>
                                        <li class="clearfix"><span class="float-left">国家名19</span><span class="float-right">+19</span></li>
                                        <li class="clearfix"><span class="float-left">国家名20</span><span class="float-right">+20</span></li>
                                        <li class="clearfix"><span class="float-left">国家名21</span><span class="float-right">+21</span></li>
                                        <li class="clearfix"><span class="float-left">国家名22</span><span class="float-right">+22</span></li>
                                        <li class="clearfix"><span class="float-left">国家名23</span><span class="float-right">+23</span></li>
                                        <li class="clearfix"><span class="float-left">国家名24</span><span class="float-right">+24</span></li>
                                        <li class="clearfix"><span class="float-left">国家名25</span><span class="float-right">+25</span></li>
                                        <li class="clearfix"><span class="float-left">国家名26</span><span class="float-right">+26</span></li>
                                        <li class="clearfix"><span class="float-left">国家名27</span><span class="float-right">+27</span></li>
                                        <li class="clearfix"><span class="float-left">国家名28</span><span class="float-right">+28</span></li>
                                        <li class="clearfix"><span class="float-left">国家名29</span><span class="float-right">+29</span></li>
                                        <li class="clearfix"><span class="float-left">国家名30</span><span class="float-right">+30</span></li>
                                        <li class="clearfix"><span class="float-left">国家名31</span><span class="float-right">+31</span></li>
                                        <li class="clearfix"><span class="float-left">国家名32</span><span class="float-right">+32</span></li>
                                        <li class="clearfix"><span class="float-left">国家名33</span><span class="float-right">+33</span></li>
                                        <li class="clearfix"><span class="float-left">国家名34</span><span class="float-right">+34</span></li>
                                        <li class="clearfix"><span class="float-left">国家名35</span><span class="float-right">+35</span></li>
                                        <li class="clearfix"><span class="float-left">国家名36</span><span class="float-right">+36</span></li>
                                        <li class="clearfix"><span class="float-left">国家名37</span><span class="float-right">+37</span></li>
                                        <li class="clearfix"><span class="float-left">国家名38</span><span class="float-right">+38</span></li>
                                        <li class="clearfix"><span class="float-left">国家名39</span><span class="float-right">+39</span></li>
                                        <li class="clearfix"><span class="float-left">国家名40</span><span class="float-right">+40</span></li>
                                        <li class="clearfix"><span class="float-left">国家名41</span><span class="float-right">+41</span></li>
                                        <li class="clearfix"><span class="float-left">国家名42</span><span class="float-right">+42</span></li>
                                        <li class="clearfix"><span class="float-left">国家名43</span><span class="float-right">+43</span></li>
                                        <li class="clearfix"><span class="float-left">国家名44</span><span class="float-right">+44</span></li>
                                        <li class="clearfix"><span class="float-left">国家名45</span><span class="float-right">+45</span></li>
                                        <li class="clearfix"><span class="float-left">国家名46</span><span class="float-right">+46</span></li>
                                        <li class="clearfix"><span class="float-left">国家名47</span><span class="float-right">+47</span></li>
                                        <li class="clearfix"><span class="float-left">国家名48</span><span class="float-right">+48</span></li>
                                        <li class="clearfix"><span class="float-left">国家名49</span><span class="float-right">+49</span></li>
                                        <li class="clearfix"><span class="float-left">国家名50</span><span class="float-right">+50</span></li>
                                    </ul>

弹出页面的样式就完成了，再设置隐藏效果即可（给choose-area添加hidden的类名，在common.css中添加样式即可）

.hidden{
    display: none;
}

接下来就是验证码区域，在验证码文本框右边添加”获取验证码“，在input后面加上a元素即可，并设置其为绝对定位，适当调整位置即可

       <div class="form-item">
            <input type="text" placeholder="验证码">
            <a href="" class="ab-right">获取验证码</a>
       </div>

.container .login .form .form-item .ab-right{
    position: absolute;
    top: 5px;
    right: 7px;
    /* 统一样式中a元素已经设置过元素，故此时文字不用设置颜色样式 */
}

接着添加按钮，设置其类名为btn，给按钮设置统一样式

common.css
.btn{
    background: #41ac52;
    cursor: pointer;
    color: #fff;
    text-align: center;
    border-radius: 10px;
}

.container .login .form .form-item .btn{
    width: 100%;
    height: 34px;
    font-size: 15px;
}

然后设置下次自动登录一行，设置浮动，解决高度坍塌

      <div class="form-item tip clearfix">
           <lable class="floay-left"><input type="checkbox">
                 下次自动登录                                
           </lable>
           span class="float-right"><a href="">收不到验证码</a></span>
       </div>

.container .login .form .tip{
    font-size: 12px;
    color: #333;
}

紧接着就是密码区域，密码区域和短信注册区域大致相同

<!-- 密码登录 -->
                <div>
                    <div class="form-item tip clearfix">
                        <a href="" class="float-right">找回密码</a>
                    </div>
                    <div class="form-item">
                        <input type="text" placeholder="手机号/邮箱">
                    </div>
                    <div class="form-item">
                        <input type="password" placeholder="密码">
                    </div>
                    <div class="form-item">
                        <button disabled class="btn">登录豆瓣</button>
                    </div>
                    <div class="form-item tip clearfix">
                        <lable class="floay-left"><input type="checkbox">下次自动登录 
                        </lable>
                        <span class="float-right"><a href="">海外手机登录</a></span>
                    </div>
                </div>

紧接着就是二维码登录了，将qrcode分为三个区域，分别为title，code，tip（类名），先将整体结构制作出来

<div class="qrcode hidden">
            <div class="title">
                二维码登录
            </div>
            <div class="code">
                <img src="./imgs/豆瓣二维码.png" alt="">
            </div>
            <div class="tip">
                请打开豆瓣客户端扫一扫
            </div>
        </div>

接着设置其样式，在这里注意二维码图片下面有白边，解决白边可以设置code区域font-size为0，也可将img变为块盒，设置二维码水平居中，即行盒的水平居中，设置其父元素text-align为center

接着设置三部分的宽高，文字颜色，背景颜色等，tip水平居中时就可直接用margin：0 auto；tip为块盒

.container .qrcode{
    font-size: 13px;
}
.container .qrcode .title{
    color: #333;
    border-bottom: 1px solid #ececec;
}
.container .qrcode .code{
    /* 行盒的水平居中 */
    text-align: center;
    /* 去除图片的白边 */
    font-size: 0;
    margin: 20px 0;
}
/* img为行盒 */
.container .qrcode .code img{
    width: 170px;
    height: 170px;
} 
.container .qrcode .tip{
    width: 183px;
    height: 25px;
    line-height: 25px;
    background: rgba(0,0,0,.5);
    color: #494949;
    margin: 0 auto;
    text-align: center;
    border-radius: 20px;
    margin-top: 10px;
}

二维码效果如图：

接着设置右上角的切换二维码的图标，

先创建两个i元素，设置绝对定位以及背景图即可，同时还有鼠标指向该图标时，所显现的文字样式，在再加一个元素设置其绝对定位即可

<div class="qrcode hidden">
            <div class="title">
                二维码登录
            </div>
            <div class="code">
                <img src="./imgs/豆瓣二维码.png" alt="">
            </div>
            <div class="tip">
                请打开豆瓣客户端扫一扫
            </div>
        </div>
        <div class="change">
            <!-- 通过类名切换图标 -->
            <!-- <i class="icon icon-qrcode"></i> -->
            <i class="icon icon-pc"></i>
        </div>
        <div class="pointer hidden">
            扫码登录
        </div>
    </div>

.container .change .icon{
    width: 30px;
    height: 30px;
    /* i是行盒，不可设置高度 */
    display: block;
    cursor: pointer;
}
.container .change .icon-qrcode{
    background: url("../imgs/icon-qrcode.png") no-repeat left right/100% 100%;
}
.container .change .icon-pc{
    background: url("../imgs/icon-pc.png") no-repeat left right/100% 100%;
}
.container .change{
    position: absolute;
    width: 30px;
    height: 30px;
    top: 10px;
    right: 0;
}
.container .pointer{
    position: absolute;
    height: 28px;
    line-height: 28px;
    border: 1px solid rgba(66,189,86,.3);
    color: #666;
    font-size: 13px;
    background: #f5faf9;
    right: 50px;
    top: 10px;
    padding: 0 5px;
    border-radius: 5px;
}

在这里可以给change图标

设置鼠标悬浮样式（兄弟元素）

.container .change:hover+.pointer{
    display: block;
}

guai_guai_guai

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
项目实战2：豆瓣首页-注册区域

横幅（login）区域：我们将以上部分做成一个新的页面（iframe），之后将该页面嵌入在主页面即可接着我们将短信注册和密码登录两个界面放至类名为container的div的盒子中首先构造短信注册（类名为login的div），注册里又可分为三部分，选择区域，表单区域，
复制链接

扫一扫