简修过的用户登入界面

最新推荐文章于 2024-08-27 14:09:09 发布

HJX—

最新推荐文章于 2024-08-27 14:09:09 发布

阅读量184

点赞数 1

文章标签： html css

本文链接：https://blog.csdn.net/Eoning/article/details/121598386

版权

欢迎各位复制粘贴

往下看

网页body内容：

<body>
    <div class="one">
        <h1>用户注册</h1>
        <form id="form1" name="form1" method="post" action="">
          <p>账号:
          <input type="text" name="textfield" id="textfield" />
          </p>
          <p>密码:
          <input type="password" name="textfield2" id="textfield2" />
          </p>
          <p>性别:
          男  <input type="radio" name="sex" value="男">
          女  <input  type="radio" name="sex" value="女">
          </p>
          <p>注册日期：
            <input type="date"/>
          </p>
          <p>收入：
            <select name="select" id="select">
              <option selected="selected">3万</option>
              <option>4万</option>
              <option>5万</option>
              <option>6万</option>
            </select>
          </p>
          <p>爱好:
          <input type="checkbox"/><label>看电影
          <input type="checkbox"/></label>听歌  
          <label><input type="checkbox"/></label>游泳
          <label><input type="checkbox" /> </label>跑步         
          </p>
          <p>职业: 
            <span class="STYLE1">
            <select name="select2" id="select2">
              <option selected="selected">律师</option>
              <option>教师</option>
              <option>公务员</option>
              <option>学生</option>
            </select>
          </span>  </p>
          <p>年龄:
            <input type="number" value="19" />
          </p>
          <p>电子邮箱：
            <input type="email" name="email"/>
          </p>
          <p>个人介绍 :
            <textarea name="textarea"cols="29" rows="5"></textarea>
          </p>
          <p>
           <input type="submit" name="button" value="提交" />          
           <input type="reset" name="button2" value="重置" />
    </div>
    <div class="foot">
      <h2>制作人：is xiaobai </h2>
    </div>  
</body>

没加css时效果图

网页css内容：

    <style>
      h1{
        font-family: 华文新魏;
        text-align: center;
        font-size: 40px;
      }
      body{
        text-align: left;
        background-image: url(../图片/RC.jfif);/*括号里是图片路径*/
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: fixed;
      }
      .one{
        height: 650px;
        width: 350px;
        padding-left: 10px;
        border: dashed 1px rgb(214, 168, 160);/*添加边框样式 边框粗细 边框颜色*/
        margin: 0 auto;/*使表单居中*/
        border-radius: 30px;
        background-color: rgba(214, 136, 136, 0.3)
      }
      input[type=text]{
        height: 25px;
        width: 170px;
      }
      input[type=password]{
        height: 25px;
        width: 170px;
      }
      input[type=submit]{
        height: 40px;
        width: 70px;
        color: rgb(87, 226, 226);
        font-size: unset;
        background-color: rgb(134, 125, 125);
      }
      input[type=reset]{
        height: 40px;
        width: 70px;
        color: rgb(87, 226, 226);
        font-size: unset;
        background-color: rgb(134, 125, 125);
      }
      .foot{
        color:  #55585a;
        text-align: right;
        font-family: 华文新魏;
        font-size: 20px;
      }
      </style>

完整效果图