Red de conocimiento informático - Material del sitio web - Cómo utilizar rápidamente css y div para crear una página web sencilla

Cómo utilizar rápidamente css y div para crear una página web sencilla

1

Cree un archivo index.htm y un archivo main.css en el escritorio. Por supuesto, no necesita el archivo main.css, pero por conveniencia. operación, es mejor crear una barra. Simplemente guarde el bloc de notas como.

2

Después de completar estos dos archivos, escribimos el código básico de la página web y hacemos que el archivo de índice esté controlado por main.css. Hacemos clic derecho y seleccionamos para abrir. indexar con el Bloc de notas Ingrese el código en el archivo y escriba en el encabezado para que sea controlado por main.css

<. p>

3

Vayamos a main.css y escribamos algunas propiedades para ver si Podemos controlar el archivo de índice. Quiero que toda la página sea rosa y luzca cálida. Escribiré *{fondo:#FF66FF} en main.css para echarle un vistazo. Abramos el archivo de índice y veamos si está rosado en el navegador. Es rosa en el navegador, lo que indica que está controlado por la hoja de estilos CSS.

4

Ahora diseñaremos el diseño. Generalmente, las páginas web tienen tres capas y un nivel, por lo que necesitamos un diseño div y lo escribiremos en el cuerpo. primero divídelo en tres capas

5

Una vez completado el diseño, necesitamos definir los atributos. Aquí los definí brevemente

*{background:#FF33FF}

. #top{fondo:#FFFF99; alto:1000px; ancho:800px; margen-izquierdo:auto; margen-derecho:auto}

#top1{fondo:#66FFFF; ;}

#top2 {fondo:#FF00CC; alto:400px; ancho:800px}

#top3{fondo:#FF9933; alto:550px; p>

Después de definirla, abrimos la vista previa. Echa un vistazo para ver si la imagen está centrada y dividida en 3 partes. Por supuesto, el color es solo para facilitar la visualización y no es necesario escribirlo.

6

De hecho, crear una página web es solo un marco de imagen continuo. Siempre que conozca los atributos de diseño y definición, lo haremos en su totalidad a continuación, porque algunos. Los míos son iguales. Se puede llamar con clase, class=baidu simplemente se escribe de manera informal, significa lo que quieras

.

</p><p><link href="main.css" type="text/css" rel="stylesheet"></p><p></head> </p><p><body></p><p><div id="top"></p><p><div id="top1">Aquí están las fotos que tomé capturas de pantalla</div ></p> <p><div id="top2"></p><p><div class="baidu"></div></p><p><div class="baidu"> </div></p><p></div></p><p><div id="top3"></p><p><div class="baidujingyan"></div></p><p><div class="baidujingyan"></div></p><p></div></p><p></div></p><p></body ></p> <p></html></p><p>7</p><p>A continuación, definamos sus atributos. Por supuesto, solo los definiré brevemente</p><p>*. {fondo:# FF33FF}</p><p>#top{fondo:#FFFF99; alto:1000px; ancho:800px; margen izquierdo:auto; {fondo:# 66FFFF; altura:50px; ancho:800px; alineación de texto:centro; altura de línea:50px;tamaño de fuente:30px}</p><p>#top2{fondo:#FF00CC; ; ancho:800px }</p><p>#top3{fondo:#FF9933; alto:550px; ancho:380px; ; flotante:izquierda; margen:10px}</p><p>.baidujingyan{fondo:#FFCC00; altura:530px; ancho:380px; /p><p>Debido a que esta es una página web donde hago capturas de pantalla del álbum de fotos, simplemente coloquemos las fotos aquí y coloquemos todas las fotos en el escritorio, por lo que no necesito conectar la foto. DIRECCIÓN.</p><p></p><p><html></p><p><head></p><p><title>

Estas son todas las fotos de mi esposa

Si la imagen no está en el mismo directorio , necesita conectarse a la dirección de la imagen

9

Dicha página web está lista. Si necesita crear una página web hermosa, debe especificar constantemente el diseño div y el estilo CSS.

10

Permítanme hablar sobre la definición de producción de páginas web. Siempre que pueda usar div para diseñar y definir sus atributos, una página web básicamente estática se crea de esta manera. /p>

上篇: ¿Por qué Yiban muestra más de 5.000 imágenes y textos recopilados? 下篇: Hay muchas tecnologías negras disponibles, ¿qué tan rentable es el resistente Escalade?

Artículos populares