引言：
在一个由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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

</body>

</html>

2.2 html部分

2.2.1 网站信息

向index.html中的<head></head>里面加入以下代码

	<!--声明信息-->

    <meta name="author" content="这里输入作者名" />

    <meta name="generator" content="这里输入IDE名字" />

    <!--声明结束-->

    <!--网站声明-->

    <meta name="keywords" content="这里输入搜索关键字" />

    <!--声明结束-->

2.2.2 主要框架

我们是要做一个登录页面，所以必须要有两个输入框和一个提交按钮。
向index.html中的<body></body>里面添加以下代码:

<div>

	<input type="text" placeholder="username"/>

	<input type="text" placeholder="passwords"/>

	<button>提交</button>

</div>

我们就同过上面的代码创建了2个输入框，一个提交按钮。其中:

  • <div> 标签定义 HTML 文档中的一个分隔区块或者一个区域部分。
  • <input> 是输入框，里面的type="text"是指定它的类型是输入字符串，placeholder是指定它的默认信息
  • <button>是按钮，用onclick="submit()"指定它被点击后就执行submit()函数(该函数在js文件里面)

添加后，我们可以看见和图片一样的效果:

2.2.3 给每个元素添加ID

ID相当于是每个元素的唯一识别码，给每个元素添加id以便于css和js文件选择该元素。

<div id="input_f">

    <input id="um" type="text" placeholder="username" />

    <input id="pd" type="text" placeholder="passwords" />

    <button id="bu">提交</button>

</div>

其中，id的值可以随意更改，只要接下来的部分用自定义的id名称，替换我的id名称编写。

2.3 css部分

2.3.1 创建主css文件

在/www/css文件夹中创建main.css文件。

2.3.2 引入css文件

在<body></body>中插入以下代码:

<link rel="stylesheet" type="text/css" href="css/main.css">

参考网站

2.3.3 美化页面

Step1 垂直居中

为了让我们的登录页面更美观，把index.html中原来<body></body>更改为:

<body>

    <div id="input_f">

        <input id="um" type="text" placeholder="username" /><br />

        <input id="pd" type="text" placeholder="passwords" /><br />

        <button id="bu">提交</button>

    </div>

</body>

其中，可以看到笔者添加了几个<br/>，该元素为html中的换行符。
在main.css中添加:

#input_f {

    text-align: center;

    height: 40vh;

    margin: 0 auto;

    width: 30vw;

}

其中，#xxx{}是css中的id选择器，text-align:center;是该div中子元素居中显示，margin解释过于长，请参考点我跳转，height是该元素高度,vh和vw是一种单位，该值将屏幕可见长度和可见宽度分为100份，而25vh就等于25%的屏幕长度,30vw就等于30%的屏幕宽度，该单位在部署页面自适应的时候很常见。

Step2 与页面上方距离

在main.css中更改id为input_f的选择器为:

#input_f {

    text-align: center;

    height: 40vh;

    margin: 0 auto;

    margin-top: 25vh;

    width: 30vw;

}

其中，margin-top是该元素距离父元素顶部的距离，也就是设置<div id="input_f">顶部距离<html>顶部的距离。

Step3 添加圆角边框

我们还可以为div添加边框,将main.css中input_f的选择器改为:

#input_f {

    text-align: center;

    height: 40vh;

    margin: 0 auto;

    margin-top: 25vh;

    width: 30vw;

    border: 2px solid darkslategray;

    border-radius: 30px;

}

其中,border为边框设置，请参考点我跳转。

Step4 添加标题

在index.html中id为um的input元素的上面添加:

<div style="font-size: 3vw;">Login</div>

其中，font-size是设置文字大小。
至此，我们可以拥有一个和图片一样的登录页面:

2.3.4 美化组件

BUTTON

默认的button按钮样式很不美观，笔者在此，引用mcya的博客的css样式，在main.css中添加:

#bu {

    margin-top: 5px;

    width: 15vw;

}

/*以下来自https://blog.csdn.net/genius_yym/article/details/79670326 的博客，如有侵权，请联系删除*/

button {

    display: inline-block;

    outline: none;

    cursor: pointer;

    text-align: center;

    text-decoration: none;

    font: 14px/100% Arial, Helvetica, sans-serif;

    padding: 5px 2px 4px;

    text-shadow: 0 1px 1px rgba(0, 0, 0, .3);

    -webkit-border-radius: 5px;

    -moz-border-radius: 5px;

    border-radius: 5px;

    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);

    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);

    box-shadow: 0 1px 2px rgba(0, 0, 0, .2);

    color: #d9eef7;

    border: solid 1px #0076a3;

    background: #0095cd;

    background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));

    background: -moz-linear-gradient(top, #00adee, #00678e);

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#00678e');

}

