代码改变世界

超级小白自己撸一个“我们是谁”

提前声明：笔者自学HTML+CSS几天，写这个纯粹是练手，非常简陋！不喜勿喷！

效果展示图：

源码：

<!DOCTYPE html>
<html>
<head>
<title>
我们是谁DIY
</title>
<style type="text/css">
.img_wrap {
    text-align: center;
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.kuang {
    text-align: center;
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
input:focus {border:1px solid black;}
p.kuang1 {margin-top:10px;margin-bottom:120px;margin-right:28px;}
p.kuang2 {margin-top:130px;margin-bottom:120px;margin-right:28px;}
p.kuang3 {margin-top:130px;margin-right:28px;}    
</style>
</head>
<body>
    <div class="img_wrap">
    <div class="kuang">
    <p class="kuang1"><input type="text" name="fname" style="border:0;margin-left:60px"><input type="text" name="lname" style="border:0;margin-left:60px"></p>
    <p class="kuang2"><input type="text" name="fname" style="border:0;margin-left:60px"><input type="text" name="lname" style="border:0;margin-left:60px"></p>
    <p class="kuang3"><input type="text" name="fname" style="border:0;margin-left:60px"><input type="text" name="lname" style="border:0;margin-left:60px"></p>
    </div>
    <img src="https://files.cnblogs.com/files/lj-cn/women.gif" alt="我们是谁" />
    </div>
</body>
</html>

使用方法：

　　将源码保存为.html格式文件，用浏览器打开，用鼠标点击动画人上方，弹出文本框，输入内容，也可用Tab键切换文本框，输入完成后，手动截图分享，对，你没听错，还要手动截图，哈哈！简陋到不行！

 

如果文章对你哪怕有一点点的帮助，麻烦点个推荐或者关注，支持一下创作者！万分感谢！

posted @ 2017-08-23 10:38  Tracy21  阅读(336)  评论(0)  编辑  收藏  举报
☝