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

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

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

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

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

上一篇文章：软件技术-零基础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 。

浏览器显示效果如下图（sm中等窗口和xs手机效果）：

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

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

每个人的智能新时代

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

如果您觉得有用，请点喜欢；

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

END

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

查看所有标签

猜你喜欢:

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

码农书籍

Head First Rails

David Griffiths / O'Reilly Media / 2008-12-30 / USD 49.99

Figure its about time that you hop on the Ruby on Rails bandwagon? You've heard that it'll increase your productivity exponentially, and allow you to created full fledged web applications with minimal......一起来看看《Head First Rails》这本书的介绍吧!

码农工具

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

页面基础

输入框

每个人的智能新时代

Head First Rails

在线进制转换器

Markdown 在线编辑器

正则表达式在线测试