有些网友对 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. JAVA模拟表单提交

    这是我网上搜的,自己使用也蛮方便,所以上传供大家分享. package wzh.Http;   import java.io.BufferedReader; import java.io.IOExce ...

  2. HTML浅识

    HTML相关======= ## 认识网页 *web标准(w3c三种标准):结构标准 -->html 表现标准 -->css 行为标准 -->js **浏览器和服务器:浏览器发送报文 ...

  3. linux系统批量无人值守安装

    一:批量无人值守安安装原理 利用DHCP TFTP FTP和PXE技术实现批量安装系统,首先在主server上安装好DHCP TFTP和FTP服务,client通过网卡的PXE技术获取到IP地址和TF ...

  4. [Redux] Extracting Presentational Components -- Footer, FilterLink

    Code to be refactored: let nextTodoId = 0; class TodoApp extends Component { render() { const { todo ...

  5. 利用JConsole工具监控java程序内存和JVM

    一.找到java应用程序对应的进程PI 性能测试应用程序访问地址:http://192.168.29.218:7070/training/ 部署的应用服务器为tomcat6.028 启动tomcat服 ...

  6. Paros抓包工具

    http://www.hackbase.com/article-1593-1.html http://www.baidu.com/s?ie=utf-8&f=3&rsv_bp=1& ...

  7. iOS的Bundle资源束制作

    在静态库的制作中,很多时候我们的静态库也是带着文件,图片和多媒体资源的. 若只是直接加入到项目中也是可以,但是,考虑到方便管理(方便插件使用者的管理),我们希望把插件的资源文件打成一个包来管理. 当然 ...

  8. int.Tryparse() 、int.parse()、Convert.To32() 的区别

    int.Tryparse()  Int32.TryParse(source, result)则无论如何都不抛出异常,只会返回true或false来说明解析是否成功,如果解析失败,调用方将会得到0值. ...

  9. Js与flash交互：在html页面中用js与MyReport插件交互

    Html页面与flash的加载 如下图,flash是html页面的一个插件节点. js与flash进行交互,首先要处理好html页面和swf的加载问题. Swf调用外部js方法,要确保js方法已存在, ...

  10. Android studio快捷键Mac版本

    为了方便大家记住这些小技巧和快捷键,我把它写成了一个插件,欢迎大家下载使用:http://chunsheng.me/EasyShortcut/ 快捷键 描述 通用------------------- ...