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标准流式布局是网页制作中必不可少的工具。通过巧妙地运用它们,可以让网页在不同的设备和分辨率下都有良好的显示效果。