百度2013校招试题
今天参加了百度的笔试题，有道题是css布局的，当时在考场上没想到那么仔细，那道题目好像是用html和css布局显示一个相册封面，大图高度不确定，当鼠标经过时，显示一个阴影透明图层；由于考场上写的比较匆忙，没有考虑到一下细节问题
实际我们不能用：hover{ width: 0; height:0; display:none;}中的设置，而是应该使用opacity,把透明度设置为0，不过这需要one和two标签在同一位置重合，这当然不难，只需要设置{position:absolute; top: 0; left: 0}就可以让两个标签重合；
其实实现题目真正的效果图如下：
当然还有些图层阴影没有实现， 具体的尺寸也有些问题，不过这都不是大问题！具体代码如下
<html><head><title></title><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><style type="text/css"> html body p{ margin: 0; padding: 0; } .main{ position: relative; width: 200px; height: 270px; margin: 0 auto; overflow: hidden; } .one{ position: absolute; top: 0; left: 0; z-index: 100; height: 200px; width: 200px; } .two{ width: 200px; height: 200px; position: absolute; top: 0; left: 0; background: #ccc; } img{ width: 200px; height: 200px; } .one img:hover{ opacity: 0; } div p{ position: absolute; top:50%; width: 100%; text-align: center; } .two img{ opacity: 0.5; } .foot{ padding: 10px; width: 100%; height: 50px; display: table-cell; vertical-align: middle; position: absolute; bottom: 0; } .foot img{ width: 50px; height: 50px; } .foot p{ position: absolute; top: 0; margin-left: 50px; height: 70px; line-height: 70px; vertical-align: middle; }</style></head><body><div class="main"> <div class="one"> <img src="01.jpg" alt=""> </div> <div class="two" id="two"> <img src="01.jpg" alt=""> <p>喵星人</p> </div> <div class="foot"> <img src="01.jpg" alt=""> <p>喵星人喵星人喵星人喵星人喵星</p> </div></div></body></html>吐槽一下，这么多代码，百度给的一页纸怎么可能写得下啊！
