microsoft/frontend-bootcamp
1
0
Fork 0
mirror of https://github.com/microsoft/frontend-bootcamp.git synced 2026-01-26 14:56:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

step 2 updates

Browse Source
This commit is contained in:
Micah Godbolt
2019-02-08 15:52:20 -08:00
parent 6d1f93c441
commit df6f302623
2 changed files with 60 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
step02/index.html
View File

@@ -1,20 +1,28 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<link rel="stylesheet" href="./style.css"> <link rel="stylesheet" href="./style.css" />
<body> <body>
<h1>todos</h1> <h1>todos</h1>
<input class="textfield" /><button class="button add">Add</button> <input class="textfield" /><button class="button add">Add</button>
<div class="filter"> <div class="filter">
<button>all</button> <button class="active">all</button>
<button>active</button> <button>active</button>
<button>completed</button> <button>completed</button>
</div> </div>
<ul class="todos"> <ul class="todos">
<li class="todo"><input type="checkbox" /> Todo 1</li> <li class="todo">
<li class="todo"><input type="checkbox" /> Todo 2</li> <label><input type="checkbox" /> Todo 1</label>
<li class="todo"><input type="checkbox" /> Todo 3</li> </li>
<li class="todo"><input type="checkbox" /> Todo 4</li> <li class="todo">
<label><input type="checkbox" /> Todo 2</label>
</li>
<li class="todo">
<label><input type="checkbox" /> Todo 3</label>
</li>
<li class="todo">
<label><input type="checkbox" /> Todo 4</label>
</li>
</ul> </ul>
<footer><span>4 items left</span> <button>Clear Completed</button></footer> <footer><span>4 items left</span> <button class="button">Clear Completed</button></footer>
</body> </body>
</html> </html>

51
step02/style.css
View File

@@ -1,7 +1,46 @@
body { body {
width: 400px; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
margin: 20px auto; width: 400px;
} margin: 20px auto;
h1 { }
text-align: left; h1 {
} text-align: center;
}
.textfield {
width: 80%;
}
.add {
margin-left: 5%;
}
.button {
border: none;
padding: 5px 10px;
}
.filter {
margin: 10px 0 0;
}
.filter button {
background: transparent;
border: none;
}
.filter .active {
border-bottom: 2px solid blue;
}
.todos {
list-style: none;
padding: 0;
}
footer {
display: flex;
}
footer span {
flex-grow: 1;
}