button:hover {

    background: #007ead;

    background: -webkit-gradient(linear, left top, left bottom, from(#00678e), to(#0095cc));

    background: -moz-linear-gradient(top, #00678e, #0095cc);

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00678e', endColorstr='#0095cc');

}

/*结束*/

其中，如有属性名不熟悉，可参考点我跳转菜鸟教程，button:hover为鼠标悬浮在button的元素上时，button元素的样式，xxx{}为元素选择器，选择全部button元素。

INPUT

把main.css中除了button（刚刚上面给的代码）都替换成:

#input_f {

    text-align: center;

    height: 40vh;

    margin: 0 auto;

    margin-top: 25vh;

    width: 30vw;

    border: 2px solid darkslategray;

    border-radius: 30px;

    background-color: rgb(170, 169, 169);

}

input {

    outline-style: none;

    border: 1px solid #ccc;

    border-radius: 3px;

    border: 0px;

    width: 20vw;

    height: 3vw;

    margin-top: 5px;

}

#um {

    margin-top: 10px;

}

input:focus {/*发光*/

    border-color: #66afe9;

    outline: 0;

    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);

    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6)

}

2.4回顾

至此，我们页面的渲染部分结束，我们使用了html+css的方式渲染页面，我们可以获得和下图一样的效果:

2.5 JavaScript部分

2.5.1 创建主js文件

在/www/js文件夹下创建main.js
然后在index.html中<head></head>里面添加:

<script type="text/javascript" src="js/main.js"></script>

2.5.2 提交表单（通过POST方法）

给在index.html的button添加onclick属性，绑定点击函数:

<button id="bu" onclick="submit()">提交</button>

有关POST问题看这里。

2.5.2.1 纯js方式

此处部分代码引用于另外一个博客

/*此处代码为引用https://blog.csdn.net/Lianxingjie_1024/article/details/80238139的博客*/

function post(URL, PARAMS)

{

    var temp = document.createElement("form");

    temp.action = URL;

    temp.method = "post";

    temp.style.display = "none";

    for (var x in PARAMS)

    {

        var opt = document.createElement("textarea");

        opt.name = x;

        opt.value = PARAMS[x];

        // alert(opt.name)

        temp.appendChild(opt);

    }

    document.body.appendChild(temp);

    temp.submit();

    return temp;

}

//代码引用结束

function submit(){

var um=document.getElementById("um").value;//根据 Id获得对象中的值

var pd=document.getElementById("pd").value;//根据 Id获得对象中的值

var rt=post('接收文件', {password:pd,username:um});

alert("提交成功，"+rt);

}

其中，有关post问题参考原博客，有关取值问题参考这里

2.5.2.2 JQ方法

先于index.html中的<head></head>里面添加:

<script

  src="https://code.jquery.com/jquery-3.4.1.min.js"

  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="

  crossorigin="anonymous"></script>

来引入jq，然后在main.js中添加

function submit(){

var um=document.getElementById("um").value;

var pd=document.getElementById("pd").value;

$.post("接收文件",{

username:um,

password:pd

},

function(data,status){

alert("数据: \n" + data + "\n状态: " + status);

});

}

有关ajax post参考这里，其中，本次教程暂无接收php(教程已补点我跳转)

2.5.2.3 表单

或者，我们可以把整个作为一个表单提交，在index.html中修改input_f：

<div id="input_f">

	<form action="接收php的地址" type="post">

        <input id="um" type="text" placeholder="username" /><br />

        <input id="pd" type="text" placeholder="passwords" /><br />

        <input id="bu" type="submit">提交</input>

    </form>

</div>

这样也可以达到一样的效果。

2.6 总结

写了这么多，其实都是老生常谈了，这里推荐几个参考网站：
菜鸟教程
w3school
CSDN
本文代码包CSDN下载
github

END

