程序员经验分享-hwhale

前端 注册界面开发

2023-10-29

1.div的使用

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

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

  1. 添加总体的div

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

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

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

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

  1. 内容的填充

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

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

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

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

2.2控件的添加

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

</div>

<div style="width: 300px;margin: auto">
    <div style="width: 80px;height: 50px;line-height:50px;float: left">
        用户名:
    </div>

    <div style="width: 220px;float: left;height: 50px;line-height: 50px">
        <input type="text">
    </div>

</div>

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

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

剩下的内容顺序大同小异

剩下的也一样的顺序
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body >
    <div style="width: 400px;height: 470px;border: 1px solid black;margin: auto;margin-top: 70px;text-align: center">
        <div style="font-size: 32px;line-height: 100px;font-weight: bold">
            注册用户
        </div>

        <div style="width: 300px;margin: auto">
            <div style="width: 80px;height: 50px;line-height:50px;float: left;text-align: left">
                用户名:
            </div>

            <div style="width: 220px;float: left;height: 50px;line-height: 50px">
                <input placeholder="请输入账号" type="text"style="width: 220px">
            </div>

            <div style="width: 80px;height: 50px;line-height:50px;float: left;text-align: left">
                密码:
            </div>

            <div style="width: 220px;float: left;height: 50px;line-height: 50px">
                <input placeholder="请输入密码" type="password" style="width: 220px">
            </div>
            <div style="width: 80px;height: 50px;line-height:50px;float: left;text-align: left">
                确认密码:
            </div>

            <div style="width: 220px;float: left;height: 50px;line-height: 50px">
                <input placeholder="请确认密码" type="password"style="width: 220px">
            </div>
            <div style="width: 80px;height: 50px;line-height:50px;float: left;text-align: left">
                性别:
            </div>

            <div style="width: 220px;float: left;height: 50px;line-height: 50px;text-align: left">
                <input type="radio"> 男 <input type="radio"> 女
            </div>

            <div style="width: 80px;height: 50px;line-height:50px;float: left;text-align: left">
                爱好:
            </div>

            <div style="width: 220px;float: left;height: 50px;line-height: 50px;text-align: left">
                <input type="checkbox">运动 <input type="checkbox">旅行 <input type="checkbox">美食
            </div>
            <div style="width: 80px;height: 50px;line-height:50px;float: left;text-align: left">
                学历:
            </div>

            <div style="width: 220px;float: left;height: 50px;line-height: 50px;margin: auto">
                <select style="width: 220px">
                    <option>本科</option>
                    <option>带专</option>
                </select>
            </div>

            <div style="height: 50px;line-height: 50px">
                <div style="width: 150px;float: left">
                    <input type="submit" name="提交"style="background: dodgerblue;color: aliceblue;width: 70px">
                </div>

                <div style="width: 150px;float: left">
                    <input type="reset" name="重置" style="width: 70px">
                </div>
            </div>
        </div>

    </div>

</body>
</html>

ps：

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

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

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

2.2.1优化控件

<div style="width: 150px;float: left">
                    <input type="submit" name="提交"style="background: dodgerblue;color: aliceblue;width: 70px;border:0;border-radius: 10px">
                </div>

                <div style="width: 150px;float: left">
                    <input type="reset" name="重置" style="width: 70px;border: 0;border-radius: 10px">
                </div>

将按钮的边框设计成圆角

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

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

二、边框的联系

1.margin

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="width: 400px;height: 400px;border: 1px solid black;margin: auto;margin-top: 70px;">
        <div style="width: 100px;height: 100px;border: 1px solid black;margin: 100px 400px 0px 100px">

        </div>

    </div>

</body>
</html>

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

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

<div style="width: 400px;height: 400px;border: 1px solid black;margin: auto;margin-top: 70px;">
    <div style="width: 100px;height: 100px;border: 1px solid black;padding: 100px 400px 0px 100px">

    </div>

</div>

