网站制作学习网DIV+CSS→正文:标准组合-上图下标
字体:

标准组合-上图下标

DIV+CSS 2011/4/12 16:33:03  点击:不统计

http://%77%77%77%2E%66网站制作%6F学习网%72%61%73%70%2E%63%6E
http://%77%77%77%2E%66%6F%72%61%73%70%2E%63%6E
css样式:
<style type="text/css">
<!--
*{
    margin:0px;
    padding:0px;
    border:0px;
    list-style-type:none;
    font-size:12px;
    text-decoration: none;
}
.list{
    width: 530px;
    border: 1px solid #B0C5E4;
    overflow: hidden;
}
.clear{
    clear:both;
    display:block;
    overflow:hidden;
    font-size: 0px;
}
.list .title {
    height: 32px;
    line-height: 32px;
    background-image: url(images/bg_repeatx.png);
    background-repeat: repeat-x;
    background-position: 0px -164px;
    padding-right: 10px;
    padding-left: 5px;
    clear: both;
}
.list .title h4 {
    font-size: 14px;
    font-weight: bold;
    float: left;
    background-image: url(images/icon.gif);
    background-repeat: no-repeat;
    background-position: 0px 10px;
    padding-left: 12px;
}
.list .title a {
    float: right;
    color: #316AC5;
}
.list .title a:hover {
    float: right;
    color: #FF0000;
    text-decoration: underline;
}
.list ul {
    overflow: auto;
    clear: both;
    _height:1%;
    padding-top: 15px;
    padding-left: 20px;
    padding-bottom: 5px;
}
.list ul li{
    width: 106px;
    float: left;
    margin-right: 20px;
}
.list ul li i {
}
.list  ul  li  i img {
    display: block;
    height: 100px;
    width: 100px;
}
.list   ul   li    i a  {
    display: block;
    border: 1px solid #CCC;
    padding: 2px;
}
.list   ul   li   i a:hover  {
    border: 1px solid #F00;
}
.list  ul  li  em{
    text-align:center;/*日期右对齐*/
    display: block;
    font-weight: bold;
    line-height: 26px;
    font-style: normal;
}
.list  ul  li  em  a {
    color:#333;
}
.list  ul  li  em  a:hover {
    color:#FF0000;
    text-decoration: underline;
}
-->
</style>

div布局:

<div class="list clear">
<div class="title"><h4>网站制作</h4><a href="" target="_blank" title="">查阅更多</a></div>
<ul>
<li><i><a href="#" target="_blank"><img src="images/demo_pic.jpg" alt="标准组合" width="100" height="100" /></a></i>
<em><a href="http://www.forasp.cn" title="网站制作学习网" target="_blank">标准组合</a></em></li>
<li><i><a href="#" target="_blank"><img src="images/demo_pic.jpg" alt="标准组合" width="100" height="100" /></a></i>
<em><a href="http:/www.forasp.cn" title="网站制作学习网" target="_blank">标准组合</a></em></li>
<li><i><a href="#" target="_blank"><img src="images/demo_pic.jpg" alt="标准组合" width="100" height="100" /></a></i>
<em><a href="http://www.forasp.cn" title="网站制作学习网" target="_blank">标准组合</a></em></li>
<li><i><a href="#" target="_blank"><img src="images/demo_pic.jpg" alt="标准组合" width="100" height="100" /></a></i>
<em><a href="http://www.forasp.cn" title="网站制作学习网" target="_blank">标准组合</a></em></li>
<li><i><a href="#" target="_blank"><img src="images/demo_pic.jpg" alt="标准组合" width="100" height="100" /></a></i>
<em><a href="http:/www.forasp.cn" title="网站制作学习网" target="_blank">标准组合</a></em></li>
<li><i><a href="#" target="_blank"><img src="images/demo_pic.jpg" alt="标准组合" width="100" height="100" /></a></i>
<em><a href="http://www.forasp.cn" title="网站制作学习网" target="_blank">标准组合</a></em></li>
<li><i><a href="#" target="_blank"><img src="images/demo_pic.jpg" alt="标准组合" width="100" height="100" /></a></i>
<em><a href="http:/www.forasp.cn" title="网站制作学习网" target="_blank">标准组合</a></em></li>
<li><i><a href="#" target="_blank"><img src="images/demo_pic.jpg" alt="标准组合" width="100" height="100" /></a></i>
<em><a href="http:/www.forasp.cn" title="网站制作学习网" target="_blank">标准组合</a></em></li>
</ul>
</div>

网站制作学习网Foasp.cn
forasp.cn

·上一篇:div+css制作上左右下的框架页面 >>    ·下一篇:标准组合-一列结构文字列表 >>
推荐文章
最新文章