绿色倡议地图：CSS（第 2 部分）

    <!-- metadatos -->    <link rel="stylesheet" href="estilos.css">

    <!-- metadatos -->    <link rel="stylesheet" href="estilos.css">

/* 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 */}

<header id="encabezado"><h1>mapa de iniciativas ecológicas locales</h1></header>

/* 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;}

<nav id="navegacion"><ul><!-- enlaces --></ul></nav>

/* 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 */}

<section id="carrusel"><h2>iniciativas destacadas</h2>    <div class="carrusel-contenedor">        <!-- slides -->        <div class="slide">            @@##@@            <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>

/* 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);}

<section id="informacion"><h2>sobre nosotros</h2>    <!-- contenido --></section>

/* 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;}

<section id="registro"><h2>registrar nueva iniciativa</h2>    <!-- formulario --></section>

/* 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;}

<section id="mapa"><h2>mapa de iniciativas</h2>    <div>        <!-- mapa -->    </div></section>

/* 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;}

<footer id="pie-de-pagina"><p>© 2024 mapa de iniciativas ecológicas locales</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p></footer>

/* 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;}

/* 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;    }}