内容简介:欢迎关注我的专栏( つ•̀ω•́)つ让网页自动适应电脑、手机等不同屏幕宽度,一套代码多重效果。上一篇文章:
欢迎关注我的专栏( つ•̀ω•́)つ 【人工智能通识】
让网页自动适应电脑、手机等不同屏幕宽度,一套代码多重效果。
上一篇文章: 软件技术-零基础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
以上所述就是小编给大家介绍的《软件技术-零基础编写响应式登录页面》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- 热议GIS软件技术四大升维,2018 GIS 软件技术大会在京举办
- Anatova勒索软件技术分析
- 软件技术职业选择之道.pdf
- 软件技术-零基础-Golang用户登录页面
- ABCDE时代,GIS软件技术再升维
- GIS软件技术实现升维 带来全新应用价值
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
大数据时代的算法:机器学习、人工智能及其典型实例
刘凡平 / 电子工业出版社 / 2017-1 / 49
《大数据时代的算法:机器学习、人工智能及其典型实例》介绍在互联网行业中经常涉及的算法,包括排序算法、查找算法、资源分配算法、路径分析算法、相似度分析算法,以及与机器学习相关的算法,包括数据分类算法、聚类算法、预测与估算算法、决策算法、关联规则分析算法及推荐算法。《大数据时代的算法:机器学习、人工智能及其典型实例》涉及的相关算法均为解决实际问题中的主流算法,对于工作和学习都有实际参考意义。 《......一起来看看 《大数据时代的算法:机器学习、人工智能及其典型实例》 这本书的介绍吧!