今日在百度贴吧中，一贴有提出如下问题：

对于这个问题，咱们贴上代码看效果

   1: <html>
   2: <head>
   3:     <meta http-equiv="content-type" content="text/html;charset=utf-8">
   4:     <style type="text/css">
   5:         #div1
   6:         {
   7:             margin: 0 auto;
   8:             width: 300px;
   9:             border: 1px solid black;
  10:         }
  11:         #div2
  12:         {
  13:             margin-top: 10%;
  14:             margin-left: -30px;
  15:             margin-right: -30px;
  16:             margin-bottom: 10%;
  17:             overflow: hidden;
  18:         }
  19:     </style>
  20: </head>
  21: <body>
  22: <div id="div1">
  23:         <div id="div2">
  24:             <img src="bei.jpg" alt="图片加载失败">
  25:         </div>
  26: </div>
  27: </body>
  28: </html>

效果：

简单阐述; 图片放在子div中，而子div没有设置高宽，所以img的大小就撑起了子div的大小，margin值是根据父div及效果图来设置的。如果你有其他思路，欢迎交流

来源：http://www.ido321.com/457.html

问题：贴友关于CSS效果的实现的更多相关文章

  1. [转载] 高大上的 CSS 效果：Shape Blobbing

    这篇大部分是转载,来自<高大上的 CSS 效果:Shape Blobbing>和 <Shape Blobbing in CSS> 有部分是自己理解和整理,配合效果要做出 app ...

  2. CSS 效果汇总

    只要决心够, 就能征服痛苦. 把一些常用的 CSS 效果记录下来 1. 利用 z-index :hover 显示层 github 效果地址>> 此效果主要利用 a:hover 来改变 sp ...

  3. CSS效果：这里有你想要的CSS3漂亮的自定义Checkbox各种复选框

    在原来有一篇文章写到了<CSS效果篇--纯CSS+HTML实现checkbox的思路与实例>. 今天这篇文章主要写各种自定义的checkbox复选框,实现如图所示的复选框: 大致的html ...

  4. CSS效果篇--这里有你想要的CSS3漂亮的自定义Checkbox各种复选框

    在原来有一篇文章写到了<CSS效果篇--纯CSS+HTML实现checkbox的思路与实例>.这篇文章主要写各种自定义的checkbox复选框,实现如图所示的复选框: 大致的html代码都 ...

  5. CSS效果集锦（持续更新中）

    高亮光弧效果 使用CSS3实现的一个高亮光弧效果,当鼠标hover到某一个元素上时,一道光弧从左向右闪过,效果如下: 代码如下: <!DOCTYPE html> <html lang ...

  6. 几个简单实用的css效果

    1.要使按钮具有3D效果,只要将它的左上部分边框设置为浅色,右下部分边框设置为深色即可. eg:#button { background: #888; border: 2px solid; borde ...

  7. 一些常用的html/CSS效果---小技巧

    我常用的重置样式表reset.css /*===============基础信息================*/ *{border: 0;padding: 0;margin: 0;} table ...

  8. html 和css 效果--整理集合篇

    一.如何用一张图片做背景图,并且图片自适应div的大小 background: url("../stu_wengu.png") center center no-repeat; b ...

  9. CSS效果：动态图标

    HTML: <html lang="en"> <head> <meta charset="UTF-8"> <meta ...

随机推荐

  1. linux命令useradd添加用户详解

    1.作用 useradd或adduser命令用来建立用户帐号和创建用户的起始目录,使用权限是超级用户. 2.格式 useradd [-d home] [-s shell] [-c comment] [ ...

  2. [转载]Sublime Text 2 - 性感无比的代码编辑器！程序员必备神器！跨平台支持Win/Mac/Linux

    代码编辑器或者文本编辑器,对于程序员来说,就像剑与战士一样,谁都想拥有一把可以随心驾驭且锋利无比的宝剑,而每一位程序员,同样会去追求最适合自己的强大.灵活的编辑器,相信你和我一样,都不会例外. 我用过 ...

  3. Ubuntu的挂起和休眠

    Ubuntu的挂起和休眠 之前一直没关注过这方面的信息,因为以前只是在台式机上面用Ubuntu,笔记本一直都是Windows.随着Windows越来越傻冒,最近决定将常用系统转为Ubuntu,才注意到 ...

  4. 【更新链接】U盘启动制作工具（UDTOOL） v3.0.2014.0427

    [校验值] 文件: UDTOOLV3_Setup.exe大小: 525 MB版本: 3.0.2014.0427时间: 2014年4月27日MD5: 2E5187B7D9081E8A69B4DC45C8 ...

  5. C++开源跨平台类库集

    在如下的库支持下,开发的系统可以很方便移植到当前大部分平台上运行而无需改动,只需在对应的平台下 用你喜欢的编译器 重新编译即可 经典的C++库   STLport-------SGI STL库的跨平台 ...

  6. POJ1260Pearls

    http://poj.org/problem?id=1260 题意 :这个题大概是讲,给你几种等级不同的珠宝,然后告诉你它的数量和价值,等级是升序排列的,且随等级的升高价值也随之升高,但为了防止有的客 ...

  7. mybatis怎样配置数据库集群

    场景:一个读数据源一个读写数据源. 原理:借助spring的[org.springframework.jdbc.datasource.lookup.AbstractRoutingDataSource] ...

  8. 关于JavaScript中的setTimeout()链式调用和setInterval()探索

    http://www.cnblogs.com/Wenwang/archive/2012/01/06/2314283.html http://www.cnblogs.com/yangjunhua/arc ...

  9. ajax返回son数据

    JSON 只是一种文本字符串.它被存储在 responseText 属性中 为了读取存储在 responseText 属性中的 JSON 数据,需要根据 JavaScript 的 eval 语句. 函 ...

  10. SOA基础

    每个系统上都有多种业务逻辑,这就像在一个小超市中,一个人负责收银.清洁.摆货.咨询等各种各样的事情,当来超市的顾客多到一定程度,这个人就没办法再负责这么多的事情了,系统也同样如此. 第一个现象就是系统 ...