1.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单细线边框</title> <style> #t{ border:0; /*上一行表示去掉所有的边框*/ border-top: 1px solid indianred; border-left: 1px dashed red; border-right:1px solid blue; border-bottom:1px dashed greenyellow; } #s{ border:0; border-top: 1px solid red; border-right: 2px dashed greenyellow; border-left: 3px solid orange; } </style> </head> <body> 用户名：<input type="text" id="t"> <input type="submit" value="提交" id="s"> </body> </html>
2.制作CSS的表格（3*3）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格</title> <style> table{ border:1px solid red; width: 200px; height: 200px; } td{ border:1px solid greenyellow; } /*table ,td{*/ /* border-collapse:collapse;*/ /* 上一行是合并相邻边框的意思*/ /*}*/ </style> </head> <body> <table cellpadding="0" cellspacing="0"> <!-- cellpadding 为单元格与内容之间的距离--> <!-- cellspacing 为单元格与单元格之间的距离--> <tr> <td>hello</td> <td>hello</td> <td>hello</td> </tr> <!-- 这样的写法时一行里面有三列--> <tr> <td>hi</td> <td>hi</td> <td>hi</td> </tr> <tr> <td>helloand</td> <td>helloand</td> <td>helloand</td> </tr> </table> </body> </html>