登录框css布局

背景

可以用background的图片

也可以用一个div,然后position:absolute,left和top都为0,如果为了避免滚动,在上级元素添加overflow

logo

位置选择:

  • 左上
    • position:absolute,top:10px,left:10px;
  • 右上
    • 同理
  • 登录框上
    • 和登录框放在同一个div中

主框

div包裹,为了实现居中位置

css{position:absolute,top:50%,left:50%,margin-top:-半个登录框高,margin-left:-半个登录框长}

图标的实现,使用span插入,或者div中插入background-image然后文字加margin-left

分割线

竖直:一个带background color的span

水平 hr或者同上

footer

1
2
3
4
5
.footer{
  position:absolute;
  bottom:10px;
  text-align:center;
}