最近看了html+css标签手册,对网页制作有了初步的认识,虽然只是大概知道了她们的用法,今后勤加练习,提高自己。下面是今天做的一个小的注册页面,没有与服务器连接,仅作为现阶段的练习。
<html> <head> <title>欢迎加入Easy-Buy Online</title> <link rel="stylesheet" type="text/css" href="E:HTML+CSS/register.css"> </head> <body> <center> <p style="font-family:宋体;font-size:larger;text-align:left">欢迎注册Easy-Buy Online</p> <hr> <table class=Tab> <tr> <td> <form action="" name="register" method="post" enco> <table class=Tab> <tr> <td> <b>注意事项:</b><br><br> <div class=notice_item> 1.个人信息带*号的必须填写。<br> 2.用户名与密码均由您自己填写,以后购物时只需在用户登录处输入用户名与密码即可。请您务必牢记您的用户名与密码。<br> 3.订单中的联系电话请填写正常工作日(9:00~17:00)可联系电话。<br> 4.请认真填写您的Email邮箱地址,以方便联系。<br> 5.请认真填写问答提示并且牢记您的问答提示,以便找回您的密码。 </div> </td> </tr> </table> <br> <table class=Tab id=page_font> <tr> <td width="30%" class=td_name>用户名:</td> <td class=input_default><input type="text" name="username">*(任意数字或者是字符,长度8-20)</td> </tr> <tr> <td width="30%" class=td_name>密码:</td> <td class=input_default><input type="password" name="pass1">*(任意的数字或者是3-30个字符)</td> </tr> <tr> <td class=td_name>确认密码:</td> <td class=input_default><input type="password" name="pass2">*</td> </tr> <tr> <td class=td_name>联系电话:</td> <td class=input_default><input type="text" name="phone">*(请确认填写,方便日后联系)</td> </tr> <tr> <td class=td_name>问题提示:</td> <td class=input_default> <select name="help"> <option value="q1" selected>你最喜欢的人是谁? <option value="q2">你最敬佩的人是谁? <option value="q3">你最喜欢的歌手是谁? <option value="q4">你是个好人还是个坏人? </sected> </td> </tr> <tr> <td class=td_name>问题答案:</td> <td class=input_default><input type="text" name="answer">*</td> </tr> <tr> <td class=td_name>地址:</td> <td class=input_default><input type="text" name="addr"></td> </tr> <tr> <td class=td_name>Email:</td> <td class=input_default><input type="text" name="email">*</td> </tr> <tr> <td colspan=2 class=td_Button> <input type="submit" name="submit" value="提交" class=button>   <input type="reset" name="cancel" value="取消" class=button> </td> </tr> </table> <br> <table class=Tab id=page_font> <tr> <td class=td_flag>版权所有   湖南铁道职业技术学院   Copyright©  2007-2008</td> </tr> <tr> <td class=td_flag>技术支持:liuzc518@163.com</yd> </tr> </table> </form> </td> </tr> </table> </center> </body> </html>
这个页面是按照书本上排版,美观不足,不要鄙视我哈。下面是我用的样式,参考了一下园子的代码。
body { font-size:14px; background:#eee; font-family: Verdana,Arial,Helvetica,sans-serif; } *{ color:#333; } #page_font{ font-weight:normal; font-size:90%; } .notice_item { font-size:80%; } .td_Button { border:1px solid #CCC; width:670px; text-align:center; } .button { cursor:pointer; font-size:14px; font-weight:bold; height:25px; text-align:center; width:76px; } .td_name { border:1px solid #CCC; width:170px; text-align:right; } .td_flag{ border:1px solid #ccc; width:670px; text-align:center; font-size:80%; font-family:黑体; height:50px; } .input_default { border:1px solid #CCC; height:18px; line-height:18px; vertical-align:middle; width:500px; } .Tab{ border-style:solid; border-color:#bbb; border-width:1px; border-collapse:collapse; width:670px; }
下面是效果图
其实在学习过程中还有一点没怎么弄清楚,marge与padding的功能感觉很相似,对于他们的区别还在思考阶段,有见解的不防分享一下,还请各位看官不吝赐教。
下面给大家奉上一则小幽默:
阿小木失恋了找黑小米哭诉:“女朋友跟我分手了,分手的时候给了我一个礼物。她送了我一朵红玫瑰,还说等到花谢的日子就是我们重新在一起的日子。”
黑小米听完:“你女朋友好好浪漫哦!!”
“可是可是,这多红玫瑰是用QQ秀送的。。。”