首页 > > 网页制作 > css >

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

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

提前声明：笔者自学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>