瀏覽代碼

More css tweaks

Lily Carpenter 10 年之前
父節點
當前提交
6caea8798c
共有 2 個文件被更改,包括 29 次插入5 次删除
  1. 24 0
      www/css/app.css
  2. 5 5
      www/index.html

+ 24 - 0
www/css/app.css

@@ -1,4 +1,26 @@
1
+.new_note_form {
2
+  margin: 10px;
3
+  padding: 5px;
4
+  background-color: lightgrey;
5
+  color: navy;
6
+  border-color: black;
7
+  border: 1px solid;
8
+  text-align: center;
9
+  margin-left: auto;
10
+  margin-right: auto;
11
+  width: 300px;
12
+}
13
+
14
+h1 {
15
+  text-align: center;
16
+}
17
+
18
+.new_note_form h2 {
19
+  margin-top: 0px;
20
+}
21
+
1 22
 .note {
23
+  float: left;
2 24
   margin: 10px;
3 25
   padding: 5px;
4 26
   background-color: lightgrey;
@@ -13,7 +35,9 @@
13 35
 }
14 36
 
15 37
 .note .body {
38
+  padding: 3px;
16 39
   background-color: grey;
40
+  color: white;
17 41
 }
18 42
 
19 43
 .note h3 {

+ 5 - 5
www/index.html

@@ -6,17 +6,17 @@
6 6
   <body>
7 7
     <div ng-controller="NoteCtrl">
8 8
       <h1>Notes</h1>
9
-      <div class="note" ng-repeat="note in notes">
10
-        <h3>{{note.title}}</h3>
11
-        <p class="date" ng-if="note.createdDate">Created: {{note.createdDate | date:'medium'}}</p>
12
-        <p class="body">{{note.body}}</p>
13
-      </div>
14 9
       <div class="new_note_form">
15 10
         <h2>New note </h2>
16 11
         <p><input ng-model="newNote.title" /></p>
17 12
         <p><textarea ng-model="newNote.body"></textarea></p>
18 13
         <p><input type="submit" ng-click="createNote(newNote)" /></p>
19 14
       </div>
15
+      <div class="note" ng-repeat="note in notes">
16
+        <h3>{{note.title}}</h3>
17
+        <p class="date" ng-if="note.createdDate">Created: {{note.createdDate | date:'medium'}}</p>
18
+        <p class="body">{{note.body}}</p>
19
+      </div>
20 20
     </div>
21 21
     <script src="lib/angular/angular.js"></script>
22 22
     <script src="js/app.js"></script>