#3使用html+css+js制作网页 制作登录网页的更多相关文章

  1. WordPress引入css/js两种方法

    WordPress引入css/js 是我们制作主题时首先面对的一个难点,任何一款主题都要加载自己的css,js,甚至很有可能还需要加载Jquery文件,网上方法特多,说法不一,我们今天借鉴wordpr ...

  2. #3使用html+css+js制作网页 番外篇 使用python flask 框架 (II)

    #3使用html+css+js制作网页 番外篇 使用python flask 框架 II第二部 0. 本系列教程 1. 登录功能准备 a.python中操控mysql b. 安装数据库 c.安装mys ...

  3. #3使用html+css+js制作网页 番外篇 使用python flask 框架 (I)

    #3使用html+css+js制作网页 番外篇 使用python flask 框架(I 第一部) 0. 本系列教程 1. 准备 a.python b. flask c. flask 环境安装 d. f ...

  4. #3使用html+css+js制作网页 番外篇 制作接收php

    使用html+css+js制作网页 番外篇 制作接收php 本系列链接 基础 php语法 例子 本系列链接 #1使用html+css+js制作网站教程 准备 #2使用html+css+js制作网站教程 ...

  5. #2使用html+css+js制作网站教程 测试

    #2使用html+css+js制作网站教程 测试 本系列链接 1 测试 1.1 运行 1.2 审查 1.3 审查技巧 1.4 其他 引言: 编写完代码后就要上机测试代码,获得用户体验,筛选bug 笔者 ...

  6. #1使用html+css+js制作网站教程 准备

    #1使用html+css+js制作网站教程 准备 本系列链接 0 准备 0.1 IDE编辑软件 0.2 浏览器 0.3 基础概念 0.3.1 html 0.3.2 css 0.3.3 js 0.4 文 ...

  7. 学习网页制作中如何在正确选取和使用 CSS 单位

    在 CSS 测量系统中,有好几种单位,如像素.百分比.英寸.厘米等等,Web 开发人员很难了解哪些单位在何处使用,如何使用.很多人习惯了总是使用同一种单位,但这一决定可能会严重限制你的设计的执行. 这 ...

  8. HTML、CSS、JavaScript网页制作从入门到精通 (刘西杰) pdf扫描版彩色版​

    html.css.JavaScript网页制作从入门到精通中从基础知识开始讲起,如html的基本标记.文字与段落标记.表格标记.超链接标记……同时介绍了目前流行的web标准与css网页布局实例,以及基 ...

  9. CSS & JS 制作滚动幻灯片

    ==================纯CSS方式==================== <!DOCTYPE html> <html> <head> <met ...

随机推荐

  1. SQL Server 批量插入数据方案 SqlBulkCopy 的简单封装，让批量插入更方便

    一.Sql Server插入方案介绍 关于 SqlServer 批量插入的方式,有三种比较常用的插入方式,Insert.BatchInsert.SqlBulkCopy,下面我们对比以下三种方案的速度 ...

  2. pytorch实战（一）hw1——李宏毅老师作业1

    任务描述:利用前9小时数据,预测第10小时的pm2.5的数值,回归任务 kaggle地址:https://www.kaggle.com/c/ml2020spring-hw1 训练集为: 12个月*20 ...

  3. 【Alpha冲刺阶段】Scrum Meeting Daily5

    [Alpha冲刺阶段]Scrum Meeting Daily5 1.会议简述 会议开展时间 2020/5/27 8:30-9:00 PM 会议基本内容摘要 大家讲述了自己的任务完成情况以及遇到的问题 ...

  4. bootstrap table 控制checkbox在某些状态不显示

    首先columns:[{field:'column',checkbox:true}];然后设置$("#tableName").bootstrapTable('hideColumn' ...

  5. OI知识点/得分技巧的归纳总结

    网络流 拆点/拆边技巧 题目来源 bzoj1070 题目描述 同一时刻有\(N\)位车主带着他们的爱车来到了汽车维修中心.维修中心共有\(M\)位技术人员,不同的技术人员对不同 的车进行维修所用的时间 ...

  6. Python条件判断和循环语句

    一.条件判断语句 通过一条或多条语句的判断来决定是否执行代码块 1.if语句基本形式: if 判断条件:    语句块 例如: score=75if score>=60:    print &q ...

  7. docker 连接MySQL&#183;集群

    1 指定端口 docker run -p 3307:3306 --name root -e MYSQL_ROOT_PASSWORD=root -d mysql # 6380 root password ...

  8. IDEA的基本操作——导入导出jar包

    在使用Jmeter工具测试时,有时也需要导出jar包,测试对应功能,或者自己二次开发Jmeter工具,也是需要导出jar包的.既然经常用,所以就总结了下导入导出jar包的方法. 导入jar包 先打开i ...

  9. Linux IO/NFS tunning 性能优化及检测

    Linux IO/NFS tunning:IO Test=======dd 测试读性能的命令# time dd if=/nfsfolder/testfile of=/dev/null bs=1kdd ...

  10. 泡面不好吃，我用了这篇k8s调度器，征服了他

    1.1 调度器简介 来个小刘一起 装逼吧 ,今天我们来学习 K8的调度器 Scheduler是 Kubernetes的调度器,主要的任务是把定义的 pod分配到集群的节点上,需要考虑以下问题: 公平: ...