menu
  • 首页 首页 icon
  • 工具库 工具库 icon
    • IP查询 IP查询 icon
  • 内容库 内容库 icon
    • 快讯库 快讯库 icon
    • 精品库 精品库 icon
    • 问答库 问答库 icon
  • 更多 更多 icon
    • 服务条款 服务条款 icon

前端 注册界面开发

武飞扬头像
二十多岁想退休
帮助1人

1.div的使用

我所理解的div标签类似于ps中的图层一样，当我需要在页面展示内容时候，只需要在图层中添加相关的信息。

下面通过此界面的创建过程讲解有关div的使用：

学新通

  1. 添加总体的div

  1.  
    <div style="width: 200px;height: 250px;border: 1px solid black;margin: auto;margin-top: 70px">
  2.  
    注册用户
  3.  
    </div>

其中 style是设置的是div的样式，

boder设置的是外框，其中以后三个属性，像素（1px）、实线（solid）、颜色（black）和上文代码所对应

后面的margin则是页边距，为了保证总体处于页面中心，我将内容设置为了自动，其中margin-top是设置的上边距，这里我用了像素表示。

  1. 内容的填充

首先是注册用户，注册用户可以看做是单独的一层div

  1.  
    <div style="font-size: 32px;line-height: 100px;font-weight: bold;text-align: center">
  2.  
    注册用户
  3.  
    </div>

fort-size 文字大小；font-weight 文字样式，这里选择的加粗；line-height是行高，text-align是文字对齐方式。

line-height是为了保证文字的上下居中，text - align设置为居中对齐，这样可以保证内容的中心对齐；

学新通

2.2控件的添加

内容的填充则可将文字和input控件当做一个整体的div，然后在这个整体的div中将文字和input框架设置成不同的div。

  1.  
    </div>
  2.  
     
  3.  
    <div style="width: 300px;margin: auto">
  4.  
    <div style="width: 80px;height: 50px;line-height:50px;float: left">
  5.  
    用户名:
  6.  
    </div>
  7.  
     
  8.  
    <div style="width: 220px;float: left;height: 50px;line-height: 50px">
  9.  
    <input type="text">
  10.  
    </div>
  11.  
     
  12.  
    </div>
学新通

计算好相关的像素大小即可设置好对应的div大小

float是保证我的文字的div和控件的div可以同时在一行，否则则会出现一上一下的情况

剩下的内容顺序大同小异

  1.  
    剩下的也一样的顺序
  2.  
    <!DOCTYPE html>
  3.  
    <html lang="en">
  4.  
    <head>
  5.  
    <meta charset="UTF-8">
  6.  
    <title>Title</title>
  7.  
    </head>
  8.  
    <body >
  9.  
    <div style="width: 400px;height: 470px;border: 1px solid black;margin: auto;margin-top: 70px;text-align: center">
  10.  
    <div style="font-size: 32px;line-height: 100px;font-weight: bold">
  11.  
    注册用户
  12.  
    </div>
  13.  
     
  14.  
    <div style="width: 300px;margin: auto">
  15.  
    <div style="width: 80px;height: 50px;line-height:50px;float: left;text-align: left">
  16.  
    用户名:
  17.  
    </div>
  18.  
     
  19.  
    <div style="width: 220px;float: left;height: 50px;line-height: 50px">
  20.  
    <input placeholder="请输入账号" type="text"style="width: 220px">
  21.  
    </div>
  22.  
     
  23.  
    <div style="width: 80px;height: 50px;line-height:50px;float: left;text-align: left">
  24.  
    密码:
  25.  
    </div>
  26.  
     
  27.  
    <div style="width: 220px;float: left;height: 50px;line-height: 50px">
  28.  
    <input placeholder="请输入密码" type="password" style="width: 220px">
  29.  
    </div>
  30.  
    <div style="width: 80px;height: 50px;line-height:50px;float: left;text-align: left">
  31.  
    确认密码:
  32.  
    </div>
  33.  
     
  34.  
    <div style="width: 220px;float: left;height: 50px;line-height: 50px">
  35.  
    <input placeholder="请确认密码" type="password"style="width: 220px">
  36.  
    </div>
  37.  
    <div style="width: 80px;height: 50px;line-height:50px;float: left;text-align: left">
  38.  
    性别:
  39.  
    </div>
  40.  
     
  41.  
    <div style="width: 220px;float: left;height: 50px;line-height: 50px;text-align: left">
  42.  
    <input type="radio"> 男 <input type="radio"> 女
  43.  
    </div>
  44.  
     
  45.  
    <div style="width: 80px;height: 50px;line-height:50px;float: left;text-align: left">
  46.  
    爱好:
  47.  
    </div>
  48.  
     
  49.  
    <div style="width: 220px;float: left;height: 50px;line-height: 50px;text-align: left">
  50.  
    <input type="checkbox">运动 <input type="checkbox">旅行 <input type="checkbox">美食
  51.  
    </div>
  52.  
    <div style="width: 80px;height: 50px;line-height:50px;float: left;text-align: left">
  53.  
    学历:
  54.  
    </div>
  55.  
     
  56.  
    <div style="width: 220px;float: left;height: 50px;line-height: 50px;margin: auto">
  57.  
    <select style="width: 220px">
  58.  
    <option>本科</option>
  59.  
    <option>带专</option>
  60.  
    </select>
  61.  
    </div>
  62.  
     
  63.  
    <div style="height: 50px;line-height: 50px">
  64.  
    <div style="width: 150px;float: left">
  65.  
    <input type="submit" name="提交"style="background: dodgerblue;color: aliceblue;width: 70px">
  66.  
    </div>
  67.  
     
  68.  
    <div style="width: 150px;float: left">
  69.  
    <input type="reset" name="重置" style="width: 70px">
  70.  
    </div>
  71.  
    </div>
  72.  
    </div>
  73.  
     
  74.  
    </div>
  75.  
     
  76.  
    </body>
  77.  
    </html>
