html+css+js系列之二 html中的利用表格布局

最新推荐文章于 2020-12-16 18:28:43 发布

12小白

最新推荐文章于 2020-12-16 18:28:43 发布

阅读量958

点赞数

CC 4.0 BY-SA版权

分类专栏： html+css+js 文章标签： html 网页设计布局 table

本文链接：https://blog.youkuaiyun.com/u012270113/article/details/41205655

html+css+js 专栏收录该内容

5 篇文章

订阅专栏

参考：韩顺平轻松搞定网页设计

登陆首页效果图

在这里，将整个界面先划成3*3表格，

A00 A01 A02

A10 A11A12

A20A21A22

其中只有A11非空。而且，A11是一个3*2的表格，设为B

B00B01

B10B11

B20B21

其中除了B11非空，其他也是空的。而B11才是真正登陆主页面所处的位置，也把它划分为表格，设为4*2的表格C

C00C01 ---> 用户名文本框

C10C11 ---> 密码框文本框

C20C21 ---> 提交查询重置

C30C31 ---> 找回密码注册新用户

具体的login.html 如下：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
 </head>
 <body>
  <table width = "100%" >
	 <tr height = "150px"><td> </td><td> </td><td> </td></tr>
	 <tr><td width = "350px">  </td><td><table  width = "321px" height = "246px"  background = "0.jpg">
												<tr height = "60px"><td> </td><td> </td> </tr>
												<tr><td width = "100px"> </td><td><form action = "main.html" method = "post">
																							<table height = "100%">
																								<tr><td>用户名</td><td><input type = "text" name ="username"></td></tr>
																								 <tr><td>密码框</td><td><input type = "password" name ="pwd"></td></tr>
																								<tr><td colspan = "2"><input type = "submit" name ="进入邮箱"><input type = "reset" name ="重新填写"></td></tr>
																								<tr><td colspan = "2"><a href = "#">找回密码</a><a href = "#">注册新用户</a></td></tr>
																							</table>
																						</form>
																					</td></tr>
												<tr><td> </td><td> </td> </tr>
											</table></td><td> </td></tr>
	<tr><td> </td><td> </td><td> </td></tr>
  </table>
 </body>
</html>

一点提交，就跳到main.html。main.html 内容以后会根据项目需要自行填充。