HTML+CSS编写登录框

最新推荐文章于 2023-10-02 23:54:20 发布

Atkxor

最新推荐文章于 2023-10-02 23:54:20 发布

阅读量2.5k

点赞数 1

分类专栏： HTML 文章标签： html5 css

本文链接：https://blog.csdn.net/qq_46150940/article/details/104032618

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML常用元素

1. 超链接

应用场景：主要实现网站（web应用）内部跳转、网站之间的跳转
语法：

<a href="链接地址"  target="_blank|_self|_parent|_top">内容</a>

target属性的属性值

值	描述
_blank	在新窗口中打开被链接文档。
_self	默认。在相同的框架中打开被链接文档。
_parent	在父框架集中打开被链接文档。
_top	在整个窗口中打开被链接文档。

（1）创建超链接，连接到百度

<a href="www.baidu.com" target="_self" title = "百度一下你就知道">
     <h1 style="text-align:center">百度</h1>
</a>

（2）创建一个图像链接

 <a href="http://www.baidu.com">
        <img border="2px" width="900px" height="600px" src="test.jpg" />
 </a>

（3）创建一个网页内部的超链接 (锚点链接)

首先指定跳转到哪个目标位置:

<a href="#目标名称">链接文字</a>

然后在目标位置设置相对应的跳转名称:

<a name="目标名称"> </a>

（4）创建一个电子邮件链接

<a herf=“mailto: test@163.com">联系我们</a>

2. 表格

作用：帮助设计界面布局
语法：

	<table >       <!-- <table>为表格标记，表格的整体外观由<table>标记的属性决定 -->
	    <tr>      <!-- <tr> 为表行标记，表示表格中新的一行的开始; --> 
		<th>...</th>  <!-- <th> 为表头标记，<th>标记的文字按照粗体字显示 --> 
		...
		</tr>
		<tr>
		<td>...</td>> <!-- <td> 为表项（定义表格的具体数据），数据的内容放在<td></td>标记之间。 --> 
		...
		</tr>
	</table>

（1）单元格合并：colspan和rowspan

<td colspan="2">20</td>
<!-- colspan="2"向右合并两个单元格 --> 
<td rowspan="3">20</td>
<!-- rowspan="2"向下合并两个单元格 -->

（2）表格边框：cellspacing和cellspacing

cellspacing="0"  //字与单元格边框的距离为0

在这里插入图片描述

cellpadding="0" //指的是单元格之间的距离为0

在这里插入图片描述

表格属性

属性	值	描述
width	pixels、%	规定表格的宽度
align	left、center、right	水平对齐方式
valign	top、bottom、middle	垂直对齐方式。
border	pixels	设置表格边框的粗细，其取值为正数，单位是象素，省略则不带边框。
bgcolor	rgb(x,x,x)、#XXXXXX、colorname	背景颜色
bordercolor	rgb(x,x,x)、#XXXXXX、colorname	边框颜色
cellpadding	pixels、%	单元格间距，指的是单元格之间的距离，单位是象素
cellspacing	pixels、%	单元格的边距，指的是字与单元格边框的距离，单位是象素
frame	属性值	规定外侧边框的那个部分是可见的
rules	属性值	规定内侧边框的哪个部分是可见的
rowspan	数字	行合并
colspan	数字	列合并

3. 表单

应用场景：用于在Web应用中采集用户数据
语法：

<form action="资源名称" method="get|post">  
	表单yuan's
</form>
<!-- action： 表单提交的地址 -->
<!-- method： 提交保单的方法 -->
<!-- get—发送数据的大小有限制（256byte)，表单中的数据显示在url后面，如:user.html?userid=zhangsan。 post—发送教据的大小没有限制，而且不会现在在url后面 -->

一些input元素：

1.文本框

<input  type="text"(文本框)  name="username"(文本框名称)  placeholder="请输入用户名"(提示) size="value"(文本框长度) maxlength="value"(文本框可输入最大字符数) >

value表示默认值

2.密码框

<input  type="password"(密码框)  name="password"(密码框的名称) placeholder="请输入密码"(提示) size="value"(密码框的长度) >

3.单选按钮

<input name="sex" type="radio"(单选按钮框) value="男"(值) check="checked">男
<input name="sex" type="radio" value="女" >女

checked表示此项默认被选中

4.复选框

<input type="checkbox"(复选框) name="class" value="Chinese"(值)/>语文
<input type="checkbox" name="class" value="math" >数学
<input type="checkbox" name="class" value="English">英语

5.按钮

<input type="button"(普通按钮) name="Button" value="button"(按钮上面的文字)>
<input type="submit"(提交按钮) name="Submit" value="submit">
<input type="reset" (重置按钮) name="Reset"  value="reset">
<input type="image" (图片按钮) name="Image"   src="image_url">

6.菜单/列表

<select name="select_name" size="number" multiple="multiple"(与许多选)>
  <option="select_name" selected="selected"(默认值)>选项名称</option>
  <option="select_name" >选项名称</option>
...
</select>

7.多行文本域

<textarea name="textname" rows="文本域行数" cols="文本域列数">

8.按钮

<button type="button">Click Me!</button>

用html制作登陆框并用css美化

登录框的编写

1.表单提交：

<form action="/form.html" method="GET">

action 是表单提交的地址
method 是提交保单的方法

<input type="submit" value="确认登陆">

提交表单

<input type="reset"  value="清空">

对表单里面已经输入的内容做重置

2.账号和密码的输入：

<div class="flex1">账号：<input type="text"></div>
<div class="flex1">密码：<input type="password"></div>

3.单选框：
设置一个单选框，代码如下：

<div class="city">
          <label for="city">位置</label>
          <select name="city" id="city">
                <option value="zhenzhou" selected >郑州</option>
                <option value="luoyang">洛阳</option>
                <option value="aayang">安阳</option>
                <option value="sanmengxia">三门峡</option>
                <option value="pindingshan">平顶山</option>
                <option value="xinyang">信阳</option>
          </select>

登陆界面：
在这里插入图片描述
完整代码如下：

<!DOCTYPE html>
<html>
<head>
      <title>登录</title>
</head>
<body>
<form action="/form.html" method="GET">
     <!-- action： 表单提交的地址 -->
    <!-- method：提交保单的方法 -->
    <div class="login">
       <div class="flex1 login-top">登录窗口</div>
       <div class="flex1">账号：<input type="text"></div>
       <div class="flex1">密码：<input type="password"></div>
       <div class="city">
          <label for="city">位置</label>
          <select name="city" id="city">
                <option value="zhenzhou" selected >郑州</option>
                <option value="luoyang">洛阳</option>
                <option value="aayang">安阳</option>
                <option value="sanmengxia">三门峡</option>
                <option value="pindingshan">平顶山</option>
                <option value="xinyang">信阳</option>
          </select>
       <!-- selected 表示被选中在页面展示的选项 -->
       <input type="submit" value="确认登陆"> 
       <!-- 可以提交表单 -->
       <input type="reset"  value="清空">
       <!-- 对表单里面已经输入的内容做重置 -->
   </div>
</body>
</html>

使用CSS美化

在head内插入以下代码：

<style>
         .login{
            width: 300px;
            height: 100px;
            background: #eee;
            border-radius: 10px;
            margin: 100px auto;
            display: flex;
            flex-direction: column;
        }
        body{
            background:#369;    
        }
      </style>