css入门教程布局 |css向左移动动画

CSS布局的目的是为了能够将网页中的元素进行合理的排列，使其更加美观、易读，同时提高用户的浏览体验。下面就带您一起学习CSS的布局。

<!-- HTML代码 -->
<div class="wrapper">
<div class="header">网页头部</div>
<div class="main">网页主体</div>
<div class="footer">网页底部</div>
</div>
/* CSS代码 */
.wrapper{
width: 960px;
margin: 0 auto;
}
.header, .main, .footer{
box-sizing: border-box;
padding: 20px;
text-align: center;
}
.header{
height: 80px;
background-color: #ccc;
}
.main{
height: 500px;
background-color: #eee;
}
.footer{
height: 100px;
background-color: #aaa;
}

上面的代码是一个简单的网页布局，其中 .wrapper 是作为整个网页的容器，定义了它的宽度以及居中对齐。 .header、.main、.footer 分别代表了网页的头部、主体、底部，都进行了 padding 和文本居中的样式设置。

其中，大家使用了 box-sizing: border-box; 属性，这个属性是为了方便大家的样式布局而出现的，它指定了在 padding 和 border 的宽度内计算元素的宽度，这样大家就可以直接设置元素的宽度和高度，而不用再去减去 padding 或者 border 的宽度。

此外，大家还设置了每个部分的高度和背景颜色，更加明显的区分了整个网页的结构。

当然，CSS的布局还涉及到许多其他的属性和技巧，比如：定位、浮动等等，希望这个简单的入门教程能让你对CSS布局有一个初步的认识。