Permalink
Browse files

jsconsole 的基本样式

  • Loading branch information...
1 parent dc70ec4 commit a6b717531154fb1f6a57c7d0a52e832243b51584 @sunnylost committed Nov 6, 2013
Showing with 78 additions and 0 deletions.
  1. +54 −0 console/console.css
  2. 0 console/console.js
  3. +24 −0 console/index.html
View
@@ -0,0 +1,54 @@
+* {
+ margin: 0;
+ padding: 0;
+}
+
+.console-wrap {
+ font: 12px MicrosoftYaHei, sans-serif;
+ position: absolute;
+ width: 100%;
+}
+
+.console-input {
+ font-size: 1.5em;
+ width: 99%;
+ height: 2em;
+ line-height: 2em;
+ padding: 5px 0 5px 1%;
+ overflow: hidden;
+ background: #E6E8F2;
+ box-shadow: rgba(0, 0, 0, 0.298039) 0px 2px 10px;
+}
+
+.console-input:focus {
+ outline: none;
+}
+
+/* result list */
+.console-result {
+ list-style: none;
+ overflow: hidden;
+}
+
+/* Tool bar */
+.console-toolbar {
+ list-style: none;
+ overflow: hidden;
+ height: 3em;
+ font-size: 1.4em;
+ padding-top: 5px;
+}
+
+.console-toolbar li {
+ float: left;
+ padding: 5px 10px;
+ margin-left: 5px;
+}
+
+.console-toolbar li:hover,
+.console-toolbar .active {
+ background: #ccc;
+ color: #fff;
+ cursor: pointer;
+ border-radius: 10px;
+}
View
No changes.
View
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>JS Console</title>
+ <link rel="stylesheet" type="text/css" href="console.css">
+ </head>
+ <body>
+ <div class="console-wrap">
+ <div class="console-input" contenteditable></div>
+ <ul class="console-result"></ul>
+ <ul class="console-toolbar">
+ <li data-type="all" class="active">All</li>
+ <li data-type="errors">Errors</li>
+ <li data-type="warnings">Warnings</li>
+ <li data-type="logs">Logs</li>
+ <li data-type="debugs">Debugs</li>
+ <li data-type="debugs">Clear</li>
+ </ul>
+ </div>
+
+ <script type="text/javascript" src="console.js"></script>
+ </body>
+</html>

0 comments on commit a6b7175

Please sign in to comment.