哎!突然发现天天更新意外的好难啊!
这回作的是三列的板块效果,由于不会描述,所以看图片吧!
至于内容,就别太在意了,毕竟是看着这个效果作的.
而效果则是鼠标悬浮,图片放大,利用transform: scale(1.2);
在通过css3的过渡,transition: transform 1s;
以及鼠标悬浮:hover
阴影box-shadow: 10px 10px 10px #ccc;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width= , user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <title></title> <style> .kuai{ width: 100%; margin: 0 auto; overflow: hidden; } .kuai>h1{ margin-top: 50px; text-align: center; } .kuai>p{ text-align: center; margin-bottom: 50px; } .kuai p span:hover{ color: #284f86; } .kuai ul li{ list-style-type: none; width: 33.33%; float: left; /* border: 1px solid #ccc; */ overflow: hidden; padding: 10px; box-sizing: border-box; } .kuai ul li img{ width: 100%; transition: transform 1s; } .div1{ overflow: hidden; border: 1px solid #ccc; } .div1 a{ display: block; color: #000; text-decoration: none; } .div1:hover{ box-shadow: 10px 10px 10px #ccc; } .tu{ width: 100%; overflow: hidden; } .tu img:hover{ transform: scale(1.2); } </style> </head> <body> <div class="kuai"> <h1>大咖云集，知识分享的开发者技术社区</h1> <p><span>实战干货、在线直播、专家问答、技术论坛，学习，成长，分享，共建</span> </p> <ul> <li> <div class="div1"><a href=""> <div class="tu"><img src="images/li.jpg" alt=""></div> <p>【聚能聊】怎样的持续交付工具和平台最适合你的组织？</p></a> </div> <div class="div2"> <p>【聚能聊】怎样的持续交付工具和平台最适合你的组织？</p> <p>【聚能聊】怎样的持续交付工具和平台最适合你的组织？</p> </div> </li> <li> <div class="div1"><a href=""><div class="tu"><img src="images/li.jpg" alt=""></div> <p>【聚能聊】怎样的持续交付工具和平台最适合你的组织？</p></a> </div> <div class="div2"> <p>【聚能聊】怎样的持续交付工具和平台最适合你的组织？</p> <p>【聚能聊】怎样的持续交付工具和平台最适合你的组织？</p> </div> </li> <li> <div class="div1"><a href=""><div class="tu"><img src="images/li.jpg" alt=""></div> <p>【聚能聊】怎样的持续交付工具和平台最适合你的组织？</p></a> </div> <div class="div2"> <p>【聚能聊】怎样的持续交付工具和平台最适合你的组织？</p> <p>【聚能聊】怎样的持续交付工具和平台最适合你的组织？</p> </div> </li> </ul> </div> </body> </html>
这是全部的代码,作为日后的储备吧!也就不加那么多的注释了