表单练习-注册表单

最新推荐文章于 2024-06-07 14:09:03 发布

是落小尘呀

最新推荐文章于 2024-06-07 14:09:03 发布

阅读量247

点赞数

分类专栏： Javaweb 文章标签： html css

本文链接：https://blog.csdn.net/m0_47743171/article/details/124238101

版权

这篇博客主要介绍了如何使用HTML和CSS进行表单练习，特别是针对注册表单的实现。通过代码展示，呈现了最终的视觉效果，帮助读者理解如何构建具有基本样式和布局的注册表单。

摘要由CSDN通过智能技术生成

表单练习

效果图

代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>游戏注册</title>
  <style>
    /*
    类选择器：使用圆点来定义，定义一个类名
   */
    .small-font{
     
      font-size: 12px;
      color:darkgrey;
    }
    .title {
     
      font-size: 23px;
    }
    .td-height{
     
      height: 65px;
    }
    .label-font{
     
      font-size: 14px;
    }
    label{
     
      color:darkgray;
    }
    input{
     
      height: 30px;
      border: 1px solid rgb(218,218,218);
      width: 350px;
      margin-left: 3px;
      border-radius: 3px;  /*圆角*/
      padding: 5px 15px;
      font-size: 14px;
      color: black;
    }
    /**
     * 属性选择器
     */
    .btn{
     
      margin-left: 20px;
      color: white;
      width: 146px;
      height: 42px;
      border: 1px solid rgb(56,126,232);
      background-color: rgb(56,126,232);
    }
    /**
     * position属性表示对当前的这个标签在浏览器中的位置，进行修饰，
     */
    .tip{
     
      color: red;
      font-size: 14px;
    }

  </style>

</head>
<body>

<form id="form01">
  <table width="1190px" align="center" style="margin-top: 30px">
    <tr>
      <td colspan="4" class="title"> 游戏账号注册说明 </td>
    </tr>

    <tr>
      <td colspan="4" style="height: 50px;"> <hr width="100%" color="gainsboro" > </td>