手册目录
Foundation 教程
Foundation 网格
Foundation 参考手册
在 HTML 中，无序列表 (<ul>) 实例如下:
结果:
List item
List item
List item
List item
在 Foundation 中，无序列表 (<ul>) 的前缀符号为圆圈，使用 .circle 类，实例如下:
<!DOCTYPE html> <html> <head> <title>Foundation 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css"> <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script> <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script> <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script> </head> <body style="padding:20px"> <h2>圆圈标识符列表</h2> <ul class="circle"> <li>List item</li> <li>List item</li> <li>List item</li> <li>List item</li> </ul> </body> </html>
点击 "运行实例" 按钮查看在线实例
方块标识符前缀使用 .square 类:
<!DOCTYPE html> <html> <head> <title>Foundation 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css"> <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script> <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script> <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script> </head> <body style="padding:20px"> <h2>方块标识符列表</h2> <ul class="square"> <li>List item</li> <li>List item</li> <li>List item</li> <li>List item</li> </ul> </body> </html>
点击 "运行实例" 按钮查看在线实例
如果你不需要标识符，你可以使用 .no-bullet 类：
<!DOCTYPE html> <html> <head> <title>Foundation 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css"> <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script> <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script> <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script> </head> <body style="padding:20px"> <h2>无标识符列表</h2> <ul class="no-bullet"> <li>List item</li> <li>List item</li> <li>List item</li> <li>List item</li> </ul> </body> </html>
点击 "运行实例" 按钮查看在线实例
如果你需要添加一个水平的列表，可以在 <ul> 上添加 .list-inline 类:
<!DOCTYPE html> <html> <head> <title>Foundation 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css"> <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script> <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script> <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script> </head> <body style="padding:20px"> <h2>无标识符列表</h2> <ul class="no-bullet"> <li>List item</li> <li>List item</li> <li>List item</li> <li>List item</li> </ul> </body> </html>
点击 "运行实例" 按钮查看在线实例
一些 Web 页面可能需要列表菜单。
在 HTML 中，列表菜单同无序列表 <ul> 来定义，例如:
结果:
Home
Menu 1
Menu 2
Menu 3
如果你需要添加一个水平的菜单，可以在 <ul> 上添加 .list-inline 类:
<!DOCTYPE html> <html> <head> <title>Foundation 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css"> <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script> <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script> <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script> </head> <body style="padding:20px"> <h2>内联列表</h2> <ul class="inline-list"> <li><a href="#">Home</a></li> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 2</a></li> <li><a href="#">Menu 3</a></li> </ul> </body> </html>
点击 "运行实例" 按钮查看在线实例
相关视频
科技资讯
24小时阅读榜
1
2
3
4
5
6
7
8
9
10
精品课程
共5课时 | 17.4万人学习
共49课时 | 78.2万人学习
共29课时 | 62.5万人学习
共25课时 | 39.8万人学习
共43课时 | 73.8万人学习