三、题目练习

  1. 兴趣调查问卷

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="width: 500px;height: 450px;border: 1px solid black;margin: auto;border-radius: 10px">
        <div style="text-align: center;height: 50px;margin: auto">
            <h1>兴趣调查问卷</h1>
        </div>
        <div style="width: 450px;margin: auto">
            <div style="text-align:left"><h3>喜欢的城市：</h3></div>
            <div style="font-weight: bolder"><input type="checkbox" >北京 <input type="checkbox">上海 <input type="checkbox">南京 <input type="checkbox">济宁 </div>
            <div style="text-align:left;margin-top: 30px"><hr></div>
            <div style="text-align:left"><h3>喜欢的咖啡：</h3></div>
            <div style="font-weight: bolder;color: red"><input type="checkbox">拿铁 <input type="checkbox">洁厕灵 <input type="checkbox">84消毒液 <input type="checkbox">南京人</div>
            <div style="text-align:left;margin-top: 30px"><hr></div>
            <div style="text-align:left"><h3>喜欢的汽车品牌：</h3></div>
            <div style="font-weight: bolder"><input type="checkbox">宝马 <input type="checkbox">法拉利 <input type="checkbox">兰博基尼 <input type="checkbox">五菱宏光</div>
            <div style="text-align:left;margin-top: 30px"><hr></div>
        </div>
    </div>

</body>
</html>

  1. 恭喜发财

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="width: 400px;height: 400px">
        <div style="width: 200px;height:200px;background: dodgerblue;float: left" >
            <div style="font-size: 100px;color: red;text-align: center;line-height: 200px">
                恭
            </div>
        </div>
        <div style="width: 200px;height:200px;background: red;float: right" >

            <div style="font-size: 100px;color: black;text-align: center;line-height: 200px">
                喜
            </div>

        </div>
        <div style="width: 200px;height:200px;background: green;float: left" >

            <div style="font-size: 100px;color: red;text-align: center;line-height: 200px">
                发
            </div>
        </div>
        <div style="width: 200px;height:200px;background: aqua;float: right" >

            <div style="font-size: 100px;color: red;text-align: center;line-height: 200px">
                财
            </div>
        </div>
    </div>

</body>
</html>

3.注册用户

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="margin: auto;width: 400px;height: 550px;border-radius: 10px;border: 1px solid black">
        <!--标题注册用户-->
        <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>
        <!--内部大框架-->
        <div style="width: 300px;height: 400px;margin-left: 80px;margin-top: 20px"> <!--内部大框架-->
            <!--用户名-->
            <div style="font-weight: bolder">用户名：</div>
            <div style="margin-top: 10px"> <input type="text" placeholder="请输入用户名"style="height: 30px;border-radius: 5px;color: black;border: 1px solid black;width: 200px"></div>
            <!--密码-->
            <div style="font-weight: bolder;margin-top: 20px">密码：</div>
            <div style="margin-top: 10px"> <input type="password" placeholder="请输入密码"style="height: 30px;border-radius: 5px;color: black;border: 1px solid black;width: 200px"></div>
            <!--确认密码-->
            <div style="font-weight: bolder;margin-top: 20px">确认密码：</div>
            <div style="margin-top: 10px"> <input type="password" placeholder="请输入密码"style="height: 30px;border-radius: 5px;color: black;border: 1px solid black;width: 200px"></div>

            <!--性别、爱好-->
            <!--性别、爱好文字-->
            <div style="width: 100px; height: 69.8px;font-weight: bolder;text-align: left;float: left"><p>性别：</p><p>爱好：</p></div>
            <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>

            <div style="font-weight: bolder;margin-top: 85px">学历：</div>

            <div style="margin-top: 10px">
                <select style="width: 200px;height: 30px">
                    <option>本科</option>
                    <option>带专</option>
                </select>
            </div>
        </div>
        <!--按钮小框架-->
        <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>
        <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>
    </div>

</body>
</html>

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

前端

html

Powered by 金山文档

前端 注册界面开发 的相关文章