• CSS fieldset制作表单,抛弃Table


    View Code
     1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     2 <html xmlns="http://www.w3.org/1999/xhtml">
     3 <head>
     4 <title>fieldset表单</title>
     5 <style>
     6 h1 {
     7   font: 1.2em Arial, Helvetica, sans-serif;
     8 }
     9 input.txt {
    10   color: #00008B;
    11   background-color: #E3F2F7;
    12   border: 1px inset #00008B;
    13   width: 200px;
    14 }
    15 input.btn {
    16   color: #00008B;
    17   background-color: #ADD8E6;
    18   border: 1px outset #00008B;
    19 }
    20 form p {
    21   clear: left;
    22   margin: 0;
    23   padding: 0;
    24   padding-top: 5px;
    25 }
    26 form p label {
    27   float: left;
    28   width: 30%;
    29   font: bold 0.9em Arial, Helvetica, sans-serif;
    30 }
    31 fieldset {
    32   border: 1px dotted #61B5CF;
    33   margin-top: 16px;
    34   padding: 10px;
    35 }
    36 legend {
    37   font: bold 0.8em Arial, Helvetica, sans-serif;
    38   color: #00008B;
    39   background-color: #FFFFFF;
    40 }
    41 </style>
    42 </head>
    43 <body>
    44 <h1>用户注册表单:</h1>
    45 <form method="post" action="fieldset.html">
    46   <fieldset>
    47     <legend>个人信息:</legend>
    48     <p>
    49       <label for="fullname">姓名:</label>
    50       <input type="text" name="fullname" id="fullname" class="txt" />
    51     </p>
    52     <p>
    53       <label for="email">Email:</label>
    54       <input type="text" name="email" id="email" class="txt" />
    55     </p>
    56     <p>
    57       <label for="password1">密码:</label>
    58       <input type="password" name="password1" id="password1" class="txt" />
    59     </p>
    60     <p>
    61       <label for="password2">确认密码:</label>
    62       <input type="password" name="password2" id="password2" class="txt" />
    63     </p>
    64   </fieldset>
    65   <p>
    66     <input type="submit" name="btnSubmit" id="btnSubmit" value="注册!" class="btn" />
    67   </p>
    68 </form>
    69 </body>
    70 </html>
  • 相关阅读:
    Python 函数知识点
    面向对象相关
    判断arg参数是否是可以被调用的
    利用U盘安装CentOS7系统
    简单模仿OpenGL中的栈的作用
    温故而知新我再一次学习库
    关于帧缓存的总结
    OGRE的相关工具和库
    OpenGL在Qt界面下的应用(helloworld)
    OpenGL加载Cg程序
  • 原文地址:https://www.cnblogs.com/ymj126/p/2847423.html
Copyright © 2020-2023  润新知