做个响应式登陆页面

最新推荐文章于 2024-04-30 07:44:17 发布
最新推荐文章于 2024-04-30 07:44:17 发布
阅读量1.9k 收藏 27
点赞数 1
文章标签： webview html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dhxb45678/article/details/123071881
版权

首先做出来的效果图如图所示：

每次做一个页面，我们首先要搞懂的就是它一共分为几个部分，可以由哪几个盒子来组成，如下图：

 相关的 html 部分如下所示：

<body>
    <div class="big-box">
        <div class="small-box">
            <div class="box-1"></div>   <!--左边的图片部分-->
            <div class="box-2">         <!--右边的表单部分-->
                <div class="box-text1">
                    <h3>Sign in Here</h3>
                </div>
                <div class="box-text2">
                    <div class="box-text">
                         <form>
                            <input type="text" placeholder="用户名">
                        </form>
                    </div>
                    <div class="box-password">
                        <form>
                            <input type="password" placeholder="密码">
                        </form>
                    </div>
                    <div class="box-button">
                        <label for="1">
                              <input type="checkbox" id="1" class="ma">
                              <span class="one"></span>
                               记住密码
                        </label>
                        <label for="2">
                              <input type="checkbox" id="2" class="ma">
                              <span class="two"></span>
                              自动登录
                        </label>
                    </div>
                    <div class="button">
                        <form>
                              <button>Sign in</button>
                        </form>
</body>

相关的 css 样式如下：

