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>

    ...

  • 相关阅读:
    MYSQL的基本语法
    如何实现SQL Server临时表的创建?
    计算时间 相加,相减 的方法,TimeSpan 数据转换
    sql server 拆分字符串,拆分两次(:和;)
    SQL group by分组查询(转)
    转: sqlserver常用sql语句,更改字段,建立唯一键,多个字段去重复等
    asp.net,CSS设置<TableListView>的title居左,居左,居上
    linq to sql ,将var 类型转为 IList 类型
    Open XML的上传、下载 、删除 ......文件路径
    C#操作office进行Excel图表创建,保存本地,word获取
  • 原文地址:https://www.cnblogs.com/qq21270/p/4919583.html
Copyright © 2011-2022 走看看