首先搭建基本机构：
<div id="menu">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">年表</a></li>
<li><a href="#">作品</a></li>
<li><a href="#">文章</a></li>
<li><a href="#">画廊</a></li>
<li><a href="#">留言</a></li>
<li><a href="#">地图</a></li>
</ul>
</div>
这时候看到的一个纵列文字前带圆点的列表
然后用css进行美化：
#menu {
background-color: #6282ac
height: 35px
width: 570px
position: relative
}
定义菜单的宽，高，颜色及定位方式。
#menu ul {
list-style-type: none
}
去掉文字下划线。
#menu li {
float: left
display: block
width: 60px
height: 31px
margin-top: 2px
margin-right: 6px
margin-bottom: 2px
margin-left: 6px
line-height: 31px
text-align: center
background-repeat: repeat-x
border: 1px solid #FFFFFF
}
定义“float: left”使列表项横向排列，设置高与行高使链接文字垂直居中。
menu a {
font-family: Arial, Helvetica, sans-serif
font-size: 10px
background-image: url(../images/b.gif)
display: block
background-repeat: repeat-x
}
定义链接的字体及背景
#menu a:hover{
background-image: url(../images/a.gif)
display: block
background-repeat: repeat-x
}
定义a的伪类实现鼠标点击时的背景变化
这些前端框架能为您提供以下好处：跨浏览器：前端框架都在不同的浏览器测试通过。
一致性： UI 组件，如导航，按钮，标签，表单，下拉菜单，表格... 他们的风格都相互统一。
快速开发：您可以轻松，快速的构建一个布局。他们通常有代码片段和优秀的文档。
响应式：所有 CSS 组件和 Javascript 插件能够从桌面扩展到移动端。
InK
Ink 是一个用于快速开发 Web 界面的 UI 套件，简单易用和。它通过整合 HTML，CSS 和 JavaScript 来提供现代化的解决方案，构建布局，显示通用的界面元素，为你的用户实现内容为中心的和用户友好的互动功能。
HTML &CSS 组件：布局，导航，排版，图标，表格，提醒，表单。
JavaScript 组件：画廊，模态窗口，表格，可排序的日期选择器，选项卡，表单验证，行为（停靠，折叠，关闭）。
其它特性：支持 Sass 混入。
GroundworkCSS
GroundworkCSS 灵活的网格系统使你能够快速开发，并能够适应任何屏幕尺寸，从手持设备到大尺寸的显示屏。GroundworkCSS 构建在强大的 CSS 预处理器 Sass 的基础上。Sass 是对 CSS3 的扩展，并添加了嵌套规则，变量，混入，选择器继承等等众多特性。使用命令行工具或 Web 框架插件可以转换为标准的 CSS 代码。
HTML &CSS 组件：网格，布局，排版，按钮，瓷砖，表格，表格，图示，社会的图标，响应文本，消息，警报。
JavaScript 组件：导航，标签，工具提示。
其它特性：支持 Sass 混入。
Ivory
灵活，强大的响应式 Web 框架，使 Web 开发更快，更容易。支持 1200 像素到 320px 区间的响应式布局。
HTML &CSS 组件：网格，排版，表单，按钮，提醒，分页，面包屑，列表，表格。
JavaScript 组件：工具提示，选项卡，切换开关，手风琴。
Foundation
Foundation 是由加利福尼亚州的产品设计公司 Zurb 推出的。这是目前最先进的响应式前端框架，它有很多的模板布局，UI 组件的 CSS 样式，也收录了很多他们自己的 JavaScript 插件。
HTML &CSS 组件：网格布局模板，图标，字体，响应式表格，SVG 社交图标，分页，面包屑，边栏导航，按钮，字体，标签，提醒，面板，价格表，进度条，表格，缩略图。
JavaScript 组件：下拉按钮，分割按钮，开关，自适应视频，灯箱，下拉列表，导航，显示模态窗口，选项卡，工具提示。
其他特性：自定义皮肤的表单，SCSS 混入。
Grumby
Gumby 2 基于强大的 Sass 构建，Sass 是一个功能强大的 CSS 预处理器，这使我们能够快速的开发自己的 Gumby，并为您提供新的工具，让你能够在 Gumby 的框架基础上快速定制。
HTML &CSS 组件：网格，表单，按钮，导航，标签，Entypo 图标。
JavaScript 组件：切换开关，下拉框，选项卡，模态窗口。
其他特性：自定义皮肤的表单，SASS &Compass。
HTML KickStart
超精益的 HTML5，CSS &JS 模块，用于快速网站制作。它有一个全面的 UI 组件，也有一些有用的 JavaScript 插件，它的目标是成为设计师的朋友。
HTML &CSS 组件：网格，排版，按钮，按钮条，列表，表格，图标，面包屑，图像，表格。
JavaScript：菜单，工具提示，语法高亮，选项卡，幻灯片，表单验证。
其他特性：额外的 CSS 工具。
Maxmertkit
这个框架是由 Vetrenko Maxim Sergeevich 创建的，使程序员的生活更轻松。Maxmerkit 是基于部件修改器编码风格的一个 CSS 框架。
HTML &CSS 组件：网格布局，typograpghy，徽章，按钮，插入符，表格，图标，标签，菜单，进度表，下拉菜单，工具提示。
JavaScript 组件：按钮，转盘，模态窗口，通知，弹出层，选项卡，滚动侦测。
其他特性：支持 Sass, Coffee Script。
Twitter Bootstrap
Bootstrap 是基于 HTML，CSS 和 JavaScript 的简洁灵活的流行前端框架及交互组件集，由微博的先驱 Twitter 在2011年8月开源的整套前端解决解决方案。Bootstrap 有非常完备和详尽的开发文档，Web 开发人员能够轻松搭建出清爽风格的界面以及实现良好的交互效果。
HTML &CSS 组件： 网格，布局，排版，代码，表格，表单，按钮，图像，图标，按钮组，导航，面包屑，分页，选项卡，徽章，缩略图，提醒，进度条。
JavaScript 组件： 过渡，模态窗口，下拉框，滚动检测，标签，工具提示，弹出层，警报，按钮，手风琴，旋转木马，自动补齐。
其它特性： 支持定制， LESS CSS。
Skeleton
Skeleton 是一个小集合的 CSS 文件，可以帮助你迅速开发任何尺寸，外观漂亮的网站，例如用于 17 寸笔记本电脑屏幕或 iPhone 屏幕的。Skeleton 建立在三个核心原则之上：兼容移动端的响应式网格，快速入门，风格无关。Skeleton 对于大多数开发者是一个相当不错的选择，因为它是轻量级的且易于使用。
HTML &CSS 组件： 网格，排版，按钮，表单，媒体查询。
Kube
Kube 是由 imperavi （他也是著名的 Redactor 编辑器的作者）发布的前端框架，以使设计者/开发者的生活更轻松。简约而不简单，适应性和响应式能够使用各种需求。革命性的灵活网格和漂亮的印刷字体，没有任何强加的样式。
HTML &CSS 组件：排版，表单，网格，表格，按钮，导航，图标。
JavaScript 组件： 按钮，标签。
其它特性：支持 LESS CSS。
Helium
Helium 是一种前端响应式 Web 开发框架，用于 HTML5 和 CSS3 项目的快速原型设计和实际开发。它在许多方面与 Twitter Bootstrap 和 ZURB Foundation 相似。然而，不同于这两个框架的是，Helium 的目的是要更轻量，更容易更改。把它看成是一个典型的汽车，在那里你可以打开引擎盖，容易对发动机进行改装。
HTML &CSS 组件： 网格，按钮，排版，表格。
JavaScript 组件： 下拉框，表单验证，模态窗口。
其它特性： 支持 SASS &Compass。
Markup
Markup 框架是一个布局，窗口小部件，排版样式和其他的 UI 组件的集合，可以根据自己的需要进行整合。
HTML &CSS 组件：布局，网格，排版，表格，按钮，标题，面包屑，消息，导航列表，导航菜单。
JavaScript 组件： 无 Javascript，纯 CSS。
Topcoat
Topcoat 是一个 CSS 集合，用于简洁和快速的 Web 应用程序开发。它是一个开源库，不需要任何 JavaScript 内置的用户界面元素。
HTML &CSS 组件： 图标，字体，按钮，面包屑，按钮栏，表格，下拉列表，滑动开关，标签，切换按钮，选择，滑块
JavaScript 组件： 无 Javascript ，纯 CSS
PureCSS
Pure 是一组轻量的，响应式的 CSS 模块，您可以使用在任何的 Web 项目中。充分考虑了移动设备中的使用，保持文件体积尽量小，每行 CSS 都进行了仔细的考虑。Pure 基于 Normalize.css 构建，并提供布局以及 原生 HTML 元素的风格，加上最常见的 UI 组件。相信这些都是你需要的。
HTML &CSS 组件： 网格，排版，表格，按钮，表格，菜单。
JavaScript 组件： 无 Javascript ，纯 CSS。
其它特性： 皮肤制作器，YU 库。
CSS无法控制滚动条的样式。这里推荐几块滚动条美化的插件给你。1. Windows：全屏窗口滚动插件
该插件可以很好地实现全屏滚动，每滚动一次即为一屏。比如，用户浏览下一屏幕内容时，只需手动滚动到某一位置，该插件会自动滚动显示下一屏全部内容。对于浏览类似于PPT的内容时比较实用。
2. Jquery Scroll Follow：滚动跟随插件
该插件可以使DOM对象随着页面的滚动而移动。你可以设置滚动的速度、偏移等参数。
3. 列表滚动插件
该插件可以为任意列表添加上滚动效果。你可以自定义列表的滚动方向和滚动速度。
4. Sly：灵活的基于ITEM的滚动插件
SLY提供了很多基于项目（如图像/内容画廊）的滚动选项，支持水平和垂直方向的无限滚动。
5. Coverscroll
仿苹果的CoverFlow设计，支持滚动条、鼠标滚轮和手势来滚动查看。
6. Sticky
该插件可以让你的页面中的任何元素在滚动过程中始终可见
7. Tiny Scrollbar：一个轻量级的JQUERY插件
8. Sticky Float：另一个滚动跟随插件
9. Page Scroller：漂亮实用的滚动导航
10. Custom Srollbar：自定义内容滚动条插件
11. Scroll Up：一个轻量级的滚动到顶部插件
