HTML+CSS编写登录框

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

在这里插入图片描述

表格属性

属性描述
widthpixels、%规定表格的宽度
alignleft、center、right水平对齐方式
valigntop、bottom、middle垂直对齐方式。
borderpixels设置表格边框的粗细,其取值为正数,单位是象素,省略则不带边框。
bgcolorrgb(x,x,x)、#XXXXXX、colorname背景颜色
bordercolorrgb(x,x,x)、#XXXXXX、colorname边框颜色
cellpaddingpixels、%单元格间距,指的是单元格之间的距离,单位是象素
cellspacingpixels、%单元格的边距,指的是字与单元格边框的距离,单位是象素
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>

美化后的登录框效果:
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Atkxor

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值