有些网友对 Smart Framewok 中的 Sample 示例的样式比较感兴趣。由于本人对前端不太精通，但为了满足网友们的需求，只好献丑了。

以下这个简陋的 CSS 样式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
* {
    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 */
}

示例一：列表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<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>

示例二：表单

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<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>
 

一个简陋的 CSS 样式的更多相关文章

  1. 一个有意思的CSS样式库--BUTTONS

    我最近发现了一个有意思的CSS样式库,和Bootstrap相似,但是它是专门的一个高度可定制的,免费的并且开源的按钮CSS样式库,这里附上它的网址:http://www.bootcss.com/p/b ...

  2. 在input中右边加上一个图标的css样式

    https://blog.csdn.net/ffggnfgf/article/details/43384527

  3. css样式-ime-mode text-transform

    今天遇到一个新的css样式: ime-mode   text-transform  有效小作用 取值:auto : 默认值.不影响ime的状态.与不指定 ime-mode 属性时相同 active : ...

  4. css样式表的知识点总结

    css总的来说有三种css样式可供选择: 1,行内样式表 行内样式表,直接写在了html文件的元素中,例如: <div style="color:red;"></ ...

  5. 关于css样式加载的问题

    今天我在学习jQuery的addClass操作时遇到了一个小问题,想来跟大家分享一下,避免初学者踩坑. 我的需求是制作一个表格,并让它隔行换色,在此基础上再加上鼠标悬浮变色的效果.(主要训练jQuer ...

  6. CSS样式表------第一章：样式表的基本概念

    CSS(Cascading Style Sheets,层叠样式表),控制页面样式外观,作用是美化HTML网页. 一. 样式表的基本概念 1.样式表的分类 (1)内联样式表  -----放在元素的开始标 ...

  7. css样式表---样式表分类、选择器

    一.样式表分三类: 1.内联样式表.——放在元素的开始标记中.——只对当前元素起作用.<input name="txt" style="border:0px; bo ...

  8. 外部式css样式，写在单独的一个文件中

    外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中,这个css样式文件以“.css”为扩展名,在<head>内(不是在<style>标签内)使用<l ...

  9. HTML&CSS基础学习笔记1.28-给网页添加一个css样式

    CSS是什么? 当HTML配合CSS一起使用时,我们发现页面变得好看了很多.那么CSS到底是什么呢? CSS指层叠样式表 (Cascading Style Sheets),它主要是用于定义HTML标签 ...

随机推荐

  1. ASP.NET简单文件上传

    一>使用FileUpload控件,将其拖入页面: <%@ Page Title="hehe" Language="C#" MasterPageFil ...

  2. (转)iOS7界面设计规范(11) - UI基础 - 图标与图形

    不知别人如何,我自己来讲,平时很习惯很有动力去做的一些事,譬如博客吧,一旦生活中出现一些让自己很难受的状况,就很容易受到影响:像是,你平时所习惯的生活状态都是基于某种东西的,一旦这种东西崩塌,会影响到 ...

  3. 【ArcGIS 10.2新特性】ArcGIS Online新特性（上）

    概述 7月,ArcGIS Online发布了很多更新.主要内容有:新的网站设计,增强了Web制图,数据分析,应用程序创建,以及机构管理等功能. 更新的大致内容总结如下: 地图查看器:新的分析工具.获取 ...

  4. [Cycle.js] The Cycle.js principle: separating logic from effects

    The guiding principle in Cycle.js is we want to separate logic from effects. This first part here wa ...

  5. C#语法糖: 扩展方法(常用)

    今天继续分享C#4.0语法糖的扩展方法,这个方法也是我本人比较喜欢的方法.大家先想想比如我们以前写的原始类型不能满足现在的需求,而需要在该类型中添加新的方法来实现时大家会怎么做.我先说一下我没有学习到 ...

  6. 1、Spark 通过api，hfile两种形式获取hbase数据，简单样例

    pom内容: <dependency> <groupId>org.apache.hbase</groupId> <artifactId>hbase-se ...

  7. Codeforces Round #302 (Div. 1)

    转载请注明出处: http://www.cnblogs.com/fraud/          ——by fraud A. Writing Code Programmers working on a ...

  8. GDB调试一

    http://blog.csdn.net/haoel/article/details/2881 GDB主要调试的是C/C++的程序.要调试C/C++的程序,首先在编译时,我们必须要把调试信息加到可执行 ...

  9. Linux下运行C++程序出现"段错误(核心已转储)"的原因

    今天写程序出现了“段错误(核心已转储)"的问题,查了一下资料,加上自己的实践,总结了以下几个方面的原因. 1.内存访问出错  这类问题的典型代表就是数组越界. 2.非法内存访问 出现这类问题 ...

  10. redis之lua脚本

    背景介绍 redis数据库提供了一些管理功能比如 流水线:打包发送多条命令,并在一个回复里面接收所有被执行命令的结果.事务:一次执行多条命令,被执行的命令要么就全部都被执行,要么就一个也不执行.并且事 ...