响应式开发：登录界面实现

最新推荐文章于 2024-07-24 23:00:08 发布
最新推荐文章于 2024-07-24 23:00:08 发布
阅读量6k 收藏 41
点赞数 8
分类专栏： 前端 文章标签： 响应式开发 登录界面实现 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ayangann915/article/details/83660516
版权

学习了慕课网上响应式开发的课程，对响应式开发有了一定的了解，完成了一个简单的小实战，登录界面的实现。
具体资源详见：
https://download.csdn.net/download/ayangann915/10761207
在不同分辨率的设备下显示不同的效果，如下：
在这里插入图片描述
在这里插入图片描述
首先实现在ipad设备上的效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <link rel="stylesheet" href="reset.css">
    <style>
        body,html{
            background: white;/*背景设置为白色*/
        }
        .wrapper{
           border: 1px solid red;
            width: 400px;
            height: 500px;
            position: absolute;/*将登录界面显示在屏幕中间，使用绝对定位，top,left取值为高度宽度的二分之一*/
            top: 250px;
            left: 200px;
        }
        header{
            width: 100%;
            height: 91px;
            overflow: hidden;/*溢出的部分隐藏，这是因为后面图片标题内容只需要一部分，所以多余的隐藏*/
            display: -webkit-box;
            -webkit-box-pack: center;/*居中显示*/
        }
        header img{
            position: relative;/*图片相对定位，上移30px，将图片上面的内容就隐藏了*/
            top: -30px;
        }
        .content{
            width: 100%;
            margin-top: 10px;
        }
        .content form {
            width: 90%;
            margin: 0 auto;
            display: -webkit-box;
            -webkit-box-orient: vertical;/*表单里面的内容垂直排列，比如说input的内容等，以前都是通过标签br，没想到通过display和方向设置就可以实现*/
        }

        .content form input{
            display: block;/*input是内联元素，这里改成块级元素，才能使用上面的orient属性*/
            padding: 10px;
            border: 0;
            box-shadow: 0 0 1px #7c7c7c;
        }
        .content form input:nth-child(1){
            border-radius: 3px 3px 0px 0px;/*nth-child的使用，为第一个input元素设置上边距的圆角*/
        }
        .content form input:nth-child(2){
            border-radius: 0px 0px 3px 3px;/*第二个input设置下边距圆角*/
        }
        .content form input:nth-child(3){
            background: cornflowerblue;
            color: white;
            margin-top: 20px;
            border-radius: 3px;
        }
        .content div{
            width: 90%;
            display: -webkit-box;
            -webkit-box-pack: justify;/*将span的内容显示在两侧，同样span要设置为块级元素*/
            margin: 10px auto;
        }
        .content div span{
            display: block;
            color: #7c7c7c;
        }

        /*图片显示在中间*/
        footer ul{
            width: 100%;
            display: -webkit-box;
            -webkit-box-pack: center;
        }
        footer ul li{
            display: -webkit-box;
        }
        footer ul li a{
            display: block;
        }
        footer ul li a img{
            display: block;
            width: 60%;
            margin: 10px  -10px;
        }


    </style>
</head>
<body>
<div class="wrapper">
<header>
    <img src="1a.png">
</header>
    <article class="content">
        <form>
            <input type="text" placeholder="请输入用户名">
            <input type="password" placeholder="请输入密码">
            <input type="submit" value="登录">
        </form>
        <div>
            <span><input type="checkbox">&nbsp;记住密码</span>
            <span>忘记密码</span>
        </div>
    </article>
    <footer>
        <ul>
            <li><a href="#"><img src="2.png" alt=""></a></li>
            <li><a href="#"><img src="3.png" alt=""></a></li>
            <li><a href="#"><img src="4.png" alt=""></a></li>
        </ul>
    </footer>
</div>
</body>
</html>

