用css怎样做类似淘宝页面留白的效果？
发布时间：2022-01-13 09:54: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>  （编辑：平顶山站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
