기초 목록
재 HTML 中，无序列表 (<ul>) 实例如下:<ul>) 实例如下:
<ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</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
<ul >
< /ul>结果:🎜목록 항목🎜 🎜목록 항목🎜 🎜목록 항목🎜 🎜🎜
<li>목록 항목</li>
<li>목록 항목</li> < ;li>목록 항목</li>
<li>목록 항목</li>< /ul>结果:
- 목록 항목
圆圈标识符
🎜재 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="no-bullet"> <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="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>🎜🎜🎜运行实例 »🎜🎜点击 "运行实例"符🎜如果你不需要标识符，你可以使用 .no -bullet 类：🎜🎜🎜实例🎜🎜rrreee🎜🎜🎜运行实例 »🎜🎜点击 "运行实例" 按钮查看在线实例🎜🎜🎜如果你需要添加一个平的列表，可以에서
< /code> 上添加 .list-inline 类:🎜🎜🎜实例🎜🎜rrreee🎜🎜🎜运行实例 »🎜🎜点击 "运行实例" 按钮查看线实例🎜🎜
목록 메뉴
일부 웹페이지에는 목록 메뉴가 필요할 수 있습니다.
HTML에서 목록 메뉴는 순서가 지정되지 않은 목록과 동일하게 정의됩니다<ul>. 예:
<ul>
<li>< ㅋㅋㅋ li> <a
href="#">메뉴 1</a>
</li> < 리> <a href="#">메뉴 2</a>
</li& ;
<li><a href="#">메뉴 3</a>
< /li></ul>결과:Home메뉴 1 u 2 메뉴 3
가로 메뉴를 추가해야 하는 경우 <ul> 上添加 .list-inline 클래스:
