用css做类似淘宝页面留白的效果的方法

发布时间：2023-09-15 12:34:14 所属栏目：语言来源：

导读：用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>

以上就是用css做类似淘宝页面留白的效果的介绍，上述示例具有一定的借鉴价值，有需要的朋友可以参考学习，希望对大家有帮助。

（编辑：汽车网）

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