CSS页面留白缩小，其他内容区域不变的效果如何做

发布时间：2023-10-06 09:51:08 所属栏目：语言来源：

导读：这篇文章主要介绍了“CSS页面留白缩小，其他内容区域不变的效果怎样做”相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇CSS页面留白缩小，其他内容区域不变的效果怎样做文章

这篇文章主要介绍了“CSS页面留白缩小，其他内容区域不变的效果怎样做”相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇CSS页面留白缩小，其他内容区域不变的效果怎样做文章都会有所收获，下面我们一起来看看吧。

做一个淘宝的留白：

当你在缩小浏览器页面的时候他的内容区并没有缩小，是留白的变小。

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
       <style type="text/css">
           *{
               margin: 0;
               padding: 0;
           }
           .wrapper{
               height: 30px;
               background-color: gray;
           }
           .content{
               width: 1200px;
               height: 30px;
               background-color: #0f0;
               margin: 0 auto;/* 上下0,左右自适应 */
           }
       </style>
   </head>
   <body>
       <div class="wrapper">
           <div class="content"></div>
       </div>
   </body>
</html>
这样当你在缩放的时候，缩放的是外面灰色的部分，绿色的部分始终居中。

里面的文字就是这样来写了

<div>
<ul style="float: left;"></ul>
<ul style="float: right;"></ul>
</div>

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!