Html学习笔记---登陆框制作小练习

最新推荐文章于 2023-04-05 21:25:41 发布

xiaoa~

最新推荐文章于 2023-04-05 21:25:41 发布

阅读量215

点赞数

分类专栏： html学习笔记

本文链接：https://blog.csdn.net/qq_34964399/article/details/79324975

版权

html学习笔记专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--主要用到absolute；relative；padding-right，这样输入字符就不会顶到图片-->
    <div style="position:relative;width:350px;height:40px;margin:100px auto 20px auto;line-height:40px">
        <input type="text" style="width:300px;height:40px;padding-right: 50px;"/>
        <span style="position:absolute;top:3px;right:2px;background-image:url(image/input.png);background-position-x:0px;background-position-y:0px;background-repeat:no-repeat;width:40px;height:40px;display:inline-block;"></span>
        <h4><span style="font-size:20px; position:absolute;left:-48px;top:0;width:40px;height:40px;display:inline-block;">姓名</span></h4>
    </div>
    <div style="position:relative;width:350px;height:40px;margin:0 auto;line-height:40px;">
        <input type="password" style="width:300px;height:40px;padding-right: 50px;"/>
        <span style="position:absolute;top:3px;right:2px;background-image:url(image/input.png);background-position-x:0px;background-position-y:-69px;background-repeat:no-repeat;width:40px;height:40px;display:inline-block;"></span>
        <h4><span style="font-size:20px;position:absolute;left:-48px;top:0;width:40px;height:40px;display:inline-block;">密码</span></h4>
    </div>

</body>
</html>

xiaoa~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Html学习笔记---登陆框制作小练习

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt;&lt;/head&gt;&lt;body&gt; &lt;!--主要
复制链接

扫一扫