自己写一个表单吧

最新推荐文章于 2022-10-15 12:18:50 发布

X Burner

最新推荐文章于 2022-10-15 12:18:50 发布

阅读量71

点赞数 1

本文链接：https://blog.csdn.net/BurstLink35/article/details/113576568

版权

效果图

在这里插入图片描述
主要代码段

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
    <style type="text/css">
.pdd{
    position: relative;
    left:10px;
    top: 10px;
}
    </style>
</head>

<body>
    <div style="margin-top:30px;width:500px;height:305px;border: 2px solid black;">
    <div style="background-color: white; position:absolute; left:30px; top:18px;">Personalia</div>
    <form    method="post"   action="save.php">
    <label for="Firstname" class="pdd">First name:</label>
    <input type="text" id="Firstname" class="pdd"><br />
    <label for="Lastname" class="pdd">Last name:</label>
    <input type="text" id="Lastname" class="pdd"><br />
    <select class="pdd">
        <option>有备注</option>
        <option>无备注</option>
    </select><br />
    <textarea cols="45" rows="13" placeholder="请输入备注..." class="pdd"></textarea><br />
    <input   type="submit"  value="提交" class="pdd" style="position: relative;top:9px">
    </form>
    </div>
</body>

总结
1.在盒模型边框中镶嵌文字的方法
（1)position:absolute实现绝对位置的变化
（2)background实现将原本的线条用背景色覆盖

absolute：元素会脱离文档流，定位是相对于离它最近的且不是static定位的父元素而言，若该元素没有设置宽度，则宽度由元素里面的内容决定，且宽度不会影响父元素，定位为absolution后，原来的位置相当于是空的，下面的的元素会来占据。

relative：元素仍处于文档流中，定位是相对于原本自身的位置，若没有设置宽度，则宽度为父元素的宽度，该元素的大小会影响父元素的大小。

X Burner

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
自己写一个表单吧

效果图主要代码段<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表单</title> <style type="text/css">.pdd{ position: relative; left:10px; to
复制链接

扫一扫