Rumah > Artikel > hujung hadapan web > Peta Inisiatif Ekologi: CSS (Bahagian 2)
Dalam tutorial ini, anda akan belajar cara menambah baik penampilan visual halaman HTML anda dengan menggunakan gaya CSS secara beransur-ansur. Sepanjang proses, anda akan menetapkan pemilih kepada elemen HTML anda dan menggayakannya langkah demi langkah. Metodologi ini akan membolehkan anda memahami cara gaya digunakan pada elemen yang berbeza dan cara ia mempengaruhi reka bentuk keseluruhan tapak web anda.
Dalam
<head> <!-- Metadatos --> <link rel="stylesheet" href="estilos.css"> </head>
Termasuk fon "Roboto" daripada Google Font:
Dalam
<head> <!-- Metadatos --> <link rel="stylesheet" href="estilos.css"> <!-- Enlaces a Google Fonts --> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet"> </head>
Dalam styles.css, mulakan dengan menetapkan gaya umum untuk badan dokumen:
/* Estilos Generales */ body { font-family: 'Roboto', sans-serif; background-color: #E9EFEC; /* Color de fondo claro */ margin: 0; padding: 0; color: #16423C; /* Color de texto principal */ }
Dalam index.html, tambahkan atribut id pada pengepala:
<header id="encabezado"> <h1>Mapa de Iniciativas Ecológicas Locales</h1> </header>
Dalam styles.css, tambah:
/* Encabezado */ #encabezado { background-color: #16423C; /* Color primario oscuro */ color: #E9EFEC; /* Texto claro */ padding: 20px; text-align: center; } #encabezado h1 { margin: 0; font-size: 2.5em; }
Dalam index.html, tambah:
<nav id="navegacion"> <ul> <!-- Enlaces --> </ul> </nav>
Dalam styles.css:
/* Menú de Navegación */ #navegacion { background-color: #6A9C89; /* Color secundario */ } #navegacion ul { list-style: none; /* Quita los puntos de la lista */ margin: 0; padding: 0; display: flex; /* Alinea los elementos horizontalmente */ justify-content: center; /* Centra los elementos */ } #navegacion li { margin: 0; } #navegacion a { display: block; color: #E9EFEC; /* Texto claro */ padding: 15px 20px; text-decoration: none; font-weight: bold; } #navegacion a:hover { background-color: #16423C; /* Cambia el fondo al pasar el cursor */ }
Dalam index.html, kemas kini karusel:
<section id="carrusel"> <h2>Iniciativas Destacadas</h2> <div class="carrusel-contenedor"> <!-- Slides --> <div class="slide"> <img src="img/1.jpg" alt="Imagen 1"> <p>Descripción de la imagen 1</p> </div> <!-- Más slides... --> <!-- Controles del carrusel --> <button class="prev">«</button> <button class="next">»</button> </div> </section>
Dalam styles.css:
/* Carrusel */ #carrusel { text-align: center; padding: 20px 10px; background-color: #C4DAD2; /* Color de acento */ } .carrusel-contenedor { position: relative; max-width: 1000px; margin: auto; overflow: hidden; border-radius: 5px; } .slide { display: none; /* Oculta los slides por defecto */ } .slide img { width: 100%; height: auto; border-radius: 5px; } .slide:first-child { display: block; /* Muestra el primer slide */ } /* Botones de navegación */ .prev, .next { background-color: rgba(22, 66, 60, 0.7); /* Color semitransparente */ border: none; color: #E9EFEC; padding: 5px 12px; position: absolute; top: 50%; cursor: pointer; border-radius: 50%; font-size: 1.5em; transform: translateY(-50%); /* Centra verticalmente */ } .prev { left: 15px; } .next { right: 15px; } .prev:hover, .next:hover { background-color: rgba(22, 66, 60, 0.9); }
En index.html:
<section id="informacion"> <h2>Sobre Nosotros</h2> <!-- Contenido --> </section>
En estilos.css:
/* Contenido Principal */ main { padding: 40px 20px; } section { margin-bottom: 60px; } /* Sección Informativa */ #informacion h2 { color: #16423C; text-align: center; } #informacion p { line-height: 1.8; /* Espacio entre líneas */ max-width: 800px; /* Ancho máximo para mejorar la legibilidad */ margin: 20px auto; /* Centra el texto */ text-align: center; }
En index.html:
<section id="registro"> <h2>Registrar Nueva Iniciativa</h2> <!-- Formulario --> </section>
En estilos.css:
/* Formulario de Registro */ #registro h2 { text-align: center; color: #16423C; } #registro form { max-width: 600px; margin: auto; background-color: #FFFFFF; padding: 30px; border-radius: 10px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } #registro label { display: block; margin-top: 15px; color: #16423C; font-weight: bold; } #registro input[type="text"], #registro textarea, #registro select { width: 100%; padding: 10px; box-sizing: border-box; border: 1px solid #C4DAD2; border-radius: 5px; background-color: #E9EFEC; } #registro input[type="text"]:focus, #registro textarea:focus, #registro select:focus { border-color: #6A9C89; outline: none; } #registro input[type="submit"] { margin-top: 20px; background-color: #6A9C89; color: #E9EFEC; border: none; padding: 15px; cursor: pointer; width: 100%; font-size: 1.1em; border-radius: 5px; } #registro input[type="submit"]:hover { background-color: #16423C; }
En index.html:
<section id="mapa"> <h2>Mapa de Iniciativas</h2> <div> <!-- Mapa --> </div> </section>
En estilos.css:
/* Sección del Mapa */ #mapa { padding: 40px 20px; background-color: #C4DAD2; border-radius: 10px; } #mapa h2 { text-align: center; color: #16423C; } #mapa div { height: 500px; }
En index.html:
<footer id="pie-de-pagina"> <p>© 2024 Mapa de Iniciativas Ecológicas Locales</p> </footer>
En estilos.css:
/* Pie de Página */ #pie-de-pagina { background-color: #16423C; color: #E9EFEC; text-align: center; padding: 15px; } #pie-de-pagina p { margin: 0; font-size: 0.9em; }
En estilos.css, añade:
/* Diseño Responsivo */ @media screen and (max-width: 768px) { #navegacion ul { flex-direction: column; /* Cambia el menú a vertical */ } .prev, .next { padding: 3px 8px; } #registro form { width: 100%; padding: 20px; } #encabezado h1 { font-size: 2em; } }
¡Felicidades! Has completado la estilización de tu página web, aprendiendo a utilizar selectores y comprendiendo cómo afectan al diseño. Ahora tienes una página web funcional y estéticamente agradable.
Atas ialah kandungan terperinci Peta Inisiatif Ekologi: CSS (Bahagian 2). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!