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.
<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.
Then I place an image on it. Wrapping it by a div makes it be able to be placed in the middle.
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.
Items’ height can not be ignored.
Why is there a border surrounding the text field? Hide it with border and outline .
At last, place two buttons at the bottom.
Oh, there are filleted corners. CornerRadius becomes border-radius in css.