加载中…

加载中...

个人资料
heart走走停停
heart走走停停 新浪个人认证
  • 博客等级:
  • 博客积分:0
  • 博客访问:19,586
  • 关注人气:16
  • 获赠金笔:0支
  • 赠出金笔:0支
  • 荣誉徽章:
相关博文
推荐博文
谁看过这篇博文
加载中…
正文 字体大小:

呜,似曾相识的面试题

(2013-10-06 18:02:03)
标签:

悬浮效果

百度题目

visibility

display

分类: 前端技术之css
<!DOCTYPE html>
<html>
   <head>
      <title>百度题目,css悬浮效果</title>
      <meta charset="utf-8"/>
      <style type="text/css">
      #container{width:300px;height:330px;background:#A7A9B9;margin: 0 auto;position: relative;}
      a{visibility: hidden;text-decoration: none;}
      a:hover{visibility:visible;}
      .show img,.pic2{position: absolute;margin:20px 0 0 25px;width: 250px;height: 222px;border: 0 none;}
      img{z-index: 2;visibility: visible;}
      .pic2{background: black;z-index: 3;opacity:0.4;filter:alpha(opacity=40);text-align:center;padding-top:110px;height: 112px;color:#fff;}
      .descrip{width: 250px;height: 70px;background: #fff;position: absolute;bottom:20px;margin-left: 25px;}
      .descrip img{width: 40px;height: 40px;margin:15px 0 0 15px;float:left;}
      .descrip h3{color: #58595F;font-size: 15px;margin:26px 0 0 5px;float:left;}
      </style>
   </head>
   <body>
       <div id="container">
         <a href="#" class="show">
          <div class="pic2">童年亦如美好的春天</div>
            <img src="http://c.hiphotos.baidu.com/album/w=2048/sign=34d886b45243fbf2c52ca1238446cb80/d4628535e5dde711626be04aa6efce1b9c1661d5.jpg"/>
         </a>
          <div class="descrip">
             <img src="http://c.hiphotos.baidu.com/album/w=2048/sign=34d886b45243fbf2c52ca1238446cb80/d4628535e5dde711626be04aa6efce1b9c1661d5.jpg"/>
             <h3>如此可爱的一个小菇凉</h3>
          </div>
       </div>
   </body>
</html>

0

阅读 评论 收藏 转载 喜欢 打印举报/Report
  • 评论加载中,请稍候...
发评论

    发评论

    以上网友发言只代表其个人观点,不代表新浪网的观点或立场。

      

    新浪BLOG意见反馈留言板 电话:4000520066 提示音后按1键(按当地市话标准计费) 欢迎批评指正

    新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 会员注册 | 产品答疑

    新浪公司 版权所有