在網頁制作中，為了使得頁面布局更加靈活自如，我們經常會采用使用div與CSS進行布局的方式。下面，我們來簡單了解一下div與CSS布局的特效。

/* 固定寬度居中布局 */
.container{
width: 960px;
margin: 0 auto;
}
/* 簡單的兩列布局 */
.left{
float: left;
width: 50%;
}
.right{
float: right;
width: 50%;
}
/* 清除浮動 */
.clearfix:after {
content: "";
display: block;
clear: both;
visibility: hidden;
height: 0;
}
/* 省略號效果 */
.ellipsis{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* 鼠標懸浮效果 */
.hover{
transition: all 0.3s ease-in-out;
}
.hover:hover{
transform: scale(1.1);
}
/* 透明度動畫效果 */
.opacity{
transition: opacity 0.3s ease-in-out;
}
.opacity:hover{
opacity: .5;
}
/* 文字滑動效果 */
.slide{
position: relative;
overflow: hidden;
}
.slide .inner{
position: absolute;
left: 0;
top: 0;
animation: slide 10s linear infinite;
}
@keyframes slide{
0% {left: 0;}
100% {left: -100%;}
}

通過以上簡單的代碼示例，我們可以看出，使用div與CSS布局可以實現許多酷炫的效果，比如固定寬度居中布局、簡單的兩列布局、清除浮動、省略號效果、鼠標懸浮效果、透明度動畫效果、文字滑動效果等等。而這些效果的實現都是基于CSS的強大特性而來，比如選擇器、樣式、布局等等，因此，掌握CSS布局技巧對于我們的網頁開發來說是非常重要的。