CSS框架 ui 有哪些

html-css013

CSS框架 ui 有哪些,第1张

精致的 CSS UI 框架：

1、Bootstrap – 最流行的Web前端UI框架

2、jQuery UI - 基于jQuery的开源Javascript框架

3、jQuery UI Bootstrap

4、BootMetro - Metro风格的CSS框架

5、Flat UI - 扁平风格 UI 工具包

6、网易CSS框架 NEC

7、Alloy UI – 功能强大的CSS UI框架

8、Cardinal – 移动端的CSS UI框架

9、快速开发CSS的框架 CSScaffold

10、后台UI开发框架 MuseUI

这个嘛，我觉得最好用的是自己的习惯，自己总结一下是最好用的了，下面给你一个我默认设置的一些样式，以及部分使用方法。

/*清除默认样式，和定义一般a标签的颜色*/

*{ margin:0pxpadding:0px}

img{ border:none}

a{ text-decoration:nonecolor: #333333}

a:hover{ text-decoration:nonecolor: #a43130}

li{ list-style: none}

.clear{ clear:both}

/*定义浮动，和大模块居中，文本居中，字体设置，网站常见字体颜色等等*/

.fl{ float: left}

.fr{ float: right}

.fr.fl{display:inline}

.mauto{ margin: 0 autowidth: 1200px}

.txt_c{ text-align: center}

.f12,.f14,.f16,.f18,.f20,.f24{ font-weight: normalcolor: #333333font-family: "Microsoft YaHei","微软雅黑"}

.f12{ font-size: 12pxfont-family: "Microsoft YaHei","微软雅黑"}

.f14{ font-size: 14px}

.f16{ font-size: 16px}

.f18{ font-size: 18px}

.f20{ font-size: 20px}

.f24{ font-size: 24px}

.red{ color: #8d2c2b}

可以根据网页需要适当修改，这个整理的不算完美，但是大部分的css都省去了，建议楼主使用HBuilder软件，这个软件有一个好处，就是你只需要写class名字就可以了，配合这个css表，你可以事半功倍。例如我打出： .mauto.f12.txt_c 再按下tab键，这就生成了一个居中的div，并且字体是12号微软雅黑，文本还居中。这笔dw用的舒服太多了。

楼主还可以做一个新版的表，可以参考emmet写css的模糊识别做class名字，做一个更加完善的css框架。这个也是HBuilder整合的功能。

例如css括号内： tc 按下tab键 就生成了， text-align: center，我们只要把模糊的主拼当做class，这个框架搭建起来会把所有的重复代码降低60-70%。前面的只需要写class名字就可以完成很大一部分排版。

/*模糊匹配，HBuilder生成的css属性

oh overflow: hidden

bg#aaa background: #aaa

h89height: 89px

lh8e line-height: 8em

l4 left: 4px

tc text-align: center

fwn font-weight: normal

cl clear: both

m5 margin: 5px

mt5margin-top: 5px

lsnlist-style: none

pr5padding-right: 5px

porposition: relative

poaposition: absolute

tdntext-decoration: none

ti2e text-indent: 2em

fl float: left

zi999 z-index: 999

* */