Welkin's Secret Garden

Web App with HTML and CSS

To catch up on the work of our group, I am scheduled to code for a login interface of a web app. For this is my first time to write html and css, I’d like to take some notes.

The final effect:

From my points of view, as an iOS developer, it has a gray background and there are two buttons and a tableView on it.

Firstly, I need some help of Bootstrap . Reading its Documentation , I find that there are plenties of components that can be used directly. No wonder it is so hot now. For the reason of quick access, I have downloaded it.

1
<link rel="stylesheet" href="css/bootstrap.min.css">

It is not that using Bootstrap and then I do not need to code for layout anymore, thus I create a css file and set the background color to gray.

1
2
3
4
5
6
body {
float: left;
width: 100%;
height: 100%;
background-color: #eeeeee;
}

Then I place an image on it. Wrapping it by a div makes it be able to be placed in the middle.

1
2
3
<div>
<img id="icon" src="images/pic_login.png" />
</div>

It’s time for “tableView”. Reading the documentation of bootstrap, I find list-group which is similar to tableView, and list-group-item that is similar to tableViewCell.

So just add an image and a text field to it.

1
2
3
4
5
6
7
8
9
10
<ul class="list-group">
<li class="list-group-item">
<img class="left-icon" src="images/ico_login_user.png">
<input id="username" type="text" name="username" placeholder="输入手机号">
</li>
<li class="list-group-item">
<img class="left-icon" src="images/ico_login_password.png">
<input id="password" type="password" name="password" placeholder="输入密码">
</li>
</ul>

Items’ height can not be ignored.

1
2
3
.list-group-item {
height: 55px;
}

Why is there a border surrounding the text field? Hide it with border and outline .

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.left-icon {
position: absolute;
float: left;
top: 18px;
height: 17px;
}

input {
position: absolute;
float: right;
top: 7px;
left: 40px;
right: 10px;
height: 40px;
border: none;
outline: none;
}

At last, place two buttons at the bottom.

1
2
3
4
<div id="button">
<button id="login-button" type="button" class="btn btn-default" onclick="login()">登录</button>
<button id="register-button" type="button" class="btn btn-default" onclick="location.href='/action/register'">没有账号?去注册</button>
</div>

Oh, there are filleted corners. CornerRadius becomes border-radius in css.

1
2
3
4
5
6
7
8
.btn.btn-default {
margin-left: 2.5%;
width: 95%;
height: 40px;
border-radius: 20px;
background-color: #FDB796;
color: white;
}

Finished.