海鬼的博客

CSS控制瀑布效果 自用

这是大概的效果，相信很少有人会用到，因为没有JS，没有绚丽的载入效果，但是因为某站特殊性，需要用到，这种布局方式，仅留下代码备用。 HTML代码

<div class="clink">
  <div class="ch3"><a class="on" id="cn2_1" onclick="javascript:return hd(this,'cn',5);">友情链接</a><a id="cn2_2" onclick="javascript:return hd(this,'cn',5);">热点导航</a> </div>
   
   
   
  <div class="cldiv">
    <div id="cn3_1">
  <dl>
    <dt>A</dt>
    <dd> <a href="#" target="_blank">ARDELL/艾黛尔</a> <a href="#" target="_blank">ANNASUI/安娜苏</a> <a href="#" target="_blank">ETUDEHOUSE/爱丽小屋</a> <a href="#" target="_blank">abeeco</a> <a href="#" target="_blank">AFU/阿芙</a> <a href="#" target="_blank">Egyptian-Magic-Cream/埃及魔法膏</a> <a href="#" target="_blank">adidas/阿迪达斯</a> </dd>
  </dl>
  <dl>
    <dt>B</dt>
    <dd> <a href="#" target="_blank">HERBORIST/佰草集</a> <a href="#" target="_blank">BURBERRY/巴宝莉/博柏利</a> <a href="#" target="_blank">BIOTHERM/碧欧泉</a> <a href="#" target="_blank">benefit/贝玲妃</a> <a href="#" target="_blank">Bavii/柏羽</a> <a href="#" target="_blank">PaulSmith/保罗史密夫</a> <a href="#" target="_blank">Bobbi Brown/芭比布朗</a> <a href="#" target="_blank">BVLGARI/宝格丽</a> <a href="#" target="_blank">PURE&MILD/泊美</a> <a href="#" target="_blank">baviphat/芭比菲特</a> <a href="#" target="_blank">Peter Thomas Roth/彼得罗夫</a> <a href="#" target="_blank">BeDOOK/比度克</a> <a href="#" target="_blank">BIODERMA/贝德玛</a> <a href="#" target="_blank">BKBarry-MBlistex/碧唇</a> </dd>
  </dl>
  <dl>
    <dt>C</dt>
    <dd> <a href="#" target="_blank">Fenix/长生鸟</a> <a href="#" target="_blank">For Beloved One/宠爱之名</a> <a href="#" target="_blank">CHARMZONE/婵真</a> </dd>
  </dl>
  <dl>
    <dt>D</dt>
    <dd> <a href="#" target="_blank">Dr.Jart+Dr.MJDior/迪奥</a> <a href="#" target="_blank">dodo</a> <a href="#" target="_blank">Dior/迪奥</a> <a href="#" target="_blank">Dove/多芬</a> <a href="#" target="_blank">DHC/蝶翠诗</a> <a href="#" target="_blank">Davidoff/大卫杜夫</a> </dd>
  </dl>
  <dl>
    <dt>E</dt>
    <dd> <a href="#" target="_blank">N-Dorphin/恩朵娉</a> <a href="#" target="_blank">OPERA/娥佩兰</a> <a href="#" target="_blank">ELF</a> <a href="#" target="_blank">eos</a> </dd>
  </dl>
  <dl>
    <dt>F</dt>
    <dd> <a href="#" target="_blank">芳草集</a> <a href="#" target="_blank">THEFACESHOP/菲诗小铺</a> <a href="#" target="_blank">Fanxishop/凡茜</a> <a href="#" target="_blank">FANCL/芳珂（芳凯尔）</a> <a href="#" target="_blank">VERSACE/范思哲</a> </dd>
  </dl>
  <dl>
    <dt>G</dt>
    <dd> <a href="#" target="_blank">ARDELL/艾黛尔</a> <a href="#" target="_blank">ANNASUI/安娜苏</a> <a href="#" target="_blank">ETUDEHOUSE/爱丽小屋</a> <a href="#" target="_blank">abeeco</a> <a href="#" target="_blank">AFU/阿芙</a> <a href="#" target="_blank">Egyptian-Magic-Cream/埃及魔法膏</a> <a href="#" target="_blank">adidas/阿迪达斯</a> </dd>
  </dl>
  <dl>
    <dt>H</dt>
    <dd> <a href="#" target="_blank">LAMER/海蓝之谜</a> <a href="#" target="_blank">BOCOTON/海诺丝丽</a> <a href="#" target="_blank">CO.E/韩伊</a> <a href="#" target="_blank">Herbacin/贺本清</a> <a href="#" target="_blank">花瑶花</a> <a href="#" target="_blank">花漾美姬</a> <a href="#" target="_blank">HEY NATURE/韩彩妮</a> <a href="#" target="_blank">Hipitch/黑龙堂</a> </dd>
  </dl>
  <dl>
    <dt>L</dt>
    <dd> <a href="#" target="_blank">LAMER/海蓝之谜</a> <a href="#" target="_blank">BOCOTON/海诺丝丽</a> <a href="#" target="_blank">CO.E/韩伊</a> <a href="#" target="_blank">CO.E/韩伊</a> <a href="#" target="_blank">CO.E/韩伊</a> <a href="#" target="_blank">Herbacin/贺本清</a> <a href="#" target="_blank">花瑶花</a> <a href="#" target="_blank">花漾美姬</a> <a href="#" target="_blank">HEY NATURE/韩彩妮</a> <a href="#" target="_blank">Hipitch/黑龙堂</a> </dd>
  </dl>
  <dl>
    <dt>M</dt>
    <dd> <a href="#" target="_blank">LAMER/海蓝之谜</a> <a href="#" target="_blank">BOCOTON/海诺丝丽</a> <a href="#" target="_blank">CO.E/韩伊</a> <a href="#" target="_blank">Herbacin/贺本清</a> <a href="#" target="_blank">花瑶花</a> <a href="#" target="_blank">花漾美姬</a> <a href="#" target="_blank">HEY NATURE/韩彩妮</a> <a href="#" target="_blank">Hipitch/黑龙堂</a> </dd>
  </dl>
  <dl>
    <dt>N</dt>
    <dd> <a href="#" target="_blank">LAMER/海蓝之谜</a> <a href="#" target="_blank">LAMER/海蓝之谜</a> <a href="#" target="_blank">LAMER/海蓝之谜</a> <a href="#" target="_blank">BOCOTON/海诺丝丽</a> <a href="#" target="_blank">CO.E/韩伊</a> <a href="#" target="_blank">Herbacin/贺本清</a> <a href="#" target="_blank">花瑶花</a> <a href="#" target="_blank">花漾美姬</a> <a href="#" target="_blank">HEY NATURE/韩彩妮</a> <a href="#" target="_blank">Hipitch/黑龙堂</a> </dd>
  </dl>
