WEB前端Web前端之路Android开发经验谈

程序猿的那些事,你知道多少?

2017-11-13  本文已影响97人  我去_6aee

       总是听到同行的朋友一天最晚报怨,程序开发是一个苦B又烦索的工作,每次除了代码,还有无休止的bug,看着身边的人一个个高楼大厦住着,豪华轿车进进出出,换女朋友比换衣服还勤快,自己只能坐在电脑旁,敲打着键盘,看着冰冷的显示器改改删删,每天忙到深夜。其时,我想说的事,无论何事,只要用心,多想想,有时换个思路,你也会发现,这也行!不信,咱们往下看:

    一、  下面咱们以网上的那些登录 、注册的表单和按钮为例

<body>

<form action=" " method="get">

用户名:<input type="text" name="uname" placeholder="请输入用户名" id="uname"><br />

密    码:<input type="password" name="pass"  placeholder="请输入密码"><br />

</form>

<body>

运行程序:结果如下,

用户名:
密    码:

      二、为什么,自己做出来的东西,就是没别人美观,靓丽,报怨过来,报怨过去,又是写样式,改代码,结果,时时如水般的流走了,自己还在原地,一动不动。事实上,bootstrp为我们封装了CSS,我们只要把别人做好的东西嵌入到代码中去,只要两三钟的功夫,你就成大神了 !

      1、首先我们为表单规划一个组,让它在横向显示,在<form>添加类.form-group, 表示这个表单是一个组,form-inline在一行上显示

<div class="form-group form-inline">

   2、在用户名和密码的前面添加一个<label>,为用户名和密码框添加两个id名“uname”和“pass”——表示点击文字的时候,光标在文本框内显示,多用在移动开发端 

<div class="form-group form-inline">

<label for="uname">用户名:</label>

<input type="text" name="uname" placeholder="请输入用户名" id="uname"><br />

<label for="pass">密 码:</label>

<input type="password" name="pass"   placeholder="请输入密码" id="pass"><br/>

</div>

3、运行程序,结果如下:

用户名:
密 码:


4、在表单一下添加两个按钮:看看,有什么变化

<button type="submit" value="确定" class="btn btn-primary">确定</button>

<button  type="reset" value="刷新"  class="btn btn-warning">刷新</button>

确定刷新 

5、最后结果如图:(如果觉得不喜欢,我们还可以为两个按钮添加样式:margin间距  等,在这就不做演示)

用户名:
密 码:

确定刷新


      

上一篇 下一篇

猜你喜欢

热点阅读