在网页设计中，CSS（层叠样式表）是构建网页外观的关键技术之一。CSS 1.6作为CSS的一个版本，虽然已经较为陈旧，但其中仍包含了许多实用的布局技巧。本文将从实战角度出发，分析20个经典网页布局案例，帮助读者更好地理解CSS 1.6的布局能力。
1. 简单的两栏布局
案例描述：这种布局通常用于博客、个人主页等，左侧为导航栏，右侧为内容区域。
CSS代码示例：
/* 基础样式 */
body {
margin: 0;
padding: 0;
}
/* 导航栏样式 */
.nav {
width: 200px;
background-color: #333;
color: #fff;
}
/* 内容区域样式 */
.content {
margin-left: 200px;
padding: 20px;
}
2. 三栏布局
案例描述：三栏布局常用于企业官网、电商平台等，左侧为导航栏，中间为内容区域，右侧为侧边栏。
CSS代码示例：
/* 基础样式 */
body {
margin: 0;
padding: 0;
}
/* 导航栏样式 */
.nav {
width: 200px;
background-color: #333;
color: #fff;
}
/* 内容区域样式 */
.content {
margin-left: 200px;
padding: 20px;
}
/* 侧边栏样式 */
.sidebar {
width: 200px;
background-color: #f4f4f4;
padding: 20px;
}
3. 响应式布局
案例描述：随着移动设备的普及，响应式布局变得尤为重要。这种布局可以根据屏幕尺寸自动调整内容展示方式。
CSS代码示例：
/* 基础样式 */
body {
margin: 0;
padding: 0;
}
/* 导航栏样式 */
.nav {
width: 100%;
background-color: #333;
color: #fff;
}
/* 内容区域样式 */
.content {
padding: 20px;
}
/* 响应式布局 */
@media (max-width: 768px) {
.content {
padding: 10px;
}
}
4. 网格布局
案例描述：网格布局常用于产品展示、图片墙等，将内容以网格形式展示。
CSS代码示例：
/* 基础样式 */
body {
margin: 0;
padding: 0;
}
/* 网格布局样式 */
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
}
/* 网格项样式 */
.grid-item {
background-color: #f4f4f4;
padding: 20px;
}
5. 卡片布局
案例描述：卡片布局常用于内容展示，将内容以卡片形式展示，便于用户浏览。
CSS代码示例：
/* 基础样式 */
body {
margin: 0;
padding: 0;
}
/* 卡片布局样式 */
.card {
width: 300px;
background-color: #f4f4f4;
margin: 10px;
padding: 20px;
}
/* 卡片标题样式 */
.card-title {
font-size: 18px;
color: #333;
}
/* 卡片内容样式 */
.card-content {
margin-top: 10px;
}
6. 纯CSS轮播图
案例描述：轮播图是网页中常见的元素，用于展示多张图片或内容。
CSS代码示例：
/* 基础样式 */
body {
margin: 0;
padding: 0;
}
/* 轮播图样式 */
.carousel {
width: 600px;
height: 300px;
overflow: hidden;
position: relative;
}
/* 轮播图项样式 */
.carousel-item {
width: 100%;
height: 100%;
position: absolute;
display: none;
}
/* 轮播图项（第一项）显示 */
.carousel-item:first-child {
display: block;
}
/* 轮播图指示器样式 */
.carousel-indicators {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
}
/* 指示器样式 */
.carousel-indicator {
display: inline-block;
width: 10px;
height: 10px;
background-color: #fff;
margin: 0 5px;
border-radius: 50%;
}
7. CSS三角形
案例描述：CSS三角形常用于导航栏、按钮等，用于美化页面元素。
CSS代码示例：
/* 三角形样式 */
.triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #333;
}
8. CSS进度条
案例描述：CSS进度条常用于显示任务进度、加载状态等。
CSS代码示例：
/* 进度条样式 */
.progress {
width: 100%;
background-color: #eee;
}
/* 进度条填充样式 */
.progress-fill {
width: 50%;
height: 20px;
background-color: #333;
}
9. CSS倒计时
案例描述：CSS倒计时常用于活动、促销等场景，显示剩余时间。
CSS代码示例：
/* 倒计时样式 */
.countdown {
font-size: 24px;
color: #333;
}
/* 倒计时项样式 */
.countdown-item {
display: inline-block;
width: 50px;
text-align: center;
}
10. CSS按钮
案例描述：CSS按钮常用于提交表单、点击事件等。
CSS代码示例：
/* 按钮样式 */
.button {
padding: 10px 20px;
background-color: #333;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
/* 按钮悬停样式 */
.button:hover {
background-color: #555;
}
11. CSS图片缩放
案例描述：CSS图片缩放常用于图片展示、图片墙等，根据屏幕尺寸自动调整图片大小。
CSS代码示例：
/* 图片缩放样式 */
.image {
width: 100%;
height: auto;
}
12. CSS文字阴影
案例描述：CSS文字阴影常用于美化文字，增加层次感。
CSS代码示例：
/* 文字阴影样式 */
.text-shadow {
text-shadow: 2px 2px 2px #333;
}
13. CSS边框圆角
案例描述：CSS边框圆角常用于按钮、卡片等，美化页面元素。
CSS代码示例：
/* 边框圆角样式 */
.border-radius {
border-radius: 5px;
}
14. CSS渐变色
案例描述：CSS渐变色常用于背景、按钮等，增加视觉效果。
CSS代码示例：
/* 渐变色样式 */
.gradient {
background: linear-gradient(to right, #ff7e5f, #feb47b);
}
15. CSS多列布局
案例描述：多列布局常用于文章、新闻等，将内容以多列形式展示。
CSS代码示例：
/* 多列布局样式 */
.columns {
column-count: 3;
column-gap: 20px;
}
16. CSS表格布局
案例描述：表格布局常用于数据展示、统计等。
CSS代码示例：
/* 表格样式 */
.table {
width: 100%;
border-collapse: collapse;
}
/* 表格标题样式 */
.table th {
background-color: #333;
color: #fff;
}
/* 表格内容样式 */
.table td {
border: 1px solid #ddd;
padding: 8px;
}
17. CSS导航菜单
案例描述：导航菜单是网页中常见的元素，用于导航网站内容。
CSS代码示例：
/* 导航菜单样式 */
.nav-menu {
list-style: none;
padding: 0;
}
/* 导航菜单项样式 */
.nav-menu li {
display: inline-block;
margin-right: 10px;
}
/* 导航菜单链接样式 */
.nav-menu a {
text-decoration: none;
color: #333;
}
18. CSS轮播图动画
案例描述：轮播图动画常用于展示多张图片或内容，增加动态效果。
CSS代码示例：
/* 轮播图动画样式 */
.carousel-item {
animation: slide 10s infinite;
}
/* 轮播图动画关键帧 */
@keyframes slide {
0% {
transform: translateX(100%);
}
50% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
19. CSS响应式图片
案例描述：响应式图片常用于图片展示、图片墙等，根据屏幕尺寸自动调整图片大小。
CSS代码示例：
/* 响应式图片样式 */
.image-responsive {
width: 100%;
height: auto;
}
20. CSS响应式视频
案例描述：响应式视频常用于视频展示、视频播放器等，根据屏幕尺寸自动调整视频大小。
CSS代码示例：
/* 响应式视频样式 */
.video-responsive {
width: 100%;
height: auto;
}
通过以上20个经典网页布局案例分析，相信读者对CSS 1.6的布局能力有了更深入的了解。在实际开发中，可以根据项目需求选择合适的布局方式，并结合多种CSS技巧，打造出美观、实用的网页。