学新通
学新通

ps：

<input placeholder="请输入账号" type="text"style="width: 220px">

placeholder是让文字框中出现文字（灰色）

底端提交控件和重置控件是新建的一层div，在通过这一层div创建了两个div，在这两个div中分别写上这两个控件。

2.2.1优化控件
  1.  
    <div style="width: 150px;float: left">
  2.  
    <input type="submit" name="提交"style="background: dodgerblue;color: aliceblue;width: 70px;border:0;border-radius: 10px">
  3.  
    </div>
  4.  
     
  5.  
    <div style="width: 150px;float: left">
  6.  
    <input type="reset" name="重置" style="width: 70px;border: 0;border-radius: 10px">
  7.  
    </div>
学新通

将按钮的边框设计成圆角

border为0或者null时为没有边框

border-radius设置为圆角，像素越大越圆

二、边框的联系

1.margin

  1.  
    <!DOCTYPE html>
  2.  
    <html lang="en">
  3.  
    <head>
  4.  
    <meta charset="UTF-8">
  5.  
    <title>Title</title>
  6.  
    </head>
  7.  
    <body>
  8.  
    <div style="width: 400px;height: 400px;border: 1px solid black;margin: auto;margin-top: 70px;">
  9.  
    <div style="width: 100px;height: 100px;border: 1px solid black;margin: 100px 400px 0px 100px">
  10.  
     
  11.  
    </div>
  12.  
     
  13.  
    </div>
  14.  
     
  15.  
    </body>
  16.  
    </html>
学新通
学新通

margin 直接添加 按照上右下左的顺序，顺时针添加。相对于自己来说，我想往右走，就得添加左方向的margin内容。

padding 也可以达到类似的效果，但是他的长度会增加//padding相当于填充

  1.  
    <div style="width: 400px;height: 400px;border: 1px solid black;margin: auto;margin-top: 70px;">
  2.  
    <div style="width: 100px;height: 100px;border: 1px solid black;padding: 100px 400px 0px 100px">
  3.  
     
  4.  
    </div>
  5.  
     
  6.  
    </div>
学新通

三、题目练习

  1. 兴趣调查问卷

  1.  
    <!DOCTYPE html>
  2.  
    <html lang="en">
  3.  
    <head>
  4.  
    <meta charset="UTF-8">
  5.  
    <title>Title</title>
  6.  
    </head>
  7.  
    <body>
  8.  
    <div style="width: 500px;height: 450px;border: 1px solid black;margin: auto;border-radius: 10px">
  9.  
    <div style="text-align: center;height: 50px;margin: auto">
  10.  
    <h1>兴趣调查问卷</h1>
  11.  
    </div>
  12.  
    <div style="width: 450px;margin: auto">
  13.  
    <div style="text-align:left"><h3>喜欢的城市：</h3></div>
  14.  
    <div style="font-weight: bolder"><input type="checkbox" >北京 <input type="checkbox">上海 <input type="checkbox">南京 <input type="checkbox">济宁 </div>
  15.  
    <div style="text-align:left;margin-top: 30px"><hr></div>
  16.  
    <div style="text-align:left"><h3>喜欢的咖啡：</h3></div>
  17.  
    <div style="font-weight: bolder;color: red"><input type="checkbox">拿铁 <input type="checkbox">洁厕灵 <input type="checkbox">84消毒液 <input type="checkbox">南京人</div>
  18.  
    <div style="text-align:left;margin-top: 30px"><hr></div>
  19.  
    <div style="text-align:left"><h3>喜欢的汽车品牌：</h3></div>
  20.  
    <div style="font-weight: bolder"><input type="checkbox">宝马 <input type="checkbox">法拉利 <input type="checkbox">兰博基尼 <input type="checkbox">五菱宏光</div>
  21.  
    <div style="text-align:left;margin-top: 30px"><hr></div>
  22.  
    </div>
  23.  
    </div>
  24.  
     
  25.  
    </body>
  26.  
    </html>
