注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

米欧互联

No matter what you want to express……

 
 
 

日志

 
 
关于我

{ note: ‘不会编程的设计狮不是好科研狗’ }

网易考拉推荐

仿百度相册首页——CSS展示柜效果  

2013-10-17 20:25:10|  分类: html |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
效果图:

仿百度相册首页——CSS展示柜效果 - 湖小叶叶 - 米欧光影工作室
 
作用:
用于信息的分类显示。
鼠标悬停变蓝,悬停到文字上,文字继续变色。

代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>仿百度相册首页——CSS展示柜效果</title>

<!-- -->
<style>

/*reset*/
html { color: #000000; line-height: 1.5;}
body { font: 12px/1.5 arial,sans-serif;}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
margin: 0; padding: 0;}
ol, ul { list-style: none outside none;}
h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal;}

a { text-decoration: none;}
*::-moz-placeholder { color: #CCCCCC;}


#wrap { word-break: break-all; word-wrap: break-word;
margin:0 auto; border:#ff9600 1px solid; display:solid;
height:500px; width:990px;
padding:35px;}


/*
就是这几个标签的效果
<ul id=hot-list>
<li class="hot-list-item">
<dl class="tile">
<dt class="tile-tag tile-left">
<a target="_blank" class="tile-tag-block" href="/square/282847">
<span class="tile-tag-block-title">
美女
</span>
</a>
</dt>
<dd class="tile-subtags tile-right">
<a target="_blank" class="tile-subtags-item" href="/square/283103">
写真
</a>


*/






/*标题*/
.hot-title {
color: #333333;
float: left;
font-family: "微软雅黑",SimSun,arial;
font-size: 20px;
line-height: 54px;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
width: 900px;
}





/*框架开始,内容与外框的结构*/
.hot-list {
float: left;
margin-bottom: -10px;
position: relative;
width: 990px;
}

.hot-list-item {
float: left;
margin-bottom: 10px;
margin-right: 10px;
width: 188px;
}


/*全部内容*/
.tile {
background-color: #333333;
height: 188px;
position: relative;
transition: background-color 300ms linear 0s, box-shadow 300ms ease 0s;
width: 188px;
}
.tile:hover {
background-color: #00A2D4;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
}



.tile-tag {
height: 122px;
position: absolute;
width: 60px;
z-index: 2;
}


/*左边大标签 中间分割线*/
.tile-left {
border-right: 1px solid #717171;
left: 30px;
top: 33px;
transition: border-color 300ms linear 0s;
}
.tile-right {
left: 108px;
top: 33px;
}
.tile:hover .tile-left { border-right-color: #4DBEE1;}






.tile-tag-block {
display: table;
height: 188px;
left: -30px;
padding-left: 30px;
padding-right: 126px;
position: absolute;
top: -33px;
width: 32px;
}
.tile-tag-block-title {
color: #FFFFFF;
display: table-cell;
font-family: "微软雅黑",SimSun,arial;
font-size: 30px;
line-height: 36px;
vertical-align: middle;
width: 32px;
}






/*subtitle*/
.tile-subtags {
height: 122px;
overflow: hidden;
position: absolute;
z-index: 2;
}
.tile-subtags-item {
border-radius: 2px 2px 2px 2px;
color: #FFFFFF;
display: inline-block;
height: 22px;
line-height: 22px;
margin-bottom: 6px;
padding: 2px 10px;
}


.tile-subtags-item:hover {
background-color:rgba(0,0,0,.6);
background-color:#000\9;
filter:alpha(opacity=60);

-webkit-transition:background-color 300ms;
-moz-transition:background-color 300ms;
-o-transition:background-color 300ms;
-ms-transition:background-color 300ms;
transition:background-color 300ms}
}

</style>



</head>

<body>

<div id=wrap>

<h3 class="hot-title">
热门推荐
</h3>

<ul id=hot-list>
<li class="hot-list-item">
<dl class="tile">
<dt class="tile-tag tile-left">
<a target="_blank" class="tile-tag-block" href="/square/282847">
<span class="tile-tag-block-title">
美女
</span>
</a>
</dt>
<dd class="tile-subtags tile-right">
<a target="_blank" class="tile-subtags-item" href="/square/283103">
写真
</a>
<a target="_blank" class="tile-subtags-item" href="/square/290527">
性感
</a>
<a target="_blank" class="tile-subtags-item" href="/square/290783">
气质
</a>
<a target="_blank" class="tile-subtags-item" href="/square/311775">
校花
</a>
</dd>
</dl>
</li>




<li class="hot-list-item">
<dl class="tile">
<dt class="tile-tag tile-left">
<a target="_blank" class="tile-tag-block" href="/square/282847">
<span class="tile-tag-block-title">
摄影
</span>
</a>
</dt>
<dd class="tile-subtags tile-right">
<a target="_blank" class="tile-subtags-item" href="/square/283103">
风景
</a>
<a target="_blank" class="tile-subtags-item" href="/square/290527">
人像
</a>
<a target="_blank" class="tile-subtags-item" href="/square/290783">
静物
</a>
<a target="_blank" class="tile-subtags-item" href="/square/311775">
唯美
</a>
</dd>
</dl>
</li>




<li class="hot-list-item">
<dl class="tile">
<dt class="tile-tag tile-left">
<a target="_blank" class="tile-tag-block" href="/square/282847">
<span class="tile-tag-block-title">
家居
</span>
</a>
</dt>
<dd class="tile-subtags tile-right">
<a target="_blank" class="tile-subtags-item" href="/square/283103">
家装
</a>
<a target="_blank" class="tile-subtags-item" href="/square/290527">
客厅
</a>
<a target="_blank" class="tile-subtags-item" href="/square/290783">
卧室
</a>
<a target="_blank" class="tile-subtags-item" href="/square/311775">
样板间
</a>
</dd>
</dl>
</li>





<li class="hot-list-item">
<dl class="tile">
<dt class="tile-tag tile-left">
<a target="_blank" class="tile-tag-block" href="/square/282847">
<span class="tile-tag-block-title">
宠物
</span>
</a>
</dt>
<dd class="tile-subtags tile-right">
<a target="_blank" class="tile-subtags-item" href="/square/283103">
狗狗
</a>
<a target="_blank" class="tile-subtags-item" href="/square/290527">
萌猫
</a>
<a target="_blank" class="tile-subtags-item" href="/square/290783">
萌物
</a>
<a target="_blank" class="tile-subtags-item" href="/square/311775">
兔子
</a>
</dd>
</dl>
</li>




<li class="hot-list-item">
<dl class="tile">
<dt class="tile-tag tile-left">
<a target="_blank" class="tile-tag-block" href="/square/282847">
<span class="tile-tag-block-title">
动漫
</span>
</a>
</dt>
<dd class="tile-subtags tile-right">
<a target="_blank" class="tile-subtags-item" href="/square/283103">
火影
</a>
<a target="_blank" class="tile-subtags-item" href="/square/290527">
MT
</a>
<a target="_blank" class="tile-subtags-item" href="/square/290783">
海贼王
</a>
<a target="_blank" class="tile-subtags-item" href="/square/311775">
柯南
</a>
</dd>
</dl>
</li>
</ul>


</body>

</html>



refer
  评论这张
 
阅读(143)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017