html：简易制作拼多多登录页面

最新推荐文章于 2024-07-19 20:59:15 发布

Astar stars

最新推荐文章于 2024-07-19 20:59:15 发布

阅读量1.9k

点赞数 6

分类专栏： html作品分享文章标签： html servlet 前端

本文链接：https://blog.csdn.net/astar2022/article/details/125938358

版权

html作品分享专栏收录该内容

14 篇文章 3 订阅

订阅专栏

效果展示：

代码展示：

html：

  <div class="input-group-wrap">
                    <div class="title-wrap">
                        <div class="title">
                            <h4>境外商家入驻</h4>
                            <div class="oversea">
                                <a href="">境外商家入驻</a>
                                <i class="iconfont icon-question"></i>
                            </div>
                        </div>
                        <!-- 输入框部分 -->
                        <div class="input-group">
                            <form action="">
                                <!-- <div class="first-input-wrap">
                                  <div class="photoNumber">中国 +86</div>
                                  <input type="text" placeholder="请输入手机号码" >
                                </div> -->
                                <div class="first-input-wrap">
                                    <button class="photoNumber">中国 +86</button>
                                    <input type="text" class="in" placeholder="请输入手机号码" />
                                </div>
                                <div class="second-input-wrap clearfix">
                                    <input type="password" class="in" placeholder="请输入密码" />
                                    <img src="./img/lock.png">
                                </div>
                                <div class="third-input-wrap">
                                    <input type="text" class="in" placeholder="请输入短信验证码" />
                                    <img src="./img/mail.png" alt="">
                                    <div class="span-wrap">
                                        <a href=""><span>获取验证码</span></a>
                                    </div>
                                </div>
                                <button>0元入驻</button>
                                <div class="help">
                                    已有账号?
                                    <a href="#">
                                        <span>立即登录</span>
                                    </a>
                                    <a href="#">
                                        <span>入驻手册</span>
                                    </a>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

css部分：

.input-group {
  margin-left: 10px;
}
.first-input-wrap,
.second-input-wrap,
.third-input-wrap {
  position: relative;
}
.first-input-wrap input,
.second-input-wrap input,
.third-input-wrap input {
  border: 1px solid #dbdbdb;
  border-radius: 3px;
  margin-bottom: 16px;
  width: 290px;
  overflow: hidden;
}
.first-input-wrap > .photoNumber {
  position: absolute;
  width: 82px;
  height: 37px;
  font-size: 14px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.8);
  background: rgba(0, 0, 0, 0.04);
  border-right: 1px solid #dadada;
  outline: none;
  cursor: pointer;
  z-index: 20;
}
.first-input-wrap input {
  outline: none;
  color: #d3d9e7;
  height: 36px;
  padding-left: 90px;
  width: 200px;
}
.first-input-wrap input:hover,
.second-input-wrap input:hover,
.third-input-wrap input:hover {
  border-color: #adadad;
}

.first-input-wrap input:focus,
.second-input-wrap input:focus,
.third-input-wrap input:focus
  { 
    border-color:#1199EE;
}

.second-input-wrap > img,
.third-input-wrap > img {
  position: absolute;
  left: 5px;
  width: 20px;
  height: 20px;
  margin: 9px 5px;
  cursor: pointer;
  vertical-align: middle;
  z-index: 20;
}
.second-input-wrap>input,
.third-input-wrap>input {
  outline: none;
  height: 36px;
  color: #d3d9e7;
  float: left; 
  padding-left: 40px;
  width: 250px;
}
/* 弹性布局 */
.third-input-wrap > .span-wrap {
  position: absolute;
  right: 0;
  display: flex;
  height: 36px;
  overflow: hidden;
  vertical-align: middle;
  align-items: center;
  flex-direction: row-reverse;
}
.third-input-wrap span {
  padding: 0 12px;
  border-left: 1px solid #dbdbdb;
  font-size: 14px;
  color: #2279cb;
  cursor: pointer;
  transition: all 0.5s;
}
.third-input-wrap span:hover {
  color: #221a6c;
}

/* 按钮部分 */
.input-group > form > button {
  width: 290px;
  height: 40px;
  color: white;
  background-color: #ff5454;
  cursor: pointer;
  border-radius: 5px;
}
.input-group > form > button:hover {
  background-color: #e33333;
}
/* 输入框底部 */
.help {
  font-size: 12px;
  line-height: 40px;
}
.help span {
  color: #2279cb;
}
.help > a:last-of-type {
  float: right;
}
.help > a:hover {
  color: #335577;
}