CSS 基础教程

CSS 盒子模型

CSS3Tutoriales básicos

CSS 参考手册

CSS @规则(RULES)

Todo el libro de ejemplos de CSS Contador de CSS (Contador)

Diseño de página web de CSS (Diseño de página web)

CSS布局易于设计。我们可以使用CSS布局来设计我们的网页，例如主页，与我们联系，关于我们等。

有三种设计网页布局的方法：

HTML Div+CSS布局：现在已广泛使用。
HTML表格：muy lento, menos popular.
Cuadro de marco HTML：ya no se utiliza.

La disposición de CSS puede incluir la cabecera, el pie de página, la ventana lateral izquierda, la ventana lateral derecha y la sección de texto principal. Vamos a ver un ejemplo simple de disposición de CSS.

Ejemplo de disposición de CSS

Ejemplo

<!DOCTYPE html>　　
<html>　　
<head>　　
<style>　　
.header{margen:-8px　-8px 0px;fondo:-imagen:lineal-gradiente(145grados,#7379ff,#b524ef);color:blanco;text-alineación:centro;relleno:10px;}　　
.container{ancho:100%}　　
.left{ancho:15%;flotar:izquierda;}　　
.body{ancho:65%;flotar:izquierda;fondo:-color:rosa;relleno:5px;}　　
.right{ancho:15%;flotar:izquierda;}　　
.footer{margen:-8px;limpiar:tanto;fondo:-imagen:lineal-gradiente(145grados,#7379ff,#b524ef);color:blanco;text-alineación:centro;relleno:10px;}　　
</style>　　
</head>　　
<body>　　
<div class="header"><h2>Tutoriales básicos oldtoolbag.com</h2></div>　　
　　
<div class="container">　　
<div class="left">　　
<p>Barra lateral izquierda</p>　　
</div>　　
<div class="body">　　
<h1>Texto principal</h1>　　
<p>El contenido de la página aquí</p><p>El contenido de la página aquí</p><p>El contenido de la página aquí</p>　　
<p>El contenido de la página aquí</p><p>El contenido de la página aquí</p><p>El contenido de la página aquí</p>　　
<p>El contenido de la página aquí</p><p>El contenido de la página aquí</p><p>El contenido de la página aquí</p>　　
<p>El contenido de la página aquí</p><p>El contenido de la página aquí</p><p>El contenido de la página aquí</p>　　
<p>El contenido de la página aquí</p>　　
</div>　　
<div class="right">　　
<p>Barra lateral derecha</p>　　
</div>　　
</div>　　
　　
<div class="footer">　　
<p>Footer</p>　　
</div>　
</body>　　
</html>

Prueba aquí‹/›

Efecto de salida:

Tutoriales básicos oldtoolbag.com

Barra lateral izquierda

Texto principal

El contenido de la página aquí

Barra lateral derecha

Pie de página

Todo el libro de ejemplos de CSS Contador de CSS (Contador)