看一下上一节笔记中的一点问题,用两个类解决,一个类表示公共样式,另一个类表示特有样式,代码量一下子减少很多,看例子:
<!DOCTYPE html> <head> <meta charset=utf-8 /> <title>表格表单</title> <style> ul { width : 480px; height : 300px; margin : 0px auto; padding : 0px; } .li { width : 98px; height : 298px; float : left; list-style-type : none; margin : 0px 10px; } .greenLi { border : 1px solid green; } .greenLi:hover { background-color : green; } .yellowLi { border : 1px solid yellow; } .yellowLi:hover { background-color : yellow; } .grayLi { border : 1px solid gray; } .grayLi:hover { background-color : gray; } .pinkLi { border : 1px solid pink; } .pinkLi:hover { background-color : pink; } </style> </head> <body> <ul> <li class="li greenLi"></li> <li class="li yellowLi"></li> <li class="li grayLi"></li> <li class="li pinkLi"></li> </ul> </body>check the result
好了,接下来看一下table的一些用法:table还是有很多细节的,先来看个简单例子
<!DOCTYPE html> <head> <meta charset=utf-8 /> <title>表格表单</title> </head> <body> <table border="1px" cellspacing="0px" cellpadding="10px" align="center"> <tr align="right"> <th width="100px" height="50px">姓名</th> <th width="100px">年龄</th> <th width="100px">性别</th> </tr> <tr align="center"> <td height="50px">欣欣</td> <td>25</td><td>男</td> </tr> <tr> <td height="50px">玩命牛</td> <td>25</td><td>男</td> </tr> </table> </body>check the result
在这个例子中,首先要知道,tr代表table中的一行,th和td都是代表一个单元格,不同的是,th被用来代表表头,td则是普通单元格。然后table中可以设置border,cellspacing,cellpadding和align,这几个比较常用,cellspacing是代表表格线与线之间的间距,而cellpadding是代表文字与表格线之间的间距,试一试便知。tr、th、td都可以设置width和height,而且width的影响范围是一列,height的影响范围是一行,也可以设置align,在tr中设置align是作用在一行,在th或td中设置align则是作用在一个单元格。
下面来看个和表单结合的例子:
<!DOCTYPE html> <head> <meta charset=utf-8 /> <title>表格表单</title> </head> <body> <h1>表单</h1> <table> <form action="#" method="get"> <tr><td>姓名:</td><td> <input type="text" name="username" placeholder="请输入姓名"/> </td></tr> <tr><td>性别:</td><td> <input type="radio" name="gender" value="0" checked/>男 <input type="radio" name="gender" value="1"/>女 </td></tr> <tr><td>密码:</td><td> <input type="password" name="passwd" placeholder="请输入密码"/> </td></tr> <tr><td>爱好:</td><td> <input type="checkbox" name="hobby" value="lanqiu"/>篮球 <input type="checkbox" name="hobby" value="zuqiu"/>足球 <input type="checkbox" name="hobby" value="yumaoqiu"/>羽毛球 </td></tr> <tr><td>住址:</td><td> <select> <option name="beijing">北京</option> <option name="tianjin">天津</option> <option name="shanghai">上海</option> </select> </td></tr> <tr><td>备注:</td><td> <textarea name="beizhu"></textarea> </td></tr> <tr><td>简历:</td><td> <input type="file" name="resume"/> </td></tr> <tr><td>操作:</td><td> <input type="submit"/> <input type="reset"/> </td></tr> </form> </table> </body>check the result
这里面基本包括了常用的表单元素,这个例子有一些知识点要记录一下:1、input可以用placeholder来指定提示信息;2、几乎每一个input都有一个name属性,这个属性就是与后台交互的媒介哦,怎么说呢?请点击提交按钮,再看看浏览器地址栏的url,是不是有变化呢?是的,表单提交了;3、表单提交到哪里去了呢?这取决于form中的action属性,这里制定的是#,表单提交给本页面;4、表单还有一个重要属性method,一般取值get或者post,这是两种提交方式,如果是get,那么提交的数据就会在url中显示,就如我们看到的,如果是post,数据不会在url中显示,但是也提交到后台了。
关于表单的知识,要结合后台才能够理解透彻,不过这里也算是提到很多了。