创造一个各人的登录页面

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

开发工具与关键技术:VS 与bootstrap

作者:梁英豪

撰写时间:2019年6月8日

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

创造一个各人的登录页面

自从开学以来,就已经接触前段的内容了。前端内容丰富多彩,但是前提是要真正的了解和会应用,才是问题的所在。开始到现在我都没有好好的去搭页面了。老是对着了解的样式打。到现在才发现没什么意思,这样只是害到了自己。但是这次是一个接着一个的代码拼接成的登录页面,虽然是丑了点,但是有意义所在。

知道是怎么搭的页面吧!是不是看起来很简单、很容易、很简陋。对的。这可能是本人的技术问题,没能搭到很好的页面,但是步骤还是不能漏。这次试用的是网格布局。网格布局就一定离开bootstrap这个插件的作用啦!

第一步就是找到最大的容器。这样就能把整个身体装进去了,我用的是这个容器。这个容器可以让里面的文本居中显示在页面上。然后在后面加-fluid的就是让页面铺满的。然后一行12个格子,按照4、8分布。4格子这部分存放LoGo面区。8格子这部分放登录内容区。我这次就不把LoGo区放出来了。请谅解。

第二步就是内容区布置。布置内容有很多。如:输入框这些都是要一个一个的调整出来。但是经历很多次的失败教诲,最终才能得到一点点回报。失败原因是定位多、容器是按照宽度和高度给的,稍微加一点点东西就会变化、名称也是一个容器一个名称。最终得到了只要做出了一个容器就可以复制跟其他的一样了,稍微改一下就可以。

这样就能把简单的登录输入内容框的部分完成了。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值