</div>
 
 
 
 
 
 
 
     
    <div id="cn3_2" class="un">
    <dl>
    <dt>H</dt>
    <dd> <a href="#" target="_blank">LAMER/海蓝之谜</a> <a href="#" target="_blank">BOCOTON/海诺丝丽</a> <a href="#" target="_blank">CO.E/韩伊</a> <a href="#" target="_blank">Herbacin/贺本清</a> <a href="#" target="_blank">花瑶花</a> <a href="#" target="_blank">花漾美姬</a> <a href="#" target="_blank">HEY NATURE/韩彩妮</a> <a href="#" target="_blank">Hipitch/黑龙堂</a> </dd>
  </dl>
  <dl>
    <dt>L</dt>
    <dd> <a href="#" target="_blank">LAMER/海蓝之谜</a> <a href="#" target="_blank">BOCOTON/海诺丝丽</a> <a href="#" target="_blank">CO.E/韩伊</a> <a href="#" target="_blank">CO.E/韩伊</a> <a href="#" target="_blank">CO.E/韩伊</a> <a href="#" target="_blank">Herbacin/贺本清</a> <a href="#" target="_blank">花瑶花</a> <a href="#" target="_blank">花漾美姬</a> <a href="#" target="_blank">HEY NATURE/韩彩妮</a> <a href="#" target="_blank">Hipitch/黑龙堂</a> </dd>
  </dl>
  <dl>
    <dt>M</dt>
    <dd> <a href="#" target="_blank">LAMER/海蓝之谜</a> <a href="#" target="_blank">BOCOTON/海诺丝丽</a> <a href="#" target="_blank">CO.E/韩伊</a> <a href="#" target="_blank">Herbacin/贺本清</a> <a href="#" target="_blank">花瑶花</a> <a href="#" target="_blank">花漾美姬</a> <a href="#" target="_blank">HEY NATURE/韩彩妮</a> <a href="#" target="_blank">Hipitch/黑龙堂</a> </dd>
  </dl>
  <dl>
    <dt>N</dt>
    <dd> <a href="#" target="_blank">LAMER/海蓝之谜</a> <a href="#" target="_blank">LAMER/海蓝之谜</a> <a href="#" target="_blank">LAMER/海蓝之谜</a> <a href="#" target="_blank">BOCOTON/海诺丝丽</a> <a href="#" target="_blank">CO.E/韩伊</a> <a href="#" target="_blank">Herbacin/贺本清</a> <a href="#" target="_blank">花瑶花</a> <a href="#" target="_blank">花漾美姬</a> <a href="#" target="_blank">HEY NATURE/韩彩妮</a> <a href="#" target="_blank">Hipitch/黑龙堂</a> </dd>
  </dl>
  <dl>
    <dt>AAA</dt>
    <dd> <a href="#" target="_blank">ARDELL/艾黛尔</a> <a href="#" target="_blank">ANNASUI/安娜苏</a> <a href="#" target="_blank">ETUDEHOUSE/爱丽小屋</a> <a href="#" target="_blank">abeeco</a> <a href="#" target="_blank">AFU/阿芙</a> <a href="#" target="_blank">Egyptian-Magic-Cream/埃及魔法膏</a> <a href="#" target="_blank">adidas/阿迪达斯</a> </dd>
  </dl>
  <dl>
    <dt>BBB</dt>
    <dd> <a href="#" target="_blank">HERBORIST/佰草集</a> <a href="#" target="_blank">BURBERRY/巴宝莉/博柏利</a> <a href="#" target="_blank">BIOTHERM/碧欧泉</a> <a href="#" target="_blank">benefit/贝玲妃</a> <a href="#" target="_blank">Bavii/柏羽</a> <a href="#" target="_blank">PaulSmith/保罗史密夫</a> <a href="#" target="_blank">Bobbi Brown/芭比布朗</a> <a href="#" target="_blank">BVLGARI/宝格丽</a> <a href="#" target="_blank">PURE&MILD/泊美</a> <a href="#" target="_blank">baviphat/芭比菲特</a> <a href="#" target="_blank">Peter Thomas Roth/彼得罗夫</a> <a href="#" target="_blank">BeDOOK/比度克</a> <a href="#" target="_blank">BIODERMA/贝德玛</a> <a href="#" target="_blank">BKBarry-MBlistex/碧唇</a> </dd>
  </dl>
  <dl>
    <dt>CCC</dt>
    <dd> <a href="#" target="_blank">Fenix/长生鸟</a> <a href="#" target="_blank">For Beloved One/宠爱之名</a> <a href="#" target="_blank">CHARMZONE/婵真</a> </dd>
  </dl>
  <dl>
    <dt>D</dt>
    <dd> <a href="#" target="_blank">Dr.Jart+Dr.MJDior/迪奥</a> <a href="#" target="_blank">dodo</a> <a href="#" target="_blank">Dior/迪奥</a> <a href="#" target="_blank">Dove/多芬</a> <a href="#" target="_blank">DHC/蝶翠诗</a> <a href="#" target="_blank">Davidoff/大卫杜夫</a> </dd>
  </dl>
  <dl>
    <dt>E</dt>
    <dd> <a href="#" target="_blank">N-Dorphin/恩朵娉</a> <a href="#" target="_blank">OPERA/娥佩兰</a> <a href="#" target="_blank">ELF</a> <a href="#" target="_blank">eos</a> </dd>
  </dl>
  <dl>
    <dt>F</dt>
    <dd> <a href="#" target="_blank">芳草集</a> <a href="#" target="_blank">THEFACESHOP/菲诗小铺</a> <a href="#" target="_blank">Fanxishop/凡茜</a> <a href="#" target="_blank">FANCL/芳珂（芳凯尔）</a> <a href="#" target="_blank">VERSACE/范思哲</a> </dd>
  </dl>
  <dl>
    <dt>G</dt>
    <dd> <a href="#" target="_blank">ARDELL/艾黛尔</a> <a href="#" target="_blank">ANNASUI/安娜苏</a> <a href="#" target="_blank">ETUDEHOUSE/爱丽小屋</a> <a href="#" target="_blank">abeeco</a> <a href="#" target="_blank">AFU/阿芙</a> <a href="#" target="_blank">Egyptian-Magic-Cream/埃及魔法膏</a> <a href="#" target="_blank">adidas/阿迪达斯</a> </dd>
  </dl>
   
     
    </div>
 
  
  </div>
  <div class="cl"></div>
