|
|
| Línia 1: |
Línia 1: |
| <div style=" display: flex; row; gap: 20px;"> | | ¡Claro! Aquí tienes un ejemplo de código para una página de MediaWiki con tres columnas: una tabla de contenido fija a la izquierda, el contenido principal en el centro y una plantilla fija a la derecha. |
| <div style=" flex: 1;left: 10px; top: 100px; width: 200px;max-width: 260px; top: 10px; padding: 10px; ">
| | |
| __TOC__ | | ```html |
| | <!DOCTYPE html> |
| | <html> |
| | <head> |
| | <style> |
| | body { |
| | display: flex; |
| | margin: 0; |
| | height: 100vh; |
| | } |
| | .toc { |
| | position: fixed; |
| | width: 200px; |
| | height: 100%; |
| | overflow: auto; |
| | background-color: #f9f9f9; |
| | border-right: 1px solid #ccc; |
| | } |
| | .content { |
| | flex: 1; |
| | margin-left: 200px; |
| | margin-right: 200px; |
| | padding: 20px; |
| | } |
| | .sidebar { |
| | position: fixed; |
| | right: 0; |
| | width: 200px; |
| | height: 100%; |
| | overflow: auto; |
| | background-color: #f9f9f9; |
| | border-left: 1px solid #ccc; |
| | } |
| | </style> |
| | </head> |
| | <body> |
| | <div class="toc"> |
| | <!-- Aquí va la tabla de contenido --> |
| | <h2>Tabla de Contenido</h2> |
| | <ul> |
| | <li><a href="#section1">Sección 1</a></li> |
| | <li><a href="#section2">Sección 2</a></li> |
| | <li><a href="#section3">Sección 3</a></li> |
| | </ul> |
| </div> | | </div> |
| <div style="flex: 2; "> | | <div class="content"> |
| <h2>Section 1</h2> | | <!-- Aquí va el contenido principal --> |
| <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> | | <h1>Contenido Principal</h1> |
| <h2>Section 2</h2> | | <h2 id="section1">Sección 1</h2> |
| <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> | | <p>Contenido de la sección 1...</p> |
| <h2>Section 3</h2> | | <h2 id="section2">Sección 2</h2> |
| <p>Content for section 3 goes here.</p> | | <p>Contenido de la sección 2...</p> |
| | <h2 id="section3">Sección 3</h2> |
| | <p>Contenido de la sección 3...</p> |
| </div> | | </div> |
| </div> | | <div class="sidebar"> |
| | <!-- Aquí va la plantilla fija --> |
| | <h2>Plantilla Fija</h2> |
| | <p>Contenido de la plantilla...</p> |
| | </div> |
| | </body> |
| | </html> |
| | ``` |
| | |
| | Este código crea una página con tres columnas: la tabla de contenido a la izquierda y la plantilla fija a la derecha no dependen del scroll de la pantalla. ¿ algo más en lo que pueda ayudarte? |
Revisió del 10:25, 29 gen 2025
¡Claro! Aquí tienes un ejemplo de código para una página de MediaWiki con tres columnas: una tabla de contenido fija a la izquierda, el contenido principal en el centro y una plantilla fija a la derecha.
```html
<!DOCTYPE html>
<html>
<head>
<style>
body {
display: flex;
margin: 0;
height: 100vh;
}
.toc {
position: fixed;
width: 200px;
height: 100%;
overflow: auto;
background-color: #f9f9f9;
border-right: 1px solid #ccc;
}
.content {
flex: 1;
margin-left: 200px;
margin-right: 200px;
padding: 20px;
}
.sidebar {
position: fixed;
right: 0;
width: 200px;
height: 100%;
overflow: auto;
background-color: #f9f9f9;
border-left: 1px solid #ccc;
}
</style>
</head>
<body>
Tabla de Contenido
- <a href="#section1">Sección 1</a>
- <a href="#section2">Sección 2</a>
- <a href="#section3">Sección 3</a>
Contenido Principal
Sección 1
Contenido de la sección 1...
Sección 2
Contenido de la sección 2...
Sección 3
Contenido de la sección 3...
</body>
</html>
```
Este código crea una página con tres columnas: la tabla de contenido a la izquierda y la plantilla fija a la derecha no dependen del scroll de la pantalla. ¿ algo más en lo que pueda ayudarte?