zoukankan      html  css  js  c++  java
  • CSS_负边距

    排列表:

    <style type="text/css">
    .clear{zoom:1;}
    .clear:after{visibility:hidden;display:block;font-size:0;content:"1";clear:both;height:0;}
    .main{width:550px;margin:0 auto;background:#EEE;padding:10px 0 30px 0;}
    .main ul{background:#eaee89;margin-right:-50px;_position:relative;}
    .main li{float:left;width:98px;height:98px;margin:20px 50px 0 0;background:#9aa1cc;border:1px dashed #000;_display:inline;}
    </style>
    <div class="main">
        <ul class="clear">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

    效果图:

    九宫格:

    <style type="text/css">
    .clear{zoom:1;}
    .clear:after{visibility:hidden;display:block;font-size:0;content:"1";clear:both;height:0;}
    .main{width:180px;margin:0 auto;padding:30px 0;background:#EEE;}
    .main a{float:left;width:50px;height:50px;border:1px solid #84b4d2;color:#666;text-align:center;font:12px/50px Arial;margin:0 -1px -1px 0;position:relative;}
    .main a:hover{border-color:#F00;z-index:1;}
    </style>
    </head>
    <body>
    <div class="main">
        <div class="clear">
            <a href="javascript:void(0)">1</a>
            <a href="javascript:void(0)">2</a>
            <a href="javascript:void(0)">3</a>
            <a href="javascript:void(0)">4</a>
            <a href="javascript:void(0)">5</a>
            <a href="javascript:void(0)">6</a>
            <a href="javascript:void(0)">7</a>
            <a href="javascript:void(0)">8</a>
            <a href="javascript:void(0)">9</a>
        </div>
    </div>

    如图:

  • 相关阅读:
    前端布局定位
    CSS优化
    CSS工程化
    CSS过渡,动画,2D,3D转换
    CSS,盒子和美化技巧
    HTMl
    定位和布局
    CSS选择器
    八. 实时更新插件 livereload
    七. 浏览器插件 View in Browser
  • 原文地址:https://www.cnblogs.com/somesayss/p/2858668.html
Copyright © 2011-2022 走看看