</div>

CSS代码

.clink{width:1000px;margin:0 auto;padding-bottom:10px;*padding-bottom:5px; overflow:hidden;}
.clink .ch3{font-weight:bold;overflow:hidden; border-bottom:5px solid #278D4B; height:39px; line-height:39px;}
.clink .ch3 a{float:right;height:35px;display:block; width:100px; text-align:center;font-weight:bold;color:#666; background: #EEEEEE; border-top:2px solid #FFFFFF; border-bottom:2px solid #EEEEEE;}
.clink .ch3 a.on{background:#278D4B;color:#fff;border:2px solid #278D4B;width:102px;font-size:16px;}
.clink .ch3 a:hover{text-decoration:none;}
.clink .cldiv{ padding-top:20px;overflow:hidden;height:auto;overflow: hidden; width:1011px; padding-right:-11px;}
.cldiv .un{display:none;}
.cldiv div{
/* 栏宽度 */
-webkit-column-width:336px;
-moz-column-width:336px;
-o-colum-width:336px;
column-width:336px;
/* 两栏之间的间距 */
-webkit-column-gap:1px;
-moz-column-gap:1px;
-o-column-gap:1px;
column-gap:1px;
  
}
.cldiv dl{
border:1px solid #efefef;border-radius:3px;background:#FAFAFA;
display:inline-block;
width:313px;
margin-bottom:10px;
padding:5px;
  
}
.cldiv dl dt{ font-size:28px;}
.cldiv dl dd a{ float:left; width: auto; letter-spacing:0.5px;  line-height: 14px;  color:#888; white-space:nowrap; overflow: hidden; text-overflow:ellipsis; padding:5px 10px;}
.cldiv dl:hover{border:1px solid #B1D082;background:#F0FBEB;}