百度2013校招考题 _Web前端

百度2013校招试题

今天参加了百度的笔试题，有道题是css布局的，当时在考场上没想到那么仔细，那道题目好像是用html和css布局显示一个相册封面，大图高度不确定，当鼠标经过时，显示一个阴影透明图层；由于考场上写的比较匆忙，没有考虑到一下细节问题

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
    html body{
        margin: 0;
        padding: 0;
    }
    .main{
        margin: 0 auto;
        width: 200px;
        height: 200px;
        overflow: hidden;
    }
    .one{
        width: 200px;
        background: #ccc;
    }
    .two{
        width: 200px;
        height:200px;
        background: rgba(255,255, 0, .5);
    }
    img{
        width: 200px;
        height: 200px;
    }
    .one:hover{
        display: none;
    }
</style>
</head>
<body>
<div class="main">
    <div class="one">
        <img src="01.jpg" alt="">
    </div>
    <div class="two" id="two">
        <p>hehheheh</p>
    </div>
</div>

</body>
</html>

这是我在考场上写的大致代码，可以看到，当鼠标经过one时，自动把one的display:none了，这样会导致一个问题，当one的display设置为none时，虽然下面的two自动上升顶替one，但是当one被隐藏时，hover就自动无效了，相当于鼠标移出了one，结果one自动恢复了原来的大小，这样会导致，one不停显示与隐藏。这样的确不符合要求

实际我们不能用：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>

吐槽一下，这么多代码，百度给的一页纸怎么可能写得下啊！