接下来实现小屏幕设备上的效果，也是在style文件里，但是通过媒体media设置。

        @media screen and (max-width: 420px){
            
            .wrapper{
                width: 100%;
                height: 100%;
                border: 1px solid blue;
                position: absolute;
                top: 0;
                left: 0;
                margin: 0;/*重新定位，实现居中显示*/
                background: #92efe6;
            }
            header{
                width: 90%;
                height: 91px;
                overflow: hidden;
            }
            header img{
                position: relative;/*使用图片的上半部分*/
                top: 30px;
            }
            /*改变按钮的背景颜色*/
            .count form input:nth-child(3){
                background: dodgerblue;
            }
            .count div span{
                color: #af66ff;
            }

        }

全部代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <link rel="stylesheet" href="reset.css">
    <style>
        body,html{
            background: white;/*背景设置为白色*/
        }
        .wrapper{
           border: 1px solid red;
            width: 400px;
            height: 500px;
            position: absolute;/*将登录界面显示在屏幕中间，使用绝对定位，top,left取值为高度宽度的二分之一*/
            top: 250px;
            left: 200px;
        }
        header{
            width: 100%;
            height: 91px;
            overflow: hidden;/*溢出的部分隐藏，这是因为后面图片标题内容只需要一部分，所以多余的隐藏*/
            display: -webkit-box;
            -webkit-box-pack: center;/*居中显示*/
        }
        header img{
            position: relative;/*图片相对定位，上移30px，将图片上面的内容就隐藏了*/
            top: -30px;
        }
        .content{
            width: 100%;
            margin-top: 10px;
        }
        .content form {
            width: 90%;
            margin: 0 auto;
            display: -webkit-box;
            -webkit-box-orient: vertical;/*表单里面的内容垂直排列，比如说input的内容等，以前都是通过标签br，没想到通过display和方向设置就可以实现*/
        }

        .content form input{
            display: block;/*input是内联元素，这里改成块级元素，才能使用上面的orient属性*/
            padding: 10px;
            border: 0;
            box-shadow: 0 0 1px #7c7c7c;
        }
        .content form input:nth-child(1){
            border-radius: 3px 3px 0px 0px;/*nth-child的使用，为第一个input元素设置上边距的圆角*/
        }
        .content form input:nth-child(2){
            border-radius: 0px 0px 3px 3px;/*第二个input设置下边距圆角*/
        }
        .content form input:nth-child(3){
            background: cornflowerblue;
            color: white;
            margin-top: 20px;
            border-radius: 3px;
        }
        .content div{
            width: 90%;
            display: -webkit-box;
            -webkit-box-pack: justify;/*将span的内容显示在两侧，同样span要设置为块级元素*/
            margin: 10px auto;
        }
        .content div span{
            display: block;
            color: #7c7c7c;
        }

        /*图片显示在中间*/
        footer ul{
            width: 100%;
            display: -webkit-box;
            -webkit-box-pack: center;
        }
        footer ul li{
            display: -webkit-box;
        }
        footer ul li a{
            display: block;
        }
        footer ul li a img{
            display: block;
            width: 60%;
            margin: 10px  -10px;
        }
        @media screen and (max-width: 420px){

            .wrapper{
                width: 100%;
                height: 100%;
                border: 1px solid blue;
                position: absolute;
                top: 0;
                left: 0;
                margin: 0;/*重新定位，实现居中显示*/
                background: #92efe6;
            }
            header{
                width: 90%;
                height: 91px;
                overflow: hidden;
            }
            header img{
                position: relative;/*使用图片的上半部分*/
                top: 30px;
            }
            /*改变按钮的背景颜色*/
            .count form input:nth-child(3){
                background: dodgerblue;
            }
            .count div span{
                color: #af66ff;
            }

        }


    </style>
</head>
<body>
<div class="wrapper">
<header>
    <img src="1a.png">