学新通
学新通

  1. 恭喜发财

  1.  
    <!DOCTYPE html>
  2.  
    <html lang="en">
  3.  
    <head>
  4.  
    <meta charset="UTF-8">
  5.  
    <title>Title</title>
  6.  
    </head>
  7.  
    <body>
  8.  
    <div style="width: 400px;height: 400px">
  9.  
    <div style="width: 200px;height:200px;background: dodgerblue;float: left" >
  10.  
    <div style="font-size: 100px;color: red;text-align: center;line-height: 200px">
  11.  
    恭
  12.  
    </div>
  13.  
    </div>
  14.  
    <div style="width: 200px;height:200px;background: red;float: right" >
  15.  
     
  16.  
    <div style="font-size: 100px;color: black;text-align: center;line-height: 200px">
  17.  
    喜
  18.  
    </div>
  19.  
     
  20.  
    </div>
  21.  
    <div style="width: 200px;height:200px;background: green;float: left" >
  22.  
     
  23.  
    <div style="font-size: 100px;color: red;text-align: center;line-height: 200px">
  24.  
    发
  25.  
    </div>
  26.  
    </div>
  27.  
    <div style="width: 200px;height:200px;background: aqua;float: right" >
  28.  
     
  29.  
    <div style="font-size: 100px;color: red;text-align: center;line-height: 200px">
  30.  
    财
  31.  
    </div>
  32.  
    </div>
  33.  
    </div>
  34.  
     
  35.  
    </body>
  36.  
    </html>
学新通
学新通

3.注册用户

  1.  
    <!DOCTYPE html>
  2.  
    <html lang="en">
  3.  
    <head>
  4.  
    <meta charset="UTF-8">
  5.  
    <title>Title</title>
  6.  
    </head>
  7.  
    <body>
  8.  
    <div style="margin: auto;width: 400px;height: 550px;border-radius: 10px;border: 1px solid black">
  9.  
    <!--标题注册用户-->
  10.  
    <div style="background: cornflowerblue;text-align: center;width: 400px;height: 80px;border: none;border-radius: 10px;color: aliceblue;text-align: center;line-height: 80px;font-size: 40px">注册用户</div>
  11.  
    <!--内部大框架-->
  12.  
    <div style="width: 300px;height: 400px;margin-left: 80px;margin-top: 20px"> <!--内部大框架-->
  13.  
    <!--用户名-->
  14.  
    <div style="font-weight: bolder">用户名：</div>
  15.  
    <div style="margin-top: 10px"> <input type="text" placeholder="请输入用户名"style="height: 30px;border-radius: 5px;color: black;border: 1px solid black;width: 200px"></div>
  16.  
    <!--密码-->
  17.  
    <div style="font-weight: bolder;margin-top: 20px">密码：</div>
  18.  
    <div style="margin-top: 10px"> <input type="password" placeholder="请输入密码"style="height: 30px;border-radius: 5px;color: black;border: 1px solid black;width: 200px"></div>
  19.  
    <!--确认密码-->
  20.  
    <div style="font-weight: bolder;margin-top: 20px">确认密码：</div>
  21.  
    <div style="margin-top: 10px"> <input type="password" placeholder="请输入密码"style="height: 30px;border-radius: 5px;color: black;border: 1px solid black;width: 200px"></div>
  22.  
     
  23.  
    <!--性别、爱好-->
  24.  
    <!--性别、爱好文字-->
  25.  
    <div style="width: 100px; height: 69.8px;font-weight: bolder;text-align: left;float: left"><p>性别：</p><p>爱好：</p></div>
  26.  
    <div style="width: 200px;height:69.8px;font-weight: bolder;text-align: left;float: right"><p><input type="radio">男 <input type="radio">女</p><input type="checkbox">运动 <input type="checkbox">旅行 <input type="checkbox">美食 </div>
  27.  
     
  28.  
    <div style="font-weight: bolder;margin-top: 85px">学历：</div>
  29.  
     
  30.  
    <div style="margin-top: 10px">
  31.  
    <select style="width: 200px;height: 30px">
  32.  
    <option>本科</option>
  33.  
    <option>带专</option>
  34.  
    </select>
  35.  
    </div>
  36.  
    </div>
  37.  
    <!--按钮小框架-->
  38.  
    <div style="width: 175px;height:50px;float: left;text-align: right"><input type="submit"name="注册"style="background: cornflowerblue;color: aliceblue;border: 0;border-radius: 5px;height: 30px;width: 70px"></div>
  39.  
    <div style="width: 175px;height:50px;float: right;text-align: left"><input type="reset"name="重置"style="border: 0;border-radius: 5px;height: 30px;width: 70px"></div>
  40.  
    </div>
  41.  
     
  42.  
    </body>
  43.  
    </html>
学新通
学新通

这篇好文章是转载于：学新通技术网

  • 版权申明： 本站部分内容来自互联网，仅供学习及演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，请提供相关证据及您的身份证明，我们将在收到邮件后48小时内删除。
  • 本站站名： 学新通技术网
  • 本文地址： /boutique/detail/tanhgfaeig
系列文章
更多 icon
同类精品
更多 icon
继续加载
友情链接: 申请要求：权重≥3，IP≥1000，内容属同类网站; 申请邮件： luke.wu●vfv.cc 友情链接交换群： 友情链接交换群
外链价格: 【首页 30/月 - 300/年】【内页 50/月 - 500/年】【全站 70/月 - 700/年】 购买外链请加QQ群： 站长交流群