码迷,mamicode.com
首页 > Web开发 > 详细

问题:贴友关于CSS效果的实现

时间:2014-09-06 09:47:23      阅读:253      评论:0      收藏:0      [点我收藏+]

标签:css

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

bubuko.com,布布扣

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

   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>
效果:

bubuko.com,布布扣

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


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

问题:贴友关于CSS效果的实现

标签:css

原文地址:http://blog.csdn.net/u011043843/article/details/39098673

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!