CSS是一种用来控制HTML文档样式的语言，主要用于网页设计方面。CSS有许多重要的元素，其中要素之一就是div。div是一种常见的HTML元素，用来定义网页中的区域。使用CSS div，我们可以轻松地为网页添加样式并控制网页布局。今天，我们将介绍一个简单的CSS div模板，帮助你更加快捷地设计网页。

<div id="main">
  <div id="header">
    <h1>这里是标题</h1>
  </div>
  <div id="content">
    <p>这里是内容</p>
  </div>
  <div id="footer">
    <p>这里是页脚</p>
  </div>
</div>

<style>
  #main {
    width: 100%;
    height: 800px;
    background-color: #f1f1f1;
    display: flex;
    flex-direction: column;
  }
  
  #header {
    width: 100%;
    height: 200px;
    background-color: #333;
    color: #fff;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  #content {
    flex: 1;
    padding: 20px;
    font-size: 16px;
    text-align: justify;
  }
  
  #footer {
    width: 100%;
    height: 50px;
    background-color: #333;
    color: #fff;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>

在上面的代码中，我们首先定义了main，header，content和footer四个div元素，然后使用CSS样式对它们进行设置。在设置main元素时，我们使用了flex布局，使得它们可以在页面中自由伸缩。header和footer元素主要用于显示网页的标题和页脚信息，较为简单。而content元素则是用来显示网页主要内容的地方，因此我们在这里设置了一些字体样式以及页面对齐方式。

使用这个简单的CSS div模板，你可以快速地创建一个简单而又好看的网页布局。如果你熟悉CSS样式，可以在此基础上进一步修改，实现更加复杂的网页设计效果。希望以上内容对你有所帮助！