QQ注册界面设计案例

2022-05-29 18:32:56 阅读：129 来源： 互联网

标签：QQ 界面设计 width 100px height 案例 c1 margin 200px

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            /*取消浏览器外间距*/
            margin: 0;
        }

        .c1{
            width: 80%;
            height: 700px;
            
            margin: 100px auto;
            border:green 5px solid;
        }

        .c1 .c2{
            text-align: center;
            font-size: 32px;
            font-weight: 500;
            fount-style: italic;
            font-family: "Times New Roman";
            color: red;
        }

        .c1 .c6{
            width: 100px;
            height: 100px;
            float:  left;
            clear: both;
         }

         .c1 .c3{
            width: 200px;
            height: 200px;
            float:  left;
            margin-top: 200px;

        }
         .c1 .c4{
            width: 200px;
            height: 200px;
            float:  right;
            clear: both;
            margin-top: -200px;
        }
         .c5{
            font-size: 32px;
            width: 100px;
            height: 100px;
            float:  right;
            margin-top: -100px;


        }

    </style>
</head>
<body>
<div class="c1">
    <div class="c2">注册页面</div>
    <div class="c6">
        <a href="https://www.baidu.com"><img width="300" height="200" src="https://image.110go.com/upload/tpk2/86419035.jpg" alt="百度图片" title="百度"></a>
    </div>
    <div class="c3">
    <p>
    <label for="user">姓名</label>
    <input id="user" type="text" name="user" value="root"></p>
    <p>密码 <input type="password" name="pwd" value="123456"></p>
    <p>生日 <input type="date" name="birth" value="1998-10-01"></p>
    </div>
    <div class="c4">
    <p>爱好:
      跑步 <input type="checkbox" name="hobby" value="running" checked>
      篮球 <input type="checkbox" name="hobby" value="basketball" checked>
      台球 <input type="checkbox" name="hobby" value="billiards">
    </p>

    <p>性别:
      男 <input type="radio" name="hobby" value="man" checked>
      女 <input type="radio" name="hobby" value="woman">
      其他 <input type="radio" name="hobby" value="lady-boy">
    </p>

    <p>籍贯:
      <select name="">
      <option value="hebei" checked>河北省</option>
      <option value="beijing">北京市</option>
      <option value="tianjin">天津市</option>
      </select>
    </p>

      <p><input type="file"></p>

    <p>
      <textarea placeholder="个人简介" name="brief" id="" cols="30" rows="10"></textarea>
    </p>
    </div>

</div>
    <div class="c5">
    <p><input type="submit"></p>
    </div>

</form>
</body>
</html>

标签：QQ,界面设计,width,100px,height,案例,c1,margin,200px
来源： https://www.cnblogs.com/A121/p/16324496.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

QQ注册界面设计案例