#3使用html+css+js制作网页 制作登录网页 #3使用html+css+js制作网页 制作登录网页 本系列链接2制作登录网页2.1 准备2.1.1 创建文件夹2.1.2 创建主文件 2.2 html部分2.2.1 网站信息2.2.2 主要框架2.2.3 给每个素添加ID 2.3 css部分2.3.1 创建主css文件2.3.2 引入css文件2.3.3 美化页面Step1 垂直居中Step2 与页面上方距离Step3 添加圆角边框Step4 添加标题 2.3.4 美化组件BUTTONINPUT 2.4回顾2.5 JavaScript部分2.5.1 创建主js文件2.5.2 提交表单（通过POST方法）2.5.2.1 纯js方式2.5.2.2 JQ方法2.5.2.3 表单 2.6 总结 引言： 在一个由html+css+js制作的网页中，html就是框架，js就是脚本，css就是样式 前面知道了那么多概念，现在可以开始实战了 本系列链接 #1使用html+css+js制作网站教程 准备 #2使用html+css+js制作网站教程 测试 #3使用html+css+js制作网页 制作登录网页 #3使用html+css+js制作网页 番外篇 制作接收php #3使用html+css+js制作网页 番外篇 使用python flask 框架(I) #3使用html+css+js制作网页 番外篇 使用python flask 框架 (II) 2制作登录网页 2.1 准备 做一个项目，首先先要建立一个文件夹结构。如本系列第1部所述，使用一个好的文件结构是编写代码的好习惯。 2.1.1 创建文件夹 如本系列第一部所述，创建文件夹结构。 2.1.2 创建主文件 index是默认的首页文件(index.php,index.asp等都是，详情参考该网站) index.html 2.2 html部分 2.2.1 网站信息 向index.html中的里面加入以下代码 2.2.2 主要框架 我们是要做一个登录页面，所以必须要有两个输入框和一个提交按钮。 向index.html中的里面添加以下代码: 我们就同过上面的代码创建了2个输入框，一个提交按钮。其中: 标签定义 HTML 文档中的一个分隔区块或者一个区域部分。 是输入框，里面的是指定它的类型是输入字符串，是指定它的默认信息是按钮，用指定它被后就执行函数(该函数在js文件里面) 添加后，我们可以看见和图片一样的效果: 
2.2.3 给每个素添加ID ID相当于是每个素的唯一识别码，给每个素添加id以便于css和js文件选择该素。 其中，id的值可以随意更改，只要接下来的部分用自定义的id名称，替换我的id名称编写。 2.3 css部分 2.3.1 创建主css文件 在文件夹中创建文件。 2.3.2 引入css文件 在中插入以下代码: 参考网站 2.3.3 美化页面 Step1 垂直居中 为了让我们的登录页面更美观，把中原来更改为: 其中，可以看到笔者添加了几个，该素为html中的换行符。 在中添加: 其中，是css中的id选择器，是该div中子素居中显示，解释过于长，请参考点我跳转，是该素高度,和是一种单位，该值将屏幕可见长度和可见宽度分为100份，而就等于25%的屏幕长度,就等于30%的屏幕宽度，该单位在部署页面自适应的时候很常见。 Step2 与页面上方距离 在中更改id为input_f的选择器为: 其中，是该素距离父素顶部的距离，也就是设置顶部距离顶部的距离。 Step3 添加圆角边框 我们还可以为div添加边框,将中input_f的选择器改为: 其中,border为边框设置，请参考点我跳转。 Step4 添加标题 在中id为um的input素的上面添加: 其中，是设置文字大小。 至此，我们可以拥有一个和图片一样的登录页面: 
2.3.4 美化组件 BUTTON 默认的button按钮样式很不美观，笔者在此，引用mcya的博客的css样式，在中添加: 其中，如有属性名不熟悉，可参考点我跳转菜鸟教程，为鼠标悬浮在button的素上时，button素的样式，为素选择器，选择全部button素。 INPUT 把main.css中除了button（刚刚上面给的代码）都替换成: 2.4回顾 至此，我们页面的渲染部分结束，我们使用了html+css的方式渲染页面，我们可以获得和下图一样的效果: 
2.5 JavaScript部分 2.5.1 创建主js文件 在文件夹下创建 然后在中里面添加: 2.5.2 提交表单（通过POST方法） 给在的button添加onclick属性，绑定函数: 有关POST问题看这里。 2.5.2.1 纯js方式 此处部分代码引用于另外一个博客 其中，有关post问题参考原博客，有关取值问题参考这里 2.5.2.2 JQ方法 先于中的里面添加: 来引入jq，然后在中添加 有关ajax post参考这里，其中，本次教程暂无接收php(教程已补点我跳转) 2.5.2.3 表单 或者，我们可以把整个作为一个表单提交，在中修改： 这样也可以达到一样的效果。 2.6 总结 写了这么多，其实都是老生常谈了，这里推荐几个参考网站： 菜鸟教程 w3school CSDN 本文代码包CSDN下载 github END
2024最新激活全家桶教程，稳定运行到2099年，请移步至置顶文章：https://sigusoft.com/99576.html
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。 文章由激活谷谷主-小谷整理,转载请注明出处：https://sigusoft.com/52821.html
