zoukankan      html  css  js  c++  java
  • !代码:页面布局

    http://www.cnblogs.com/depsi/p/5097013.html  CSS两列及三列自适应布局方法整理  2015-1-4

    多列:

    <style type="text/css">
    html,body{margin:0;padding:0;}
    .main{width:1190px;margin-left:0;margin-right:0;min-height:1000px;background:#000;}
    .product {position:relative;float:left;background:#fff;margin:0 20px 20px 0;overflow:visible;}
    .product:nth-child(4n) {margin-right:0;}
    .iwrap {position:relative;width:280px;height:300px;background:#fff;margin:0;padding:0;border:1px solid #ececec;box-sizing:content-box;}
    </style>
    <div class="main">
        <div class="product"><div class="iwrap">1111</div></div>
        <div class="product"><div class="iwrap">22222</div></div>
        <div class="product"><div class="iwrap">3333</div></div>
        <div class="product"><div class="iwrap">4444</div></div>
        <div class="product"><div class="iwrap">1111</div></div>
        <div class="product"><div class="iwrap">22222</div></div>
        <div class="product"><div class="iwrap">3333</div></div>
        <div class="product"><div class="iwrap">4444</div></div>
    </div>

    多列红框:

    <style type="text/css">
    html,body{margin:0;padding:0;}
    .main{width:1190px;margin-left:0;margin-right:0;min-height:1000px;background:#999;}
    .product {position:relative;float:left;background:#fff;width:282px;height:333px;margin-right:20px;margin-bottom:20px;line-height:1.5;overflow:visible;z-index:1;}
    .product:nth-child(4n) {margin-right:0;}
    .product:hover{overflow:visible;z-index:3;}
    .product:hover .iwrap {
        margin:-3px;
        border:4px solid #f83760;
        -webkit-transition:border-color .2s ease-in;
        -moz-transition:border-color .2s ease-in;
        -ms-transition:border-color .2s ease-in;
        -o-transition:border-color .2s ease-in;
        transition:border-color .2s ease-in;
    }
    .iwrap {position:relative;width:280px;height:331px;background:#fff;margin:0;padding:0;border:1px solid #ececec;box-sizing:content-box;}
    </style>
    <div class="main">
        <div class="product"><div class="iwrap">1111</div></div>
        <div class="product"><div class="iwrap">22222</div></div>
        <div class="product"><div class="iwrap">3333</div></div>
        <div class="product"><div class="iwrap">4444</div></div>
    
        <div class="product"><div class="iwrap">1111</div></div>
        <div class="product"><div class="iwrap">22222</div></div>
        <div class="product"><div class="iwrap">3333</div></div>
        <div class="product"><div class="iwrap">4444</div></div>
    </div>

    ...

  • 相关阅读:
    Windows内存管理系列
    Windows C/C++ 内存泄露检测
    TCP/IP协议学习(六) 链路层详解
    TCP/IP协议学习(五) 基于C# Socket的C/S模型
    TCP/IP协议学习(四) 协议概述
    STM32学习笔记(十) CAN通讯测试(环回模式)
    STM32学习笔记(九) 外部中断,待机模式和事件唤醒
    STM32学习笔记(八) SPI总线(操作外部flash)
    TCP/IP协议学习(三) STM32中ETH驱动配置注意事项
    TCP/IP协议学习(二) LWIP用户自定义配置文件解析
  • 原文地址:https://www.cnblogs.com/qq21270/p/4919583.html
Copyright © 2011-2022 走看看