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

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

   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. 解决eclipse复制粘贴js代码卡死的问题

    鸣谢:http://blog.csdn.net/zhangzikui/article/details/24805935 ---------------------------------------- ...

  2. java模拟OSUnMapTbl[]

    问题描述: 任务就绪表,记录当前就绪的任务,就绪表中把64个优先级的任务分成8组,优先级的1-3bit表示OSRdyTbl[]中组别OSRedyGrp,优先级的4-6bit表示每组中就绪任务的位置,当 ...

  3. 团体程序设计天梯赛-练习集L1-005. 考试座位号

    L1-005. 考试座位号 时间限制 200 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 陈越 每个PAT考生在参加考试时都会被分配两个座位号,一个 ...

  4. [笨木头FireFly 02]入门篇2_客户端发送请求，服务器处理请求

    原地址:http://www.9miao.com/question-15-53940.html 好,经过上一篇不权威的讲解,大家已经能轻易地让客户端和服务端连接起来了. 但是,仅仅是连接了,可它们俩不 ...

  5. 定长内存池之BOOST::pool

    内存池可有效降低动态申请内存的次数,减少与内核态的交互,提升系统性能,减少内存碎片,增加内存空间使用率,避免内存泄漏的可能性,这么多的优点,没有理由不在系统中使用该技术. 内存池分类: 1.      ...

  6. C++智能指针(auto_ptr)详解

    智能指针(auto_ptr) 这个名字听起来很酷是不是?其实auto_ptr 只是C++标准库提供的一个类模板,它与传统的new/delete控制内存相比有一定优势,但也有其局限.本文总结的8个问题足 ...

  7. 【mysql的设计与优化专题(3)】字段类型与合理的选择字段类型

    本篇博客稍微有点长,它实际上包括两个内容:一是mysql字段类型的介绍,二是在mysql建表过程中是如何正确选择这些字段类型; 字段类型 数值 MySQL 的数值数据类型可以大致划分为两个类别,一个是 ...

  8. Hibernate逍遥游记-第2章-使用hibernate.properties

    1. package mypack; import org.hibernate.*; import org.hibernate.cfg.Configuration; import java.util. ...

  9. POJ3687——Labeling Balls(反向建图+拓扑排序)

    Labeling Balls DescriptionWindy has N balls of distinct weights from 1 unit to N units. Now he tries ...

  10. poj 1159 Palindrome(dp)

    题目:http://poj.org/problem?id=1159 #include<iostream> #include<cstring> #include<cstdi ...