*{
    margin: 0;
    padding: 0;
}
body,html{
    width: 100%;
    height:100%;
    background-image: url(../images/18.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.big-box{
    width:850px;
    height: 500px;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 5px;
    background: rgba(0,0,0,.5);
}
.small-box{
    width:830px;
    height: 480px;
    margin-top: 10px;
    margin-left: 10px;
    margin-bottom: 10px;
    margin-right: 10px;
}
.box-1{
    width: 490px;
    height: 480px;
    background-image: url(../images/14.jpg);
    background-size: cover;
    float: left;
}
.box-2{
    width: 340px;
    height: 480px;
    background:rgba(255,255,255,.8);
    float: left;
}
.box-text1{
    width: 340px;
    height: 60px;
    margin-top: 85px;
    margin-left: 30px;
}
.box-text2{
    width:340px;
    height:420px;
    margin-top: 10px;
}
.box-text{
    display:block;
    width: 340px;
    height: 20px;
    margin-left: 30px;
}
.box-password{
    display:block;
    width: 340px;
    height: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 30px;
}
.box-checkbox{
    display: block;
    width: 340px;
    height: 30px;
    margin-bottom:20px;
}
.box-button{
    display: block;
    width:340px;
    height:40px;
    font-size: 18px;
}
input[type=text]:focus{
    outline: 0px;
}
/* 移除选中时会出现的框*/
input[type=text] {
    font-size: 15px;
    width: 250px; /*文本框的长度，即下划线的长度*/
    border-bottom: 2px solid black; /*下划线*/
    border-top: none; 
    border-left: none;
    border-right: none;
    background-color:rgba(255,255,255,0)
}
input[type=password]:focus{
    outline: 0px;
}
input[type=password] {
    font-size: 15px;
    width: 250px;
    border-bottom: 2px solid black; 
    border-top: none; 
    border-left: none;
    border-right: none;
    background-color:rgba(255,255,255,0)
}
/*input[type=password]::-ms-reveal{
    display:none;
}*/
/*去掉右边的眼睛图标*/
.ma {
    margin: 0px 30px 0px 5px;
    width: 25px;
    height: 25px;
    cursor: pointer;
    opacity: 0;
}
.ma[type=checkbox]+span{
    display: inline-block;
    margin-left: -30px;
    width: 25px;
    height: 25px;
    border: .02rem solid #0D1529;
    background-color: transparent;
    position: absolute;
    cursor: pointer;
}
.ma[type=checkbox]:checked+span::after{
    content:'\2714' ;
    color: black;
    position: absolute;
    font-size: 25px;
    left: 2px;
    bottom: -2px;
}

button{
    outline: 0px;
}
button{
    font-size: 18px;
    width:250px;
    height:35px;
    border-radius: 30px;
    border: none;
    background-color:rgba(41, 113, 139, 0.61);
    -webkit-text-fill-color:white;
    margin-left: 47px;
    margin-top: 40px;
}
/*响应式*/
@media screen and (max-width: 749px){
.big-box{
    width: 510px;
    height:270px ;
}
.small-box{
    width:490px;
    height: 250px;
}
.box-1{
    width: 250px;
    height: 250px;
}
.box-2{
    width: 240px;
    height: 250px;
}
.box-text1{
    margin-top: 25px;
    margin-left: 20px;
}
.box-text2{
    margin-top: -15px;
}
.box-text{
    margin-left: 20px;
}
.box-password{
    margin-left: 20px;
}
input[type=text]{
    width: 180px;
}
input[type=password]{
    width: 180px;
}
.ma{
    margin:0px 25px 0px 5px; ;
    width: 10px;
    height: 10px;
}
.ma[type=checkbox]+span{  /*被遮住小方格的尺寸*/
    width: 15px;
    height: 15px;
    font-size: 10px;
}
.ma[type=checkbox]:checked+span::after{  /*上面小方格的尺寸*/
    width: 15px;
    height: 15px;
    font-size: 15px;
    bottom: 2px;
}
.box-button{
    font-size: 15px;
}
button{
    font-size: 15px;
    width:160px;
    height:25px;
    border-radius: 30px;
    border: none;
    background-color:rgba(41, 113, 139, 0.61);
    -webkit-text-fill-color:white;
    margin-left: 38px;
    margin-top: 10px;
}
}

注释：

  • background-size: 100% 100%;  background-repeat: no-repeat; 可以让背景图片全部铺展；

  • margin: auto;   position: absolute;    top: 0;    left: 0;    right: 0;    bottom: 0;  可以让该盒子在屏幕的最中央显示（其中的 left、right、top、bottom 值可以不是0，但必须相等）；

  • background: rgba(0,0,0,.5);  可以给 div 块设置半透明效果，其中第四个数字是半透明度，必须满足：（1≤ 半透明度 ≥0），写 .5 和 0.5 是一个意思；

  • input[type=text]:focus{    outline: 0px;     }  这里用到了伪元素，focus 表明被点击时的伪元素，这句代码可以去除这个表单在被点击时的外边框；

  • input[type=password]::-ms-reveal{    display:none;    }  用于去除 password 右边的眼睛图标；

  • content:'\2714' ;   这是复选框被选中时对勾的另一个样式；

  • @media screen and (max-width: 749px){ ... } 这里面再对不同屏幕尺寸的页面设置新的样式，则完成了响应式的制作。

到这里一个登录页面就基本完成了，其实这个很多时候就是一直试一直试，然后试出来的，所以就是一定要有耐心，希望我们都能取得进步！

我就不信还能重复
关注
  • 1
    点赞
  • 踩
  • 27
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
纯HTML+CSS实现可响应式登陆界面
lonely__snow的博客
03-05 4990
使用纯HTML+CSS实现一个可点击，可响应的登陆界面 包含日月切换，登陆界面，注册界面，流星效果等
响应式开发：登录界面实现
ayangann915的博客
11-02 6086
学习了慕课网上响应式开发的课程，对响应式开发有了一定的了解，完成了一个简单的小实战，登录界面的实现。 具体资源详见： https://download.csdn.net/download/ayangann915/10761207 在不同分辨率的设备下显示不同的效果，如下： 首先实现在ipad设备上的效果： &amp;amp;lt;!DOCTYPE html&amp;amp;gt; &amp;amp;lt;html lang=&amp;quot;en&amp
【HTML CSS JS】耗时一下午，整理出了一个精美的响应式登陆注册表单（附源码）_源码 响应式登录页面
最新发布
2301_82243558的博客
04-30 226
最后：   我将实现思路分成了如下，列举如下：通过使用HTML和CSS可以完成整个登录设计表单的背景，背景颜色采取了橘橙色的设计，具有一种和！ 登陆注册表单样式设计 采取HTML+CSS样式可以设计出登陆注册表单的样式，因为还没有加入代码，所以暂时只能显示，无法显示；并且图片的轮转还不能实现（）。 复制如下源码粘贴到标签之间 CSS源码 复制如下源码粘贴到标签之间 【登录】|【注册】表单切换设计 使用嵌入到标签之中，可以实现和，加入JAVASCRIPT代码后登陆注册表单便可以动起来了！复制如下源码粘贴
HTML5响应式用户登录界面模板.zip_enoughpdo_html5 模板_html5 用户登陆_javascript_登录
09-23
HTML5响应式用户登录界面模板，有详细的js，css代码。
响应式登录HTML模板
11-21
一个响应式登录模板，表单中默认包含用户名，密码，验证码等字段，页面精美，自适应能力强,登录页面使用HTML+css+Javascript技术完成页面构建。
响应式html后台登录页面
02-07
html网站后台登录首页，响应式页面。适合初学者学习使用
html响应式登录界面的布局
11-04
在这个“HTML响应式登录界面的布局”主题中，我们将深入探讨如何构建一个适应各种屏幕尺寸的登录界面。 首先，HTML（超文本标记语言）是网页内容的基础结构，它定义了网页的元素和结构。在创建响应式登录界面时，...
绿色清爽响应式登录页面模板
08-31
【绿色清爽响应式登录页面模板】是一个专为现代网页设计打造的H5资源，它以清新、简洁的绿色调为主，旨在提供一个用户友好的登录界面。响应式设计是其核心特点，使得这个模板能够在不同设备上，如桌面、平板电脑和...
扁平登录注册界面响应式网页模板
01-22
【扁平登录注册界面响应式网页模板】是一种现代网页设计趋势的体现，它结合了扁平化设计风格和响应式布局技术，旨在提供简洁、直观的用户体验，同时适应各种设备的屏幕尺寸。扁平化设计摒弃了过多的装饰元素，强调...
电子邮件登录界面响应式网页模板
01-22
- `html`：这是响应式登录界面的HTML源代码文件，其中包含了HTML标记、CSS样式和可能的JavaScript脚本，用于实现界面的动态行为和响应式特性。 在实际应用中，开发者可以根据自己的需求对这个模板进行自定义，比如...
HTML5响应式会员注册登录界面模板.zip
05-23
HTML5响应式会员注册登录界面模板，自适应分辨率，兼容PC端和移动端，有会员注册和用户登录两种功能。
HTML5响应式第三方登录页面模板.zip
05-23
HTML5响应式第三方登录页面模板，响应式设计，自适应分辨率，兼容PC端和移动端，支持微信、QQ、微博等第三方登录，有表单验证功能。
HTML5响应式后台登录界面模板
01-17
HTML5响应式后台登录界面模板基于HTML5+Bootstrap3+jQuery制作，响应式布局设计，自适应屏幕分辨率大小，多个网页背景图片自动轮播，清新简约，效果非常不错！有邮箱、密码、验证码、记住登录账号、重置等表单项目，带表单验证功能。
响应式Login用户后台登录模板.zip
05-27
响应式Login用户后台登录模板，基于jquery.1.11.0.min.js制作，自适应分辨率大小，带关闭按钮。
Bootstrap响应式注册登录界面模板
05-13
Bootstrap响应式注册登录界面模板基于Bootstrap4.2.1制作，自适应分辨率，兼容PC端和移动端，有注册、登录两个页面模板。
Bootstrap响应式登录界面模板
11-01
这是一款觉得很漂亮的Bootstrap响应式登录界面模板，值得很多初学者学习
HTML/CSS响应式布局--一个简单的响应式登陆表单
wuxiYmy的博客
08-08 4589
  响应式登陆表单 垂直浏览器窗口大小查看效果， 在屏幕宽度尺寸小于 650px 时，设置两列的布局上下堆叠显示。 （复制代码，在浏览器打开，即可查看效果） &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;下拉菜单实例&lt;/title&gt; &lt;meta charset="utf-8"&gt; &am
前端页面响应式布局 简单实现
qq_34963461的博客
01-13 3285
找到了个网址  写的就是这个响应式布局的代码  复制粘贴到css 文件  就能实现等比例缩放功能 下面是网址       http://www.jiawin.com/response-type-layout-design 里面的范例之一 /* 当浏览器的可视区域小于980px */ @media screen and (max-width: 980px) {
自适应网页(响应式布局)+弹性布局
热门推荐
云_飞扬
06-11 1万+
1.自适应网页 1.声明viewport元标签 注：width=device-width 让宽度为设备宽度    initial-scale=1    设置初始缩放比例    user-scalable=no   设置用户是否可以手动缩放 2.使用流式布局    实现方案：float:left      display:inline-block;      弹性布局 displ
响应式登录页面代码vue
09-02
当然，我可以为您提供一个简单的响应式登录页面的Vue代码示例。下面是一个基本的模板，您可以根据自己的需求进行修改： ```vue <template> <div class="login-form"> <h2>Login</h2> <form @submit.prevent="login"> <div> <label for="email">Email:</label> <input type="email" id="email" v-model="email" required> </div> <div> <label for="password">Password:</label> <input type="password" id="password" v-model="password" required> </div> <button type="submit">Submit</button> </form> </div> </template> <script> export default { data() { return { email: '', password: '' }; }, methods: { login() { // 在这里编写登录逻辑 // 可以使用this.email和this.password访问输入框的值 // 例如，可以将登录请求发送到后端API console.log('Email:', this.email); console.log('Password:', this.password); } } }; </script> <style scoped> .login-form { max-width: 300px; margin: 0 auto; padding: 20px; } </style> ``` 这段代码定义了一个简单的登录表单，其中包含一个邮箱输入框和一个密码输入框。当用户点击Submit按钮时，表单的submit事件被触发，会调用`login`方法。您可以在`login`方法中编写实际的登录逻辑，例如向后端API发送登录请求。 请注意，这只是一个基本的示例，您可能需要根据自己的需求进行进一步的定制和验证。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值