内部结构：
复制内容到剪贴板
代码:
<div id="mylog">
<div class="listtab">
Tab选项卡
</div>
<div>
<h3>我的图片</h3>
<ul class="imagelist">
图片列表
</ul>
</div>
</div>基本样式表：
复制内容到剪贴板
代码:
图片列表
内部结构：
<ul class="imagelist">
<li>
<a href="..."><img src="..." /></a>
<p><a href="...">图片名称</a></p>
</li>
<li>
<a href="..."><img src="..." /></a>
<p><a href="...">图片名称</a></p>
</li>
...
</ul>基本样式表：
/*图片列表*/
.imagelist {
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
display: inline-block;
}
.imagelist li {
background: #F9F9F9;
float: left;
width: 130px;
height: 160px;
margin: 0.4em 4px 0 4px;
text-align: center;
}
.imagelist img {
width: 110px;
height: 120px;
border: 1px solid #FFF;
margin-top: 10px;
}
.imagelist a:hover img {
border-color: #DDD;
}
.imagelist p {
width: 110px;
height: 1.8em;
line-height: 1.8em;
overflow: hidden;
margin: 1px auto;
}
/*侧边栏中自动调整为单列显示*/
.sidearea .imagelist li {
float: none;
margin: 0.4em auto;
}
