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

2018-06-24 01:47:02来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

提前声明:笔者自学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="http://files.cnblogs.com/files/lj-cn/women.gif" alt="我们是谁" />
    </div>
</body>
</html>

使用方法:

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

 

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

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:运用@media实现网页自适应中的几个关键分辨率

下一篇:响应式web设计之@media