【HTML】耗时一下午，整理出了一个精美的响应式登陆注册表单（附源码）前言各位C站的小伙伴们，你想要获得一款精美的

前言

各位C站的小伙伴们，你想要获得一款精美的响应式登录页面吗！收藏我并且关注博主，让我们拿起电脑一起练，一路火光带闪电！无论是电脑，手机还是平板都可以完美适配哦！

响应式布局介绍响应式布局是 Ethan Marcotte 在 2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端 ——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着大屏幕移动设备的普及，用“大势所趋”来形容也不为过。随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些成形的模式。

响应式登陆页面效果演示下面展示四种情况下的效果演示，包括 PC端，手机端，IPAD竖屏和IPAD横屏

PC端效果演示

手机端效果演示

IPAD竖屏效果演示

IPAD横屏效果演示

实现思路看完效果图后，各位小伙伴们肯定很想知道实现的思路，接下来我将分步骤逐一进行讲解，如果想要获取源码的小伙伴可以跳过该部分，直接前往最后的完整源码章节！，在分步讲解中我会将HTML，CSS，JAVASCRIPT三个部分全部放在同一个文件中，方便各位小伙伴们获取! 除此之外，为了方便各位小伙伴们免受图片链接找不到的烦恼，我已经将所有图片上载到我的个人网站里并且将图片链接直接替换到了代码中，所以小伙伴们复制代码的时候不需要再考虑图片丢失问题！复制整个源码到一个HTML文件中即可完整显示注册表单效果图！最后：代码中有许多可以添加链接的地方都设置为空了，小伙伴们可以根据需要自行添加！我将实现思路分成了如下五个部分，列举如下：

背景的设置登陆注册表单样式设计【登录】|【注册】表单切换设计【图片】或【文字】的轮换设计响应式布局设计背景的设置通过使用HTML和CSS可以完成整个登录设计表单的背景，背景颜色采取了橘橙色的设计，具有一种高级感和亲切感！

HTML+CSS源码

