给刚学网页css+html的入门者的一个小案例,代码简单
html布局:
《head>图文列表 《body> 《div class="box">热门新品 更多>
css样式:
*{ margin:0; padding:0; } body{ font-family:"微软雅黑"; background-color:#ddd; } .box{ width:1024px; height:400px; background:#fff; margin:30px auto; padding:20px; } .box .head span{ font-size:18px; color:#333; } .box .head{ margin-bottom:20px; } .box .head a{ text-decoration:none; float:right; font-size:15px; color:#CD0707; } .box .head a:hover{ color:#F00; } .box ul li{ width:210px; height:140px; list-style:none; position:relative; float:left; margin-left:30px; margin-bottom:30px; overflow:hidden; } .box ul li .deatil{ width:210px; height:140px; background:rgba(0,0,0,0.7); position:absolute; top:-240px; -webkit-transition:all 0.3s ease; -o-transition:all 0.3s ease; -moz-transition:all 0.3s ease; -ms-transition:all 0.3s ease; } .box ul li .deatil h2{ font-size:18px; color:#fff; margin-bottom:20px; text-align:center; padding-top:30px; } .box ul li .deatil a{ font-size:15px; display:block; color:#fff; background-color:#F00; text-decoration:none; width:100px; height:40px; text-align:center; line-height:40px; margin:0 auto; } .box ul li:hover .deatil{ top:0; }
评论0