~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
开发工具与关键技术:VS 与bootstrap
作者:梁英豪
撰写时间:2019年6月8日
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
创造一个各人的登录页面
自从开学以来,就已经接触前段的内容了。前端内容丰富多彩,但是前提是要真正的了解和会应用,才是问题的所在。开始到现在我都没有好好的去搭页面了。老是对着了解的样式打。到现在才发现没什么意思,这样只是害到了自己。但是这次是一个接着一个的代码拼接成的登录页面,虽然是丑了点,但是有意义所在。
知道是怎么搭的页面吧!是不是看起来很简单、很容易、很简陋。对的。这可能是本人的技术问题,没能搭到很好的页面,但是步骤还是不能漏。这次试用的是网格布局。网格布局就一定离开bootstrap这个插件的作用啦!
第一步就是找到最大的容器。这样就能把整个身体装进去了,我用的是这个容器。这个容器可以让里面的文本居中显示在页面上。然后在后面加-fluid的就是让页面铺满的。然后一行12个格子,按照4、8分布。4格子这部分存放LoGo面区。8格子这部分放登录内容区。我这次就不把LoGo区放出来了。请谅解。
第二步就是内容区布置。布置内容有很多。如:输入框这些都是要一个一个的调整出来。但是经历很多次的失败教诲,最终才能得到一点点回报。失败原因是定位多、容器是按照宽度和高度给的,稍微加一点点东西就会变化、名称也是一个容器一个名称。最终得到了只要做出了一个容器就可以复制跟其他的一样了,稍微改一下就可以。
这样就能把简单的登录输入内容框的部分完成了。