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

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

   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. PHPCMS搭建wap手机网站

    PHPCMS搭建PC端网站比较方便,但是在wap手机端方面却不怎么实用,而且自带的手机建站感觉不是很好,而且模版不好控制,现在对其进行修改,手机建站个人感觉比较方便 首先在phpcms/libs/fu ...

  2. CSS两列及三列自适应布局方法整理

    布局 自适应 两列 三列 在传统方法的基础上加入了Flex布局并阐述各方法的优缺点,希望对大家有所帮助.先上目录: 两列布局:左侧定宽,右侧自适应 方法一:利用float和负外边距 方法二:利用外边距 ...

  3. 1198: [HNOI2006]军机调度 - BZOJ

    Description 凯萨拥有一支由n个人组成的雇佣军,他们靠在威尼斯商行接任务过活.这支军队的成份比较复杂,不同的人往往具有不同的技能,有的人还拥有多项技能.威尼斯商行的任务也参差不齐,有的需要几 ...

  4. spring mvc中的@PathVariable（转）

    鸣谢:http://jackyrong.iteye.com/blog/2059307 ------------------------------------------------ spring m ...

  5. js注册登录审核

    <script type="text/javascript"> $(function(){ $("#sendSms").click(function ...

  6. URAL 1260 Nudnik Photographer（递推）

    题目链接 题意 : 给你1到n这n个数,排成一排,然后1放在左边最开始,剩下的数进行排列,要求排列出来的数列必须满足任何两个相邻的数之间的差不能超过2,问你有多少种排列 思路 : 对于dp[n], n ...

  7. 阿里云 EDAS-HSF 用户指南

    阿里云 EDAS-HSF 用户指南 针对 EDAS v2.3.0©Alibaba EDAS 项目组2015/8/19 1 前言本文档旨在描述阿里云 EDAS 产品中应用服务化模块的基本概念,以及如何使 ...

  8. SaaS系列介绍之五: 我国SaaS市场分析

    1 我国SaaS市场现状 我国SaaS从ASP年代发展到今天,也有不少时间了.我国是个十几亿人的大国,国情复杂,各地贫富不均,发展不平衡.信息系统建设也是各树一帜,各地为王.特别是占有大量用户的中小企 ...

  9. POJ2965——The Pilots Brothers' refrigerator

    The Pilots Brothers' refrigerator Description The game “The Pilots Brothers: following the stripy el ...

  10. MapReduce编程系列 — 2：计算平均分

    1.项目名称: 2.程序代码: package com.averagescorecount; import java.io.IOException; import java.util.Iterator ...