HTML+CSS+JS登录注册页面（媒体查询自适应）

今天分享一个登录注册页面，正好在学习媒体查询，在此记录一下。、

目录

一、页面展示

二、准备

三、代码部分

1.HTML

2.CSS

 3.JS

四、尾语

---

一、页面展示

二、准备

引入谷歌字体@import url('https://fonts.font.im/css?family=Poppins');

左上方logo为html5标志图片，也可使用其他图片根据自己的喜好，或者是引入图标库

boxincons图标库：

<link href='https://unpkg.com/boxicons@2.1.2/css/boxicons.min.css' rel='stylesheet'>

 Boxicons : Premium web friendly icons for free

三、代码部分

1.HTML

（1）autocomplete属性： on或off。on: 表单有自动完成功能。off: 表单无自动完成功能。注：autocomplete属性不仅可以用于form元素，还可以用于所以输入类型的input元素。

（2）minlength属性用来指定文本框或 textarea 中，允许输入的最少字符数。一个汉字被看作一个字符。在以下文本框中，用户最少要输入 4个字符，同理maxlength为输入的最多字符。

（3）required属性为html5的新属性，定义及用法：required 属性是一个布尔属性，规定必需在提交之前填写输入字段。如果使用该属性，则字段是必填（或必选）的。

（4）bullets：自定义轮播图指示点（indicator-dots），定义data-value给指示点赋值

<main>
        <div class="box">
            <div class="inner_box">
                <div class="forms_wrap">
                    <form action="login2.html" autocomplete="off" class="login_form">
                        <div class="logo">
                            <!-- <i class='bx bxl-html5 bx-lg'></i> -->
                            <img src="/login_templat