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>

    如图:

  • 相关阅读:
    四则运算 2
    《你的灯亮着吗》读后感 (前两篇)
    四则运算设计思路
    读书目标
    课堂总结
    人月神话感想
    软件工程概论11
    软件工程概论10
    bnu——GCD SUM (莫比乌斯反演)
    POJ1108_Split Windows 解题报告
  • 原文地址:https://www.cnblogs.com/somesayss/p/2858668.html
Copyright © 2011-2022 走看看