html

最近看了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>
            　　&nbsp
            　<input type="reset" name="cancel" value="取消" class=button>
        　　　　</td>
        　　</tr>
        </table>
        
                    
         <br>
      
          <table class=Tab id=page_font>
          　　<tr>
      　　　    　　　　<td class=td_flag>版权所有 &nbsp 湖南铁道职业技术学院 &nbsp Copyright&copy &nbsp2007-2008</td>
          　　</tr>
          　　<tr>
          　　　　<td class=td_flag>技术支持：liuzc518@163.com</yd>
          　　</tr>
          </table>
                      
      　　</form>
                  
      </td>
    </tr>
　　　　</table>
      
　　　　</center>
　　</body>
</html>

View Code

这个页面是按照书本上排版，美观不足，不要鄙视我哈。下面是我用的样式，参考了一下园子的代码。

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;
    }

View Code

下面是效果图

其实在学习过程中还有一点没怎么弄清楚，marge与padding的功能感觉很相似，对于他们的区别还在思考阶段，有见解的不防分享一下，还请各位看官不吝赐教。

下面给大家奉上一则小幽默：

阿小木失恋了找黑小米哭诉：“女朋友跟我分手了，分手的时候给了我一个礼物。她送了我一朵红玫瑰，还说等到花谢的日子就是我们重新在一起的日子。”

黑小米听完：“你女朋友好好浪漫哦！！”

“可是可是，这多红玫瑰是用QQ秀送的。。。”