经过多年发展,全球RPA市场已经初具规模。据Transparency Market Research研究预测,预计到2024年,全球RPA市场规模将达到50亿美元,实现61.3%的年复合增长率。RPA在亚洲市场起步晚于欧美市场,但从2018年开始,RPA亚太市场以超过100%的速度迅速扩张。2019年起,中国市场全面引入RPA概念,近两年RPA俨然已成为一个“科技风口”。2021年,共计15家RPA厂商融资19起,融资总额破34亿,估值近230亿。历经四年,如今中国RPA市场发展如何?到底有多少场景可以落地?风口还将持续多久?RPA进入智能自动化阶段RPA英文全称为Robotic Proces...... Last article READ

【HTML5】登录页面制作简易版_拳击哥带你捶键盘的博客

【HTML5】登录页面制作简易版_拳击哥带你捶键盘的博客

 

刚开始学习Java。文件的命名,讲道理应该以英文为主,但是英语又不好,所以只好用拼音,最痛苦的应该算是那些英语又不好,又想秀一下的程序员,一半英语一半拼音,如mainFangFa~~~你说看了糟心不糟心。


目录

1、form表单定义和用法

1.1input标签定义和用法

1.2label标签for属性

1.3实例

2、HTML5class属性

3、设计登录页面

3.1html源码

3.2css源码

3.3登录页面图


前言:

大家好,我是拳击哥。今天给大家带来的是采用外部样式表制作一个简单的登录页面制作,主要讲解form表单的用法以及class属性用法。


1、form表单定义和用法

<form> 标签用于为用户输入创建HTML表单。表单能够包含<input>标签,表单还可以包含menus、textarea、fieldset、legend和label元素,本期主要讲解label的用法。

1.1input标签定义和用法

<input> 标签规定用户可输入数据的输入字段。根据不同的 type 属性,输入字段有多种形态。输入字段可以是text(文本)、password(密码)、radio(单选按钮)、checkbox(多选框)、button(按钮)等等。

<input>标签中type里面设置的就是属性,你想要输入的是文本就设置text属性,想要输入的是密码就设置password属性。

【HTML5】登录页面制作简易版_拳击哥带你捶键盘的博客

1.2label标签for属性

for属性可把label绑定到另外一个元素。for 属性的值设置为相关元素的 id 属性的值,就能与相关属性同步,所以for 属性规定label绑定到哪个表单元素。

1.3实例

制作一个账号密码的显示,我们用到text(文本)和password(密码)属性

<form>   <div>  <label for="username">账号</label>  <input type="text" name="username"/>   </div>   <div>  <label for="pass">密码</label>  <input type="password" name="pass"/>   </div>   </form>

页面显示效果

【HTML5】登录页面制作简易版_拳击哥带你捶键盘的博客

我们可以认为是拥有两个for分别带有两个input中相同标签的text、password的表单。

第一个div中账号for的""内容与第一个input中name相同,因此for属性规定了label绑定了text表单元素。

第二个div中密码for""内容与第二个input中name相同,因此for属性规定了label绑定了password表单元素。

2、HTML5class属性

在HTML5中,class属性可以定义元素的类名,常用于指向样式表的类(class选择器)。我们在css中通过.号来引用类名。前提得用<link>标签定义文档与外部资源的关系。比如<link href="css/test.css" rel="stylesheet"/>

实例:我要通过css设置html里面一个段落

<p class="test"> 人活一生,值得爱的东西很多,不要因为一个不满意就灰心。<br /> 出门在外不论别人给你热脸还是冷脸都别往心里去,外面的世界 尊重的是人的背景而非人本身。 </p>
.test {  font-size: 15px;  color: orange;  background: chocolate; }

 页面显示效果

【HTML5】登录页面制作简易版_拳击哥带你捶键盘的博客

3、设计登录页面

3.1html源码

<!DOCTYPE html> <html>  <head>   <meta charset="utf-8">   <title>登录页面</title>   <link type="text/css" href="../css/task_twenty.css" rel="stylesheet">  </head>  <body>   <form action="#" method="post">    <div class="form-control">     <label for="username">账号</label>     <input type="text" id="username" name="username" class="number" pattern="^[a-zA-Z][a-zA-Z0-9][]$" required />    </div>    <div class="form-control">     <label for="password">密码</label>     <input type="password" id="password" name="pas" class="pas" pattern="^[a-zA-Z]w{5,17}$" required/>    <button class="loginbtn" >登录</button>   </form>  </body> </html>

3.2css源码

* {  padding: 0;  margin: 0;  border: 0; }  body {  font-size: 18px;  font-family: "黑体";  background: url(../img/timg.jpg) no-repeat top center;  color: #FFF; }  form {  width: 420px;  height: 200px;  padding-top: 60px;  margin: 250px auto;  background: rgb(255,255,255,0.1);  border-radius: 20px;  border: 1px solid rgba(255,255,255,0.3); } .form-control {  margin-top: 15px;  text-align: center; }  .number,.pas {  width: 165px;  height: 18px;  border: 1px solid rgba(255,255,255,0.3);  padding: 2px 2px 2px 22px;  border-radius: 5px;  color: #FFF; } .number {  background:url(../img/33.png) no-repeat 5px center rgb(255,255,255,0.1) ; } .pas {  background: url(../img/44.png) no-repeat 5px center rgba(255,255,255,0.3); } .loginbtn {  width: 193px;  height: 28px;  border-radius: 6px;  border: 10px solid #000;  margin-left: 45px;  background: #2d77bd;  color: #FFF;  border: none;  margin-top:10px; } 

3.3登录页面图

【HTML5】登录页面制作简易版_拳击哥带你捶键盘的博客


想要背景图片和账号密码图片可以私信我

【HTML5】登录页面制作简易版_拳击哥带你捶键盘的博客

 Never Give Up


开头段子,网上找到,如有冒犯还请谅解

效果图如下,文章末尾附全部代码:    参考: 1、航线图 Vue Echarts飞机航线图_Kinghiee的博客-CSDN博客  2、地图阴影  echarts中国地图实现阴影效果&自定义设置_K.P的博客-CSDN博客 版本: "echarts": "^5.1.2" 步骤: 一、echarts5.0以后的版本,地图安装 由于echarts5.0以后的版本里,没有地图了,所以要么自行下载china.js,在项目里引入ÿ......Next article READ