有些网友对 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. XSS完全解决方案

    xss 为什么不能阻止用户输入不安全数据 比如用户想发一篇标题的文章 1+1>2吗? 为什么不在数据库存的时候就处理好或者接口里处理好 1<2 会被转义为 1<2,放到html中确实 ...

  2. stat()，lstat()，fstat() 获取文件/目录的相关信息

    stat 的使用 Linux有个命令,ls -l,效果如下: 这个命令能显示文件的类型.操作权限.硬链接数量.属主.所属组.大小.修改时间.文件名.它是怎么获得这些信息的呢,请看下面的讲解. stat ...

  3. compass模块----Utilities----Sprites精灵图合图

    css雪碧图又叫css精灵或css sprite,是一种背景图片的拼合技术.使用css雪碧图,能够减少页面的请求数.降低图片占用的字节,以此来达到提升页面访问速度的目的.但是它也有令人诟病的地方,就是 ...

  4. 安卓状态栏通知Status Bar Notification

    安卓系统通知用户三种方式: 1.Toast Notification 2.Dialog Notification 3.Status Bar Notification Status Bar Notifi ...

  5. linux虚拟机centos64位_6.5+VM10安装oracle11g图文详解

    注意: vi基本命令:i--编辑状态  退出编辑并保存时先按ESC键,再按符合“:wq”或者":x"即可注意每个步骤时的当前用户,是root还是oracle 以root用户登录虚机 ...

  6. 线段树练习 codevs 1080

    /* codevs 1080 线段树练习 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 钻石 Diamond 题解 查看运行结果 题目描述 Description 一行N个方格,开 ...

  7. 关于(x&y)+((x^y)>>1)的探究

    今天在程序员面试宝典上看到 int f(int x int y ) { return (x&y)+((x^y)>>1) } f(729,271) 结果为500 从式子中可以看出分为 ...

  8. I/O复用-epoll模型

    epoll函数 epoll函数的使用与select.poll上有很大的差异. epoll使用一组函数来完成任务,而不是单个函数. epoll把用户关心的文件描述符上的事件放在内核里的一个事件表中,从而 ...

  9. 优化PHP代码的40条建议（转载）

    [size=5][color=Red](译文)优化PHP代码的40条建议[/color][/size] 40 Tips for optimizing your php Code 原文地址:http:/ ...

  10. kafka相关应用

    一.kafka官网地址 http://kafka.apache.org 下载地址: http://kafka.apache.org/downloads.html 二.版本 0.9.0.1 is the ...