<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
   * {
    margin: 0;
    padding: 0;
   }
   body{
    background-color: #cccccc;
    background: url(img/triangles.png) repeat;
   }
   .container{
    width: 805px;
    height: 320px;
    overflow: hidden;
    margin: 100px auto;
    -webkit-box-shadow: 0 0 5px #000;
   }
   .container li{
    width:160px;
    display: block;
    position: relative;
    float: left; 
    border-left: 1px solid #888; 
    -webkit-box-shadow: 0 0 25px #000;
    -webkit-transition: all 0.5s;
   }
   
   .container ul:hover li {width: 40px;}
   .container ul li:hover {width: 640px;}
   .container li img {
    display: block;
   }
   .image_title {
    background: rgba(0, 0, 0, 0.5);
    position: absolute;
    left: 0;
    bottom: 0; 
    width: 640px; 
   }
   .image_title a {
    display: block;
    color: #fff;
    text-decoration: none;
    padding: 20px;
    font-size: 16px;
   }
  </style>
 </head>
 <body>
  <div class="container">
   <ul>
    <li>
     <div class="image_title">
      <a href="#">KungFu Panda</a>
     </div>
     <a href="#">
      <img src="img/img1.jpg">
     </a>
    </li>
     <li>
   <div class="image_title">
    <a href="#">Toy Story 2</a>
   </div>
   <a href="#">
    <img src="img/img2.jpg">
   </a>
   </li>
  <li>
   <div class="image_title">
    <a href="#">Wall-E</a>
   </div>
   <a href="#">
    <img src="img/img3.jpg">
   </a>
  </li>
  <li>
   <div class="image_title">
    <a href="#">Up</a>
   </div>
   <a href="#">
    <img src="img/img4.jpg">
   </a>
  </li>
  <li>
   <div class="image_title">
    <a href="#">Cars 2</a>
   </div>
   <a href="#">
    <img src="img/img5.jpg">
   </a>
  </li>
   </ul>
  </div>
 </body>
</html>

用HTML，css完成的百叶窗效果，新手必看的更多相关文章

  1. 新手必看】Highcharts的100个基础问答

    新手必看]Highcharts的100个基础问答 2014-12-2 10:59| 发布者: Mr.Zhang| 查看: 2749| 评论: 3|来自: Highcharts中文论坛   摘要: 1. ...

  2. CSS中属性的详细运用（新手必看）

    =不同的浏览器有不同的默认字体大小font-size 这里以谷歌浏览器为准字体大小为10px   (其他浏览器是12px) 1.这里强调一个备注:属性继承 a 是特殊的,要改变a里面的颜色,必须在它后 ...

  3. 简单几步，教你学会PHP，新手必看！

    学习php的方法,学东西,永远不要妄想有速成这一说,告诉你了一个方式,但是缺少努力这一环节,那也是白搭.掌握好的学习方法非常必要,看看这篇如何学习PHP培训的方法,在此提醒一下大家,PHP不像别的科目 ...

  4. 新手必看的jQuery优化笔记十则

    jQuery优化 1.简介 jQuery正在成为Web开发人员首选的JavaScript库,作为Web开发者,除了要了解语言和框架的应用技巧外,如何提升语言本身的性能也是开发人员应该思考的问题.文章就 ...

  5. js知识学习图谱，新手必看

    前端新手学习也不外乎就是Html  css  html5  css3  这是最基本的,学会这些仅仅可以说是会写布局,写网页,不算前端开发,还有最重要的js,jq要学习,我自己java后台转前端,现在复 ...

  6. 🈲Eclipse通过jdbc连接数据库制作简单登陆界面【新手必看】

    一.前言: 做网站开发,要求有多种搭配方式,前台技术可以使用PHP.ASP.JSP.ASP.NET.CGI等任何一种: 需要用到的基础语言用的最多的就是HTML/CSS.JS.JAVA.XML这些了, ...

  7. 「新手必看」Python+Opencv实现摄像头调用RGB图像并转换成HSV模型

    在ROS机器人的应用开发中,调用摄像头进行机器视觉处理是比较常见的方法,现在把利用opencv和python语言实现摄像头调用并转换成HSV模型的方法分享出来,希望能对学习ROS机器人的新手们一点帮助 ...

  8. iOS-上架APP之启动页设置（新手必看！）

    今天自己做的小作品准备提交,就差一个启动页,各种百度,各种搜,结果还好最后终于出来了,和大家分享一下,这个过程中遇到的各种小问题.(注XCode版本为7.2) 1.启动页一般都是图片,因为苹果有4,4 ...

  9. [转]Web.config配置文件详解(新手必看)

    本文转自:http://www.cnblogs.com/gaoweipeng/archive/2009/05/17/1458762.html 花了点时间整理了一下ASP.NET Web.config配 ...

随机推荐

  1. Java发送邮件Utils

    /** * 类文件说明 * */ public class SendMail { Logger log = Logger.getLogger(SendMail.class); /** * 发送邮件 * ...

  2. 搜索——深度优先搜索（DFS）

    设想我们现在身处一个巨大的迷宫中,我们只能自己想办法走出去,下面是一种看上去很盲目但实际上会很有效的方法. 以当前所在位置为起点,沿着一条路向前走,当碰到岔道口时,选择其中一个岔路前进.如果选择的这个 ...

  3. 【原】Coursera—Andrew Ng机器学习—编程作业 Programming Exercise 3—多分类逻辑回归和神经网络

    作业说明 Exercise 3,Week 4,使用Octave实现图片中手写数字 0-9 的识别,采用两种方式(1)多分类逻辑回归(2)多分类神经网络.对比结果. (1)多分类逻辑回归:实现 lrCo ...

  4. 深入剖析SolrCloud（四）

    作者:洞庭散人 出处:http://phinecos.cnblogs.com/ 本博客遵从Creative Commons Attribution 3.0 License,若用于非商业目的,您可以自由 ...

  5. linux su su -

    本人以前一直习惯直接使用root,很少使用su,前几天才发现su与su -命令是有着本质区别的! 大部分Linux发行版的默认账户是普通用户,而更改系统文件或者执行某些命令,需要root身份才能进行, ...

  6. SqlServer-truncate && delete && drop 的区别

    有些人在删除表的所有记录的时候,喜欢这样来——不给DELETE 语句提供WHERE 子句,表中的所有记录都将被删除.但这种方法是不可取的,正确的应该使用 TRUNCATE TABLE tb_name ...

  7. Luogu 2573 [SCOI2012]滑雪

    BZOJ 2753 首先可以按照题目要求的把所有的有向边建出来,然后进去广搜就可以求出第一问的解,然后考虑如何求解第二问,我们把所有搜到的边按照到达的点的高度位第一关键字,边的长度为第二关键字排序之后 ...

  8. Luogu 1379 八数码难题

    吐槽:此题就是一点一点卡过去的 警告: 1.千万不能用dfs搜这种东西(dfs需要遍历所有状态才能找到最优解), 分分钟爆炸 2.写结构体的时候要综合判断&的加和不加 Code: // luo ...

  9. Python基础-4

    目录 迭代器&生成器 装饰器 Json & pickle 数据序列化 软件目录结构规范 1.列表生成式,迭代器&生成器 看列表[0, 1, 2, 3, 4, 5, 6, 7, ...

  10. 时间日期控件的处理-Selenium

    很多人问时间日期的空间怎么处理,但是时间日期控件各种各样,你可能遇到正常点的像这样: 当然也可能遇到难点的,像这样: 当然,也不排除会遇到变态的,像这样: 呵呵,真要一个个想着怎么去选择,简直是非人类 ...