zoukankan      html  css  js  c++  java
  • 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秀送的。。。”

  • 相关阅读:
    Ubuntu14.04下Sublime Text 3解决无法输入中文
    100% 解决wine中文乱码问题
    历史朝代顺序表
    HTTP状态码分类
    Kali Linux 2019
    多线程下载器(针对于百度云下载)
    百度云破解版&&第三方下载工具&&分享链接无需提取码直接下载
    MongoDB 4.0.10 GridFS操作
    MongoDB 4.0.10 游标
    MongoDB 4.0.10 用户管理
  • 原文地址:https://www.cnblogs.com/hyhl23/p/3367423.html
Copyright © 2011-2022 走看看