引言
网页设计是互联网时代的基础技能之一。掌握Div+CSS核心技术，可以让你轻松地创建出布局美观、功能丰富的网页。本文将用12分钟的时间，带你快速入门Div+CSS，开启你的网页设计之旅。
一、什么是Div+CSS？
1. Div元素
Div是一个块级元素，用于将HTML文档分割成不同的部分。它可以包含文本、图片、其他Div元素等。
2. CSS
CSS（层叠样式表）用于描述HTML文档的样式，如颜色、字体、布局等。通过CSS，可以控制Div元素的显示效果。
二、Div+CSS核心概念
1. 布局
布局是指网页中元素的位置和大小。Div+CSS主要使用以下布局方式：
流式布局：元素按照从左到右、从上到下的顺序排列。
两列布局：将网页分为左右两列，左侧为内容区域，右侧为导航栏或广告。
三列布局：将网页分为左右中三列，左侧和右侧为导航栏或广告，中间为内容区域。
2. 选择器
选择器用于指定要应用样式的元素。常见的CSS选择器有：
类选择器：通过元素类名选择元素，如 .menu。
ID选择器：通过元素ID选择元素，如 #header。
标签选择器：通过HTML标签选择元素，如 div。
3. 常用CSS属性
margin：设置元素与周围元素的距离。
padding：设置元素内部内容与边框的距离。
width和height：设置元素的宽度和高度。
border：设置元素的边框样式。
background：设置元素的背景颜色或图片。
三、12分钟快速入门
1. 创建HTML文档
2. 添加CSS样式
.header {
width: 100%;
height: 50px;
background-color: #333;
color: #fff;
text-align: center;
line-height: 50px;
}
.content {
width: 80%;
margin: 0 auto;
}
.footer {
width: 100%;
height: 50px;
background-color: #f0f0f0;
text-align: center;
line-height: 50px;
}
3. 保存文件并预览
将HTML和CSS文件保存为.html和.css格式，并用浏览器打开HTML文件预览效果。
四、总结
通过本文的介绍，相信你已经掌握了Div+CSS的核心技术，并能够创建出简单的网页。在后续的学习中，你可以尝试使用更多的CSS属性和布局方式，进一步提升你的网页设计能力。祝你在网页设计之旅中一帆风顺！