用css怎样做相似淘宝页面留白的效果？

发布时间：2023-07-31 14:29:04 所属栏目：语言来源：

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

（编辑：聊城站长网）

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