• CSS构造表单


    • 表单标签使用
    • 下拉菜单背景
    • 滚动条的使用
    • 结构化表单布局

     

    1.表单标签的使用

        <label for="name">姓名: </ label><input type="text" name="name" id="name" />

     

    2.去掉默认的表单间隔

        Form {

            Margin: 0;

            Padding: 0;

    }

     

    3.给文本框添加漂亮的边框

        Input,textarea {

            Border: 3px double #333;

    }

     

    1. 给下拉菜单设置背景色

      select {

      background:red;

      }

       

    2. 给文本区域添加滚动条

      textarea {

          SCROLLBAR-FACE-COLOR: #333;

          SCROLLBAR-HIGHLIGHT-COLOR: #666;

          SCROLLBAR-SHADOW-COLOR: #333;

          SCROLLBAR-3DLIGHT-COLOR: #999;

          SCROLLBAR-ARROW-COLOR: #999;

          SCROLLBAR-TRACK-COLOR: #000;

          SCROLLBAR-DARKSHADOW-COLOR: #000;

      }

       

      6.表单外边框设置fieldset legend

          Fieldset {

              Margin:0 0 10px 0;

              Padding: 5px;

              Border: 1px solid #333;

      }

       

      Legend {

          Background-color: #ddd;

          Margin:0;

          Padding: 5px;

          Border-style: solid;

          Border- 1px;

          Border-color: #fff #aaa #666 #fff;

      }

       

          Fieldset {

              Background: #ddd;

      }

       

      7.结构化表单布局

          <form id="regForm">

              <fieldset>

                  <legend>登陆信息</legend>

                  <div class="dataArea frist">

                      <label for="username">用户名:</label><input type="text" id="username" class="input" />

                  </div>

                  <div class="dataArea">

                      <label for="password">密码:</label><input type="text" id="password" class="input" />

                  </div>

                  <div class="dataArea">

                      <label for="passwordVerify">确认密码:</label><input type="text" id="passwordVerify" class="input" />

                  </div>

              </fieldset>

              <fieldset>

                  <legend>个人信息</legend>

                  <div class="dataArea frist">

                      <label for="nickname">昵称:</label><input type="text" id="nickname" />

                  </div>

                  <div class="dataArea">

                      <label for="email" class="hint">电子邮件:</label><input type="text" id="email" />

                  </div>

                  <div class="subArea">

                      <input type="submit" value="注册" /> <input type="button" value="返回" />

                  </div>

              </fieldset>

      </form>

       

       

      #regForm fieldset {

          padding:0 20px 10px;

          border:0;

          border-top:1px #d0d0bf solid;

      }

      #regForm legend {

          padding:0 10px;

          font-weight:bold;

      }

      #regForm .dataArea {

          padding:2px 0;

      }

      #regForm .frist {

          padding:8px 0 2px;

      }

      #regForm .subArea input {

          padding:1px 4px;

      }

      #regForm label {

          110px;

          text-align:right;

          float:left;

      }

  • 相关阅读:
    tp5使用外部类的三种方法
    thinkphp5中php7中运行会出现No input file specified. 这个你改个东西
    21.Yii2.0框架多表关联一对多查询之性能优化--模型的使用
    20.Yii2.0框架多表关联一对多查询之hasMany
    19.Yii2.0框架模型删除记录
    18.Yii2.0框架模型修改记录 和 修改点击量
    17.Yii2.0框架模型添加记录
    15.Yii2.0框架where单表查询
    14-15.Yii2.0模型的创建/读取数据使用,框架防止sql注入
    12.Yii2.0框架视图模版继承与模版相互调用
  • 原文地址:https://www.cnblogs.com/lifi/p/5728711.html
Copyright © 2020-2023  润新知