CSS3如何实现淘宝留白 CSS3实现淘宝留白方法

时间：2022-06-25 14:05:27 编辑：袖梨来源：一聚教程网

CSS3如何实现淘宝留白？本篇文章小编给大家分享一下CSS3实现淘宝留白方法，代码介绍的很详细，小编觉得挺不错的，现在分享给大家供大家参考，有需要的小伙伴们可以来看看。

做一个淘宝的留白：

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

    <meta charset="utf-8">
    <title></title>
    <style type="text/<a href=" http:="" www.111com.net="" cssdiv="" css.html"="" target="_blank">css</a>">
        *{
            margin: 0;
            padding: 0;
        }
        .wrapper{
             
            background-color: gray;
        }
        .content{
             
             
            background-color: #0f0;
            margin: 0 auto;/* 上下0,左右自适应 */
        }
    </style>
 
 
    <div class="wrapper"><!-- 背景区 -->
        <div class="content"></div><!-- 内容区 -->
    </div>
<script defer="" src="https://static.cloudflareinsights.com/beacon.min.js/vcd15cbe7772f49c399c6a5babf22c1241717689176015" integrity="sha512-ZpsOmlRQV6y907TI0dKBHq9Md29nnaEIPlkf84rnaERnq6zvWvPUqr2ft8M1aS28oN72PdrCzSjY4U6VaAw1EQ==" data-cf-beacon="{"rayId":"92b0ae5aadfeeaf5","version":"2025.3.0","r":1,"serverTiming":{"name":{"cfExtPri":true,"cfL4":true,"cfSpeedBrain":true,"cfCacheStatus":true}},"token":"09a15e901f154c8c900d5950c76ccb92","b":1}" crossorigin="anonymous"></script>

这样当你在缩放的时候，缩放的是外面灰色的部分，绿色的部分始终居中。

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

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

推荐专题

最新下载

热门教程

CSS3如何实现淘宝留白 CSS3实现淘宝留白方法

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程