Sign in & Sign up Form main { width: 100%; min-height: 100vh; overflow: hidden; background-color: #ff8c6b; padding: 2rem; display: flex; align-items: center; justify-content: center; } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 登陆注册表单样式设计采取HTML+CSS样式可以设计出登陆注册表单的样式，因为还没有加入JAVASCRIPT代码，所以暂时只能显示登录表单，无法显示注册表单；并且图片的轮转还不能实现（如下gif图所示，任何点选操作无作用）。

HTML源码复制如下源码粘贴到

标签之间

easyclass

          <div class="heading">
            <h2>Welcome Back</h2>
            <h6>Not registred yet?</h6>
            <a href="#" class="toggle">Sign up</a>
          </div>

          <div class="actual-form">
            <div class="input-wrap">
              <input
                type="text"
                minlength="4"
                class="input-field"
                autocomplete="off"
                required
              />
              <label>Name</label>
            </div>

            <div class="input-wrap">
              <input
                type="password"
                minlength="4"
                class="input-field"
                autocomplete="off"
                required
              />
              <label>Password</label>
            </div>

            <input type="submit" value="Sign In" class="sign-btn" />

            <p class="text">
              Forgotten your password or you login datails?
              <a href="#">Get help</a> signing in
            </p>
          </div>
        </form>

        <form action="index.html" autocomplete="off" class="sign-up-form">
          <div class="logo">
            <img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e2eddec121ee4f20b4cf573f6974b87c~tplv-k3u1fbpfcp-zoom-1.image" alt="easyclass" />
            <h4>easyclass</h4>
          </div>

          <div class="heading">
            <h2>Get Started</h2>
            <h6>Already have an account?</h6>
            <a href="#" class="toggle">Sign in</a>
          </div>

          <div class="actual-form">
            <div class="input-wrap">
              <input
                type="text"
                minlength="4"
                class="input-field"
                autocomplete="off"
                required
              />
              <label>Name</label>
            </div>

            <div class="input-wrap">
              <input
                type="email"
                class="input-field"
                autocomplete="off"
                required
              />
              <label>Email</label>
            </div>

            <div class="input-wrap">
              <input
                type="password"
                minlength="4"
                class="input-field"
                autocomplete="off"
                required
              />
              <label>Password</label>
            </div>

            <input type="submit" value="Sign Up" class="sign-btn" />

            <p class="text">
              By signing up, I agree to the
              <a href="#">Terms of Services</a> and
              <a href="#">Privacy Policy</a>
            </p>
          </div>
        </form>
      </div>

      <div class="carousel">
        <div class="images-wrapper">
          <img src="http://wyz-math.cn/admin/wyz%E8%87%AA%E5%BB%BA/img/image1.png" class="image img-1 show" alt="" />
          <img src="http://wyz-math.cn/admin/wyz%E8%87%AA%E5%BB%BA/img/image2.png" class="image img-2" alt="" />
          <img src="http://wyz-math.cn/admin/wyz%E8%87%AA%E5%BB%BA/img/image3.png" class="image img-3" alt="" />
        </div>

        <div class="text-slider">
          <div class="text-wrap">
            <div class="text-group">
              <h2>Create your own courses</h2>
              <h2>Customize as you like</h2>
              <h2>Invite students to your class</h2>
            </div>
          </div>

          <div class="bullets">
            <span class="active" data-value="1"></span>
            <span data-value="2"></span>
            <span data-value="3"></span>
          </div>
        </div>
      </div>
    </div>
  </div>

@import url("fonts.googleapis.com/css2?family…");

*, *::before, *::after { padding: 0; margin: 0; box-sizing: border-box; }

body, input { font-family: "Poppins", sans-serif; }

.box { position: relative; width: 100%; max-width: 1020px; height: 640px; background-color: #fff; border-radius: 3.3rem; box-shadow: 0 60px 40px -30px rgba(0, 0, 0, 0.27); }

.inner-box { position: absolute; width: calc(100% - 4.1rem); height: calc(100% - 4.1rem); top: 50%; left: 50%; transform: translate(-50%, -50%); }

.forms-wrap { position: absolute; height: 100%; width: 45%; top: 0; left: 0; display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; transition: 0.8s ease-in-out; }

form { max-width: 260px; width: 100%; margin: 0 auto; height: 100%; display: flex; flex-direction: column; justify-content: space-evenly; grid-column: 1 / 2; grid-row: 1 / 2; transition: opacity 0.02s 0.4s; }

form.sign-up-form { opacity: 0; pointer-events: none; }

.logo { display: flex; align-items: center; }

.logo img { width: 27px; margin-right: 0.3rem; }

.logo h4 { font-size: 1.1rem; margin-top: -9px; letter-spacing: -0.5px; color: #151111; }

.heading h2 { font-size: 2.1rem; font-weight: 600; color: #151111; }

.heading h6 { color: #bababa; font-weight: 400; font-size: 0.75rem; display: inline; }

.toggle { color: #151111; text-decoration: none; font-size: 0.75rem; font-weight: 500; transition: 0.3s; }

.toggle:hover { color: #8371fd; }

.input-wrap { position: relative; height: 37px; margin-bottom: 2rem; }

.input-field { position: absolute; width: 100%; height: 100%; background: none; border: none; outline: none; border-bottom: 1px solid #bbb; padding: 0; font-size: 0.95rem; color: #151111; transition: 0.4s; }

label { position: absolute; left: 0; top: 50%; transform: translateY(-50%); font-size: 0.95rem; color: #bbb; pointer-events: none; transition: 0.4s; }

.input-field.active { border-bottom-color: #151111; }

.input-field.active + label { font-size: 0.75rem; top: -2px; }

.sign-btn { display: inline-block; width: 100%; height: 43px; background-color: #151111; color: #fff; border: none; cursor: pointer; border-radius: 0.8rem; font-size: 0.8rem; margin-bottom: 2rem; transition: 0.3s; }

.sign-btn:hover { background-color: #8371fd; }

.text { color: #bbb; font-size: 0.7rem; }

.text a { color: #bbb; transition: 0.3s; }

.text a:hover { color: #8371fd; }

main.sign-up-mode form.sign-in-form { opacity: 0; pointer-events: none; }

main.sign-up-mode form.sign-up-form { opacity: 1; pointer-events: all; }

main.sign-up-mode .forms-wrap { left: 55%; }

main.sign-up-mode .carousel { left: 0%; }

.carousel { position: absolute; height: 100%; width: 55%; left: 45%; top: 0; background-color: #ffe0d2; border-radius: 2rem; display: grid; grid-template-rows: auto 1fr; padding-bottom: 2rem; overflow: hidden; transition: 0.8s ease-in-out; }

.images-wrapper { display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; }

.image { width: 100%; grid-column: 1/2; grid-row: 1/2; opacity: 0; transition: opacity 0.3s, transform 0.5s; }

.img-1 { transform: translate(0, -50px); }

.img-2 { transform: scale(0.4, 0.5); }

.img-3 { transform: scale(0.3) rotate(-20deg); }

.image.show { opacity: 1; transform: none; }

.text-slider { display: flex; align-items: center; justify-content: center; flex-direction: column; }

.text-wrap { max-height: 2.2rem; overflow: hidden; margin-bottom: 2.5rem; }

.text-group { display: flex; flex-direction: column; text-align: center; transform: translateY(0); transition: 0.5s; }

.text-group h2 { line-height: 2.2rem; font-weight: 600; font-size: 1.6rem; }

.bullets { display: flex; align-items: center; justify-content: center; }

.bullets span { display: block; width: 0.5rem; height: 0.5rem; background-color: #aaa; margin: 0 0.25rem; border-radius: 50%; cursor: pointer; transition: 0.3s; }

.bullets span.active { width: 1.1rem; background-color: #151111; border-radius: 1rem; }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 【登录】|【注册】表单切换设计&【图片】【文字】的轮换设计使用JAVASCRIPT嵌入到标签之中，可以实现【登录】|【注册】表单切换设计和图片【文字】的轮换设计，加入JAVASCRIPT代码后登陆注册表单便可以动起来了！

JAVASCRIPT源码复制如下源码粘贴到标签之间

const inputs = document.querySelectorAll(".input-field"); const toggle_btn = document.querySelectorAll(".toggle"); const main = document.querySelector("main"); const bullets = document.querySelectorAll(".bullets span"); const images = document.querySelectorAll(".image");

inputs.forEach((inp) => { inp.addEventListener("focus", () => { inp.classList.add("active"); }); inp.addEventListener("blur", () => { if (inp.value != "") return; inp.classList.remove("active"); }); });

toggle_btn.forEach((btn) => { btn.addEventListener("click", () => { main.classList.toggle("sign-up-mode"); }); });

function moveSlider() { let index = this.dataset.value;

let currentImage = document.querySelector(.img-${index}); images.forEach((img) => img.classList.remove("show")); currentImage.classList.add("show");

const textSlider = document.querySelector(".text-group"); textSlider.style.transform = translateY(${-(index - 1) * 2.2}rem);

bullets.forEach((bull) => bull.classList.remove("active")); this.classList.add("active"); }

bullets.forEach((bullet) => { bullet.addEventListener("click", moveSlider); });

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 响应式布局设计

通过不同的媒介类型和条件定义样式表规则。媒介查询让CSS可以更精确作用于不同的媒介类型和同一媒介的不同条件。媒介查询的大部分媒介特性都接受min和max用于表达”大于或等于”和”小于或等于”。如：width会有min-width和max-width媒介查询可以被用在CSS中的@media和@import规则上，也可以被用在HTML和XML中。通过这个标签属性，我们可以很方便的在不同的设备下实现丰富的界面，特别是移动设备，将会运用更加的广泛。

CSS源码复制如下源码粘贴到标签之间，便可实现多分辨率下的完美显示！

@media (max-width: 850px) { .box { height: auto; max-width: 550px; overflow: hidden; }

.inner-box { position: static; transform: none; width: revert; height: revert; padding: 2rem; }

.forms-wrap { position: revert; width: 100%; height: auto; }

form { max-width: revert; padding: 1.5rem 2.5rem 2rem; transition: transform 0.8s ease-in-out, opacity 0.45s linear; }

.heading { margin: 2rem 0; }

form.sign-up-form { transform: translateX(100%); }

main.sign-up-mode form.sign-in-form { transform: translateX(-100%); }

main.sign-up-mode form.sign-up-form { transform: translateX(0%); }

.carousel { position: revert; height: auto; width: 100%; padding: 3rem 2rem; display: flex; }

.images-wrapper { display: none; }

.text-slider { width: 100%; } }

@media (max-width: 530px) { main { padding: 1rem; }

.box { border-radius: 2rem; }

.inner-box { padding: 1rem; }

.carousel { padding: 1.5rem 1rem; border-radius: 1.6rem; }

.text-wrap { margin-bottom: 1rem; }

.text-group h2 { font-size: 1.2rem; }

form { padding: 1rem 2rem 1.5rem; } } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 完整源码各位小伙伴只需要复制以下所有源码然后新建一个HTML文件将源码复制进去，然后就可以直接运行了！