软件技术-零基础编写响应式登录页面

栏目: CSS · CSS3 · 发布时间: 4年前

内容简介:欢迎关注我的专栏( つ•̀ω•́)つ让网页自动适应电脑、手机等不同屏幕宽度,一套代码多重效果。上一篇文章:

欢迎关注我的专栏( つ•̀ω•́)つ 【人工智能通识】

让网页自动适应电脑、手机等不同屏幕宽度,一套代码多重效果。

软件技术-零基础编写响应式登录页面

上一篇文章: 软件技术-零基础Golang编写文件服务器

页面基础

我们改进 login.html 文件,使用 Go Live 按钮启动实时预览。

可能需要从 Preference-Settings 修改 "liveServer.settings.root":"/web/" ,使适合你的 $GOPATH 下的 web 文件夹路径。

修改代码为:

<!doctype html>
<html lang="zh-cmn-Hans">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>我的站点</title>
  </head>
  <body>
    <h1>注册页面</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

注意底部的三个 <script> 标签,script是脚本的意思,什么是脚本?其实就是一段代码,可以用来改变页面或者执行什么动作的。

这里使用了三个别人编写好的脚本代码文件,分别是 jquery、popper、bootstrap

  • jquery是用来操纵页面上的元素的,比如自动删掉或者增加标签元素;还可以用来自动向服务器发送数据请求(还记得服务器主要提供页面或者数据吗?)。
  • popper是用来创建浮出提示文字的,我们到以后才会用到,先不用管。
  • bootstrap就厉害了,它给我们提供了很多现成的漂亮页面元素,——我们自己编写的标签太简陋了,不是吗?

另外注意顶部的 <!doctype html> ,感叹号开始的标签式注释,就是说没啥用的只用来做说明备忘的字符,但这里是有点用的,就是说我们这个页面是符合最新 html 规范(html5)的代码。

其他的内容不必太在意,其实这个代码是来自Bootstrap官方的模板,稍微改进了一点点, 有兴趣可以点击这里参考原版说明

输入框

我们来创建用户名和密码的输入框:

<!doctype html>
<html lang="zh-cmn-Hans">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>我的站点</title>
</head>

<body>
    <div class="container-fluid">
        <div class="row justify-content-center" style="margin-top:100px;margin-bottom:20px">
            <h4>注册页面</h4>
        </div>
        <div class="row justify-content-center">
            <div class="col-xs-10 col-sm-8 col-md-6 col-lg-4 col-xl-3">
                <div class="form-group">
                    <label for="exampleInputEmail1">邮箱:</label>
                    <input id='email' type="email" class="form-control"  aria-describedby="emailHelp" placeholder="请输入正确格式的邮箱">
                </div>
                <div class="form-group">
                    <label for="exampleInputPassword1">密码:</label>
                    <input id='pw' type="password" class="form-control" 
 placeholder="请输入6~18位密码">
                </div>
                <div class="form-check">
                    <input type="checkbox" class="form-check-input" id="exampleCheck1">
                    <label class="form-check-label" for="exampleCheck1">
                        <span>同意用户协议:</span>
                        <a href='agreement.html'>点击阅读</a>
                    </label>
                </div>
                <br>
                <button onClick="sendRegPost()" class="btn btn-primary btn-block">提交</button>
            </div>
        </div>
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>

<script type="text/javascript">
    function sendRegPost() {
        var data = {
            email: $('#email').val(),
            pw: $('#pw').val(),
        }
        console.log(data);
        $.post('/api/register', data, function (res) {
            console.log(res);
        })
    }
</script>

</html>

这段代码比较多,但只要看改变的 <body><div>.... 这个大标签的内容:

  • class="row justify-content-center" 这个表示元素是一横行 row ,并且内容居中对齐 justify-content-center
  • class="col-xs-10 col-sm-8 col-md-6 col-lg-4 col-xl-3" 这个表示元素是竖着的一列,但宽度会随着浏览器的宽度而变化(浏览器窗口是可以横向拉宽或者拉窄的),怎么变化呢?很窄 xs 的时候(比如手机上)元素宽度占浏览器宽度的10/12,比较窄 sm 的时候占8/12,中等 md 的时候占6/12,大一些时候占4/12,超大 xl 时候占3/12。——这个12就是表示浏览器宽度,你可以拉动浏览器窗口观察效果。
  • inpput 和旋钮 checkbox 以及一个提交按钮 button
  • id='email' ,给输入框命名,下面我们要用到这个输入框的内容。
  • onClick="sendRegPost()" ,当这个元素被点击的时候执行 sendRegPost 代码,这个代码稍后我们补充。
  • <a href='agreement.html'>点击阅读</a> ,需要在page文件夹下添加一个 areement.html 文件,因为和 login.html 在同一文件夹下所以不需要再加 /page

更多的代码含义, 有兴趣可以参考Bootstrap官方说明的components元素部分

浏览器显示效果如下图(sm中等窗口和xs手机效果):

软件技术-零基础编写响应式登录页面

关于人工智能通识理论的知识暂停了几条,不过很快就会更新,希望大家对这些编程知识也有兴趣~

欢迎关注我的专栏( つ•̀ω•́)つ 【人工智能通识】

每个人的智能新时代

如果您发现文章错误,请不吝留言指正;

如果您觉得有用,请点喜欢;

如果您觉得很有用,欢迎转载~

END


以上所述就是小编给大家介绍的《软件技术-零基础编写响应式登录页面》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

大数据时代的算法:机器学习、人工智能及其典型实例

大数据时代的算法:机器学习、人工智能及其典型实例

刘凡平 / 电子工业出版社 / 2017-1 / 49

《大数据时代的算法:机器学习、人工智能及其典型实例》介绍在互联网行业中经常涉及的算法,包括排序算法、查找算法、资源分配算法、路径分析算法、相似度分析算法,以及与机器学习相关的算法,包括数据分类算法、聚类算法、预测与估算算法、决策算法、关联规则分析算法及推荐算法。《大数据时代的算法:机器学习、人工智能及其典型实例》涉及的相关算法均为解决实际问题中的主流算法,对于工作和学习都有实际参考意义。 《......一起来看看 《大数据时代的算法:机器学习、人工智能及其典型实例》 这本书的介绍吧!

在线进制转换器
在线进制转换器

各进制数互转换器

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

MD5 加密
MD5 加密

MD5 加密工具