css 与div标准流式布局

CSS（层叠样式表）是一种用于网页排版的语言。它可以改变文本的颜色、字体、大小、布局等等。而DIV是HTML中的一个容器标签，用于创建一个独立的块级盒子。通过DIV标签，我们可以设置文本、图片、表格等等的布局。标准流式布局是一种基于DIV的布局方式，可以让网页在不同分辨率下自适应。

//CSS样式文件
body{
  margin:0;
  padding:0;
}

.container{
  width:80%;
  margin:auto;
}

.header{
  background-color:#f0f0f0;
  text-align:center;
  padding:10px;
}

.nav{
  background-color:#333;
  color:#fff;
  overflow:hidden;
}

.nav a{
  display:block;
  color:#fff;
  text-align:center;
  padding:10px;
  text-decoration:none;
  float:left;
  width:25%;
}

.content{
  width:70%;
  float:left;
  margin:20px 0;
}

.sidebar{
  width:30%;
  float:right;
}

.footer{
  background-color:#f0f0f0;
  text-align:center;
  padding:10px;
}

//HTML文件
<div class="container">
  <div class="header">
    <h1>网站标题</h1>
  </div>
  <div class="nav">
    <a href="#">首页</a>
    <a href="#">新闻</a>
    <a href="#">产品</a>
    <a href="#">联系我们</a>
  </div>
  <div class="content">
    <p>这是网站的主要内容。</p>
  </div>
  <div class="sidebar">
    <p>这是网站的侧边栏。</p>
  </div>
  <div class="footer">
    <p>版权所有 © 2021 网站名称</p>
  </div>
</div>

以上代码就是一个简单的标准流式布局。通过CSS设置了整个网页的样式，包括容器、头部、导航栏、主要内容、侧边栏以及底部。这里值得注意的是，导航栏使用了浮动技术，这样可以让每个链接都在同一行显示。而主要内容和侧边栏设置了宽度和浮动，可以让它们在不同分辨率下自动调整位置。

总之，CSS和DIV标准流式布局是网页制作中必不可少的工具。通过巧妙地运用它们，可以让网页在不同的设备和分辨率下都有良好的显示效果。