El marco Foundation CSS es un marco front-end que combina HTML y CSS, así como herramientas, funciones y controles adicionales, para crear un entorno de diseño flexible. El marco fue creado por la fundación ZURB en septiembre de 2011 y le permite crear sorprendentes sitios web, aplicaciones y correos electrónicos receptivos que se ven geniales en cualquier dispositivo. En este artículo, veamos cómo crear listas ordenadas.
Una lista ordenada es una colección de objetos en la que el orden de los contenidos es importante. Una lista de números es otro nombre para una lista ordenada. En el método de numeración, podemos usar números arábigos, números romanos o letras para determinar el orden. La etiqueta de lista ordenada o <ol> se usa para hacer una lista ordenada.
Clase de listas ordenadas de tipografía básica CSS de Foundation: no se requiere una clase específica para crear una lista ordenada.
Sintaxis:
<ol>
<li> ... </li>
<li> ... </li>
....
</ol>
Ejemplo 1: En este ejemplo, se utilizan números para determinar el orden.
HTML
<!DOCTYPE html> <html> <head> <title>Foundation CSS Base Typography Ordered Lists</title> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" /> <script src= "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"> </script> <script src= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js"> </script> </head> <body> <h1 style="color: green">GeeksforGeeks</h1> <h3>Foundation CSS Base Typography Ordered Lists</h3> <ol> <li style="color: green" class="subheader"> Web technologies used in web development: </li> <ol> <li>HTML</li> <li>CSS</li> <li>JAVASCRIPT</li> <li>PHP</li> <li>BOOTSTRAP etc...</li> </ol> </ol> <script type="text/javascript"> $(document).foundation(); </script> </body> </html>
Producción:
Foundation CSS Tipografía base Listas ordenadas
Ejemplo 2: En este ejemplo, se utilizan números romanos para determinar el orden.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Foundation CSS Base Typography Ordered Lists</title>
<link rel="stylesheet"
href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" />
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js">
</script>
<!-- Set the type of the ordered list to upper-roman -->
<style>
ol {
list-style-type: upper-roman;
}
</style>
</head>
<body>
<h1 style="color: green">GeeksforGeeks</h1>
<h3>Foundation CSS Base Typography Ordered Lists</h3>
<ol>
<li style="color: green" class="subheader">
Web technologies used in web development:
</li>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JAVASCRIPT</li>
<li>PHP</li>
<li>BOOTSTRAP etc...</li>
</ol>
</ol>
<script type="text/javascript">
$(document).foundation();
</script>
</body>
</html>
Producción:
Foundation CSS Tipografía base Listas ordenadas
Referencia: https://get.foundation/sites/docs/typography-base.html#ordered-lists
Publicación traducida automáticamente
Artículo escrito por isitapol2002 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA