我想问下亲网站这个样子的图文列表效果怎么写的呢?鼠标放上去背景变色,能否给出详细实现的HTML代码与CSS代码,万分感谢。
这种图文混排可以说是很简单的一种了。用div ul li即可实现,下面给你范例代码。
HTML代码部分
<div class="zycase"> <ul> <li><a href="www.qdxw.net" target="_blank" ><img src='图片路径' /> <p>青岛星网</p> </a></li> <li><a href="www.qdxw.net" target="_blank"><img src='图片路径' /> <p>青岛星网</p> </a></li> </ul> </div>
CSS代码部分
.zycase{ border-bottom:1px solid #eeeeee; border-left:1px solid #eeeeee; border-right:1px solid #eeeeee; height:222px;} .zycase ul li{ float:left; width:137px; margin-top:15px; margin-left:12px;} .zycase img { width:137px; height:140px;display:block;} .zycase p{ height:46px; line-height:22px; width:125px; background:#eeeeee;overflow: hidden; margin:0px; padding:0px; border:0px; padding:2px 6px;} .zycase a{ font-size:13px;} .zycase ul li a:hover{ text-decoration:none;} .zycase a:hover p{ background:#69b0f6; color:#fff;}
运行预览效果就是跟你提问所示的图片列表是一模一样的。
青岛星网温馨提醒:这是很简单的div+css布局结构的一角,可以作为入门学习练习。