</header>
    <article class="content">
        <form>
            <input type="text" placeholder="请输入用户名">
            <input type="password" placeholder="请输入密码">
            <input type="submit" value="登录">
        </form>
        <div>
            <span><input type="checkbox">&nbsp;记住密码</span>
            <span>忘记密码</span>
        </div>
    </article>
    <footer>
        <ul>
            <li><a href="#"><img src="2.png" alt=""></a></li>
            <li><a href="#"><img src="3.png" alt=""></a></li>
            <li><a href="#"><img src="4.png" alt=""></a></li>
        </ul>
    </footer>
</div>
</body>
</html>
annyangya
关注
  • 8
    点赞
  • 踩
  • 41
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
MVVM响应式
官方推荐
12-19 2万+
MVVM响应式", "MVVM原理","MVVM介绍","什么是MVVM"
前端web：响应式Web开发优缺点总结
kaikeba的博客
07-19 3434
因为越来越多的智能移动设备（mobile,tabletdevice）加入到互联网中来，移动互联网不再是独立的小网络了，而是成为了Internet的重要组成部分。响应式网络设计（RWD/AWD）的出现，目的是为移动设备提供更好的体验，并且整合从桌面到手机的各种屏幕尺寸和分辨率，用技术来使网页适应从小到大（现在到超大）的不同分辨率的屏幕。 响应式Web开发优缺点总结 响应式优点： 1).对用户友好响应式设计可以向用户提供友好的Web界面，因为它可以适应几乎所有设备的屏幕。现在技术发展日新月异，每天都会有新款智能
vue响应式简单实现
weixin_47450807的博客
03-05 1709
一、写在前面 关于MVVM开发模式，不得不说其响应式原理。响应式是MVVM架构和MVP之间最为显著的区别。在以前使用MVP架构进行前端开发时，其中间层p需要处理的逻辑特别多，导致比较臃肿。随着MVVM架构的出现，大大减少了中间层处理的业务逻辑。原因是其响应式原理，视图可以触发其中的某一个指令来改变数据，当数据改变时，视图也会随之刷新。下面我们将简单实现一个响应式。 二、vue2和vue3的响应式的区别 在vue2中我们对响应式数据进行监听时，使用的是Object.defineProperty方法来实现的，在
【前端开发实战】打造响应式登录与注册页面
weixin_65062675的博客
06-19 444
构建两个简单的Web页面：登录页面和注册页面。这两个页面将包括基本的表单元素，并使用内联CSS进行样式设计
实现响应式布局的多种方法
(黎子)人生编码
06-13 1425
响应式网页设计（Responsive Web Design, RWD）已成为现代网站开发的标准做法。它确保网页在不同设备和屏幕尺寸上都能提供优秀的用户体验。实现响应式布局有多种方法，每种方法都有其特点和用途。本文将探讨几种主要的实现响应式布局的方法。
响应式开发
Sweat_candy的博客
04-05 2656
一：网页布局方式 1、固定宽度布局：为网页设置一个固定的宽度，通常以px做为长度单位，常见于PC端网页。 2、流式布局：为网页设置一个相对的宽度，通常以百分比做为长度单位。 3、栅格化布局：将网页宽度人为的划分成均等的长度，然后排版布局时则以这些均等的长度做为度量单位，通常利用百分比做为长度单位来划分成均等的长度。 4、响应式布局：通过检测设备信息，决定网页布局方式，即用户如果采用不同的设备访问同一个网页，有可能会看到不一样的内容，一般情况下是检测设备屏幕的宽度来实现。 注：以上几种布局方式并不是独立存在的
实现响应式布局有几种方法
青春木鱼的博客
11-29 4504
响应式布局有的方法有：1、媒体查询；2、百分比【%】；3、vw或vh，vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度；4、rem单位是相对于字体大小的html元素；5、flex弹性布局。
HTML+CSS十分钟实现响应式布局页面，响应式布局实战教程
热门推荐
AlbertYang的博客
01-17 4万+
承蒙各位小伙伴的支持，鄙人有幸入围了《CSDN 2020博客之星》的前200名，现在进入投票环节，如果我平时写的文章和分享对你有用的话，请每天点击一下这个链接，投上你们宝贵的一票吧！谢谢！❤️ 每一票都是我坚持的动力和力量！https://bss.csdn.net/m/topic/blog_star2020/detail?username=qq_23853743 作者：AlbertYang，软件设计师，Java工程师，前端工程师，爱阅读，爱思考，爱编程，爱自由，信奉终生学习，每天学习一点点，就是领...
响应式网站的开发
web分享客的博客
09-23 8353
什么是响应式网站？ 响应式网站设计是一种网络页面设计布局，其理念是：集中创建页面的图片排版大小，可以智能地根据用户行为以及使用的设备环境进行相对应的布局。 页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS media query的使用等。无论用户正在使用笔记本还是iPad，我们的页面...
用媒体查询实现web响应式开发小记
远走的兔子博客
07-02 2542
一、是什么响应式开发        不同设备电脑、平板、手机的屏幕大小是不一样的，如何在不同大小屏幕的设备上正常的显示网页？有两中方案：        服务器端实现响应式：服务器根据不同设备发来的请求，返回不一样的网页。这样的缺点很明显，就是针对不同设备都需要开发多个版本的网页，开发成本和时间高，而且不利于后期的维护。        客户端实现响应式：一个web界面可以在不同的设备上正常显示，网页...
用户登录界面表单响应式网页模板
01-23
响应式网页设计是一种现代网页开发技术，它使得网页可以适应不同设备的屏幕尺寸，包括桌面电脑、平板电脑和智能手机。"用户登录界面表单响应式网页模板"是专门为登录页面设计的一种灵活布局模板，旨在提供一致且友好...
教堂登录界面响应式网页模板
01-22
"教堂登录界面响应式网页模板"是专门为教堂相关网站设计的一种网页模板，旨在提供一个既美观又功能齐全的登录界面，无论用户在何种设备上访问都能获得良好的体验。 该模板的核心特点在于其响应性，它通过CSS3的媒体...
晚霞用户登录界面响应式网页模板
01-22
【晚霞用户登录界面响应式网页模板】是一个专为网站设计者和开发者提供的资源，它旨在创建出适应不同设备屏幕尺寸的登录界面。响应式设计是现代网页开发的关键要素，因为它确保了无论用户使用何种设备（如桌面电脑、...
html5简洁响应式理财系统登录界面模板
07-13
响应式设计是现代网页开发的关键特性，它使得网页可以在桌面、平板电脑和手机等不同设备上提供良好的用户体验。 【描述】：“注：无后台”意味着这个模板只包含了前端部分，即用户可以看到和交互的部分，而不包括...
html响应式登录界面的布局
11-04
响应式设计是现代网页开发中的重要概念，它允许网页在不同设备上，如桌面电脑、平板电脑和手机，都能提供良好的用户体验。在这个“HTML响应式登录界面的布局”主题中，我们将深入探讨如何构建一个适应各种屏幕尺寸的...
ASP.NET Web Api 使用 EF 6，DateTime 字段如何取数据库服务器当前时间
最新发布
yangshuquan的专栏
07-24 828
在做数据库设计时，为了方便进行数据追踪，通常会有几个字段是每个表都有的，比如创建时间、创建人、更新时间、更新人等，这些时间字段一般存储的是数据库服务器的时间，EF 是操作整个数据表对象，所以需要寻找方法来实现这个目的。本文分享 DB First 和 Code First 两种模式的 EF 中 DateTime 字段如何存储数据库服务器当前时间的方法。
Hutool SoapClient 调用使用@webservice 发布的webService接口，参数传递为空
FangX_u的博客
07-24 609
采用工具类Hutool SoapClient调用@webservice 发布的webService接口时，参数传递不到webService,可以借助SoapUI工具辅助查看。
Windows10+vs 2017中创建WEB API教程
Explinks的博客
07-24 1035
本文将介绍如何在Windows10+vs 2017中创建web Api的教程。目前本教程当中的方法在Win10 + VS2017（MVC5）win server2016+vs2017，vs2013 vs2019当中测试通过。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值