Red de conocimiento informático - Material del sitio web - Cómo usar CSS para controlar divs para dibujar triángulos y árboles de Navidad

Cómo usar CSS para controlar divs para dibujar triángulos y árboles de Navidad

Crear un nuevo documento de texto

Cree un nuevo documento de texto en el escritorio y asígnele el nombre "Triángulo", abra el nuevo documento de texto y configure el tipo de documento, encabezado, cuerpo y otros marcos en el HTML.

Tenga en cuenta que puede cambiarle el nombre a un archivo .html después de escribirlo.

2

Crea un div y usa el atributo de borde para controlarlo

Diseñe el div y asígnele el nombre id="tri", use CSS para controlar el div, en estilo, use El atributo de borde controla el div,

#tri{

ancho:

alto:

<; p> borde superior: 400 px rojo sólido;

borde derecho: 400 px azul sólido

borde inferior: 400 px verde sólido

borde izquierdo; : 400px amarillo sólido;

}

Tenga en cuenta que la longitud y el ancho del div están establecidos en 0 y el borde es el borde. Verá las siguientes cuatro formas de triángulo.

3

Modifica y selecciona el triángulo que desees

El código anterior no dibuja un triángulo, sino cuatro triángulos. Simplemente cambia el color alrededor del borde. cámbielo a blanco, excepto el borde inferior: 100 px, verde sólido; cambie todos los demás a blanco y verá el siguiente efecto. Por supuesto, también puede ajustarlo según sus necesidades.

Además, puedes establecer los píxeles del borde superior en 0; hacer los otros dos lados más pequeños y establecer el color en blanco, de modo que solo verás un triángulo en la parte inferior.

Presta atención a elegir el efecto que deseas lograr en función de tu situación real. Los diferentes efectos en la Figura 1 y la Figura 2 se deben a diferentes configuraciones de los bordes.

4

El siguiente código es sólo de referencia:

lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//ES " " http://www.w3.org/TR/html4/loose.dtd"gt;

lt;htmlgt;

lt;headgt;

lt ;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"gt;

lt;titlegt;Ejercicio trigonométricolt;/titlegt;

lt; estilogt;

#tri{

ancho: 0px;

alto:

borde superior: 0px; blanco sólido

borde derecho: 100 px blanco sólido;

borde inferior: 400 px verde sólido

borde izquierdo: 100 px blanco sólido; p >

}

lt;/stylegt;

lt;/headgt;

lt;bodygt;

lt; div id="tri"gt;lt;/divgt;

lt;/bodygt;

lt;/htmlgt;

END

Dibuja un árbol de Navidad

Dibuja dos triángulos

Usando la base del triángulo de arriba, primero dibuja dos triángulos de diferentes tamaños.

#tri1{

ancho: 0px;

alto: 0px;

borde superior: 100px blanco sólido;

borde derecho: 100 px blanco sólido;

borde inferior: 100 px verde sólido;

borde izquierdo: 100 px blanco sólido;

}

#tri2{

ancho: 0px;

alto: 0px;

borde superior: 200px blanco sólido;

borde derecho: 200 px blanco sólido;

borde inferior: 200 px verde sólido;

borde izquierdo: 200 px blanco sólido

}

Utilice flotación y margen para ajustar a la posición adecuada

Haga flotar el primer triángulo pequeño para que cubra el segundo, luego use el valor del margen para ajustar la posición y finalmente muestre El contenido anterior del árbol de Navidad, el código es el siguiente y la imagen es la siguiente.

#tri1{

ancho: 0px;

alto: 0px;

borde superior: 100px blanco sólido;

borde derecho: 100 px blanco sólido;

borde inferior: 100 px verde sólido;

borde izquierdo: 100 px blanco sólido;

flotante : izquierdo;

margen izquierdo: 100px;

}

#tri2{

ancho: 0px; p>altura: 0px;

borde superior: 200 px blanco sólido;

borde derecho: 200 px blanco sólido;

borde inferior: 200 px verde sólido ;

border-left: 200px blanco sólido;

}

Dibuja el tronco de un árbol

Agrega un div llamado pie de página para controlarlo Tamaño, forma y color, y utilice el margen para ajustar la posición.

#footer{

ancho: 100px;

alto: 200px;

fondo: gris; margin-left: 150px;

}

Finalmente, luego del ajuste, se obtiene un árbol de Navidad.

Como se muestra en la siguiente figura

El código completo es el siguiente, solo como referencia

lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN " "http:/ /www.w3.org/TR/html4/loose.dtd"gt;

lt;html lang="en"gt;

lt;headgt;

lt;meta http-equiv="Content-Type" content="text/html;charset=UTF-8"gt;

lt;titlegt;Ejercicio del árbol de Navidadlt;/ títulogt;

lt; estilogt;

#header{

ancho: 0px; p>borde superior: 100 px blanco sólido;

borde derecho: 100 px blanco sólido;

borde inferior: 100 px verde sólido

borde izquierdo; : 100px blanco sólido

flotante: izquierdo

margen izquierdo:

}

#main{

ancho: 0px;

alto: 0px;

borde superior: 200 px blanco sólido;

borde derecho: 200 px blanco sólido <; /p>

borde inferior: 200 px verde sólido;

borde izquierdo: 200 px blanco sólido;

}

#footer{

ancho: 100px;

alto: 200px;

fondo: gris;

margen izquierdo: 150px; }

lt;/stylegt;

lt;/headgt;

lt;bodygt;

lt;div id="encabezado "gt;lt; /divgt;

lt;div id="main"gt;lt;/divgt;

lt;div id="footer"gt;lt;/ divgt;

lt;/bodygt;

lt;/htmlgt;