html+css+js系列之二 html中的利用表格布局
2014-11-17 10:53
591 查看
参考: 韩顺平 轻松搞定网页设计
登陆首页效果图
在这里,将整个界面先划成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 如下:
一点提交,就跳到main.html。main.html 内容以后会根据项目需要自行填充。
登陆首页效果图
在这里,将整个界面先划成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 内容以后会根据项目需要自行填充。
相关文章推荐
- html,js,css综合练习-2048游戏(使用表格布局)
- [课程地图-jsp网站]界面布局html,js和css要求
- 关于利用js实现css切换布局视图的方法
- 利用HTML和CSS实现常见的布局
- 利用js+css+html实现固定table的列头不动
- 利用HTML和CSS实现常见的布局
- 利用HTML和CSS实现常见的布局
- 滑动固定表格头和列--js,html,css--移动端--基于Iscroll
- 利用HTML和CSS实现常见的布局
- 利用HTML和CSS实现常见的布局
- [HTML]CSS_利用CSS控制表格的交替颜色
- yii基于布局的子页面引入js和css文件,并放入布局文件中HTML的head中
- html+css+js系列之一 html的框架frameset
- 利用html和css实现常用的布局
- 利用js将html表格导出为excel文件
- 利用js、css、html固定table的列头不动
- html+css+js系列之四 css的盒子模型
- zend studio(PHP)系列 --- 配置js、css、html提示插件
- 利用HTML和CSS实现常见的布局
- 利用HTML和CSS实现常见的布局