有些网友对 Smart Framewok 中的 Sample 示例的样式比较感兴趣。由于本人对前端不太精通，但为了满足网友们的需求，只好献丑了。
以下这个简陋的 CSS 样式：
| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242 | * { border: 0; margin: 0; padding: 0; font-weight: normal; vertical-align: middle;} body { font-family: Verdana, sans-serif; font-size: 12px; margin: 0 auto; padding: 10px; width: 980px;} h1, h2, h3, h4 { font-weight: bold;} h1 { font-size: 18px;} h2 { font-size: 16px;} h3 { font-size: 14px;} h4 { font-size: 12px;} a,a:before,a:after { color: blue; text-decoration: underline;} a:hover { color: red;} input, select, textarea, button { font-family: inherit; font-size: 12px; outline: none;} textarea { resize: none; overflow-y: auto;} select { border: 1px solid #CCC; height: 30px; padding: 5px; width: 212px;} input[type="text"] { height: 18px;} input[type="text"],input[type="password"],textarea { border: 1px solid #CCC; padding: 5px; width: 200px;} input[type="text"]:focus,input[type="password"]:focus,textarea:focus,select:focus { border-color: #000;} input[type="file"] { border: 1px solid #CCC; padding: 3px 3px 4px 3px;} button { background-color: #EEE; border: 1px solid #CCC; cursor: pointer; height: 30px; padding: 5px; min-width: 30px;} button:hover:not(:disabled) { background-color: #DDD;} *:disabled { background-color: #FFF; cursor: not-allowed !important; opacity: 0.5;} .css-form { border: 1px solid #CCC;} .css-form-header { border-bottom: 1px solid #CCC; clear: both; height: 17px; padding: 10px;} .css-form-row { padding: 10px 20px;} .css-form-row label { cursor: pointer; float: left; padding-top: 8px; width: 100px;} .css-form-footer { border-top: 1px solid #CCC; padding: 10px;} .css-table { border: 1px solid #CCC; border-collapse: collapse; width: 100%; margin-bottom: 10px;} .css-table thead tr td { border-bottom: 1px solid #CCC; padding: 10px;} .css-table tbody tr:hover { background-color: #EEE;} .css-table tbody tr td { padding: 10px;} .css-panel { border: 1px solid #CCC;} .css-panel-header { border-bottom: 1px solid #CCC; clear: both; height: 17px; padding: 10px;} .css-panel-content { clear: both; padding: 10px 10px 0 10px;} .css-left { float: left;} .css-right { float: right;} .css-row { clear: both; height: 30px; margin-bottom: 10px;} .css-row a { line-height: 30px;} .css-search { display: table;} .css-search-button { display: table-cell;} .css-search-button button { border-left: none; height: 30px;} .css-width-10 { width: 10px !important;} .css-width-25 { width: 25px !important;} .css-width-50 { width: 50px !important;} .css-width-75 { width: 75px !important;} .css-width-100 { width: 100px !important;} .css-blank-10 { display: inline-block; width: 10px;} .css-text-center { text-align: center;} .css-button-group { border: 1px solid #CCC; display: inline-block; padding-left: 5px;} .css-button-group button { border: 1px solid transparent; margin-left: -5px; width: 30px; /* IE9 */} |
示例一：列表
| 12345678910111213141516171819202122232425262728293031323334353637383940 | <div class="css-panel"> <div class="css-panel-header"> <div class="css-left"> <h3>Product List</h3> </div> <div class="css-right"> <a href="product_create.html">New Product</a> </div> </div> <div class="css-panel-content"> <div class="css-row"> <div class="css-left"> <form id="product_search_form" method="post"> <div class="css-search"> <input type="text" id="product_name" placeholder="Product Name"/> <span class="css-search-button"> <button type="submit">Search</button> </span> </div> </form> </div> <div class="css-right"> <div id="product_pager"></div> </div> </div> <table id="product_table" class="css-table"> <thead> <tr> <td>Product Type</td> <td>Product Name</td> <td>Product Code</td> <td>Price</td> <td>Description</td> <td class="css-width-75">Action</td> </tr> </thead> <tbody></tbody> </table> </div></div> |
示例二：表单
| 123456789101112131415161718192021222324252627282930313233 | <form id="product_create_form" method="post" class="css-form"> <div class="css-form-header"> <h3>Create Product</h3> </div> <div class="css-form-row"> <label for="product_type_id">Product Type:</label> <select id="product_type_id" name="productTypeId"> <option value="0"></option> <option value="1">Mobile Phone</option> <option value="2">Tablet Computer</option> </select> </div> <div class="css-form-row"> <label for="product_name">Product Name:</label> <input type="text" id="product_name" name="productName"/> </div> <div class="css-form-row"> <label for="product_code">Product Code:</label> <input type="text" id="product_code" name="productCode"/> </div> <div class="css-form-row"> <label for="price">Price:</label> <input type="text" id="price" name="price"/> </div> <div class="css-form-row"> <label for="description">Description:</label> <textarea id="description" name="description" rows="5"></textarea> </div> <div class="css-form-footer"> <button type="submit">Submit</button> <button type="button" id="cancel">Cancel</button> </div></form> |
