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

叁歲伎倆 2022-08-12 00:18 92阅读 0赞

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

![SouthEast][]

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

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>

效果：

![SouthEast 1][]

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

来源：[http://www.ido321.com/457.html][http_www.ido321.com_457.html]

[SouthEast]: /images/20220810/881593f5642d421297433bca637920b1.png
[SouthEast 1]: /images/20220810/b49f895708374839a4c493ba8611249c.png
[http_www.ido321.com_457.html]: http://www.ido321.com/457.html

发表评论取消回复

表情：

评论列表（有 0 条评论，92人围观）

还没有评论，来说两句吧...

相关阅读

相关顶角贴纸效果

有时候我们会有这样的需求，在一个列表展示页面，有一些列表项是新添加的、或者热度比较高的，就会要求在其上面添加一个贴纸效果的小条 ![在这里插入图片描述][202003291

た入场券/ 2023年07月18日 15:29/ 0 赞/ 12 阅读

相关关于坛友的一个布局问题的解答

来源：[http://www.ido321.com/1147.html][http_www.ido321.com_1147.html] 需求：让select、ul、文字

太过爱你忘了你带给我的痛/ 2022年08月13日 15:59/ 0 赞/ 143 阅读

相关问题：关于一个坛友的html布局实现

来源：[http://www.ido321.com/888.html][http_www.ido321.com_888.html] 坛友的需求如图 ![SouthEa

骑猪看日落/ 2022年08月13日 00:35/ 0 赞/ 124 阅读

相关问题：关于贴友分类菜单的实现

来源：[http://www.ido321.com/868.html][http_www.ido321.com_868.html] 贴友需求，实现图示菜单的分类

Bertha 。/ 2022年08月12日 21:29/ 0 赞/ 87 阅读

相关问题：关于一个贴友的js留言板的实现

需求：用js做一个简单的留言板效果 html部分： 1: <!DOCTYPE> 2: <html lang="zh-en"> 3: <head>

末蓝、/ 2022年08月12日 01:17/ 0 赞/ 138 阅读

相关问题：关于贴友一个用js传递value默认值的简单实现

需求和代码如下： “这是我的代码：” 1: <input type="text" id="price2" value="333"/> 2: <input

﹏ヽ暗。殇╰゛Y/ 2022年08月12日 01:06/ 0 赞/ 95 阅读

相关问题：关于贴友的一个书本页面简单布局（html+css）的实现

贴友需求：以html+css仿照书本的页面实现布局效果（见图） ![SouthEast][] html代码： 1: <!-- 我的博客：http://www

ゝ一纸荒年。/ 2022年08月12日 00:22/ 0 赞/ 99 阅读

相关问题：关于坛友的一个js轮播效果的实现

![SouthEast][] 需求：点击向前按钮进行向前翻页，向后按钮进行向后翻页，点击中间蓝色小圆圈可以来回自由切换我的大概思路：先默认显示一个div 然后在原位置在

怼烎@/ 2022年08月12日 00:19/ 0 赞/ 129 阅读

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

今日在百度贴吧中，一贴有提出如下问题： ![SouthEast][] 对于这个问题，咱们贴上代码看效果 1: <html> 2: <head>

叁歲伎倆/ 2022年08月12日 00:18/ 0 赞/ 93 阅读

相关 CSS实现橡皮筋效果

![在这里插入图片描述][2020051309320223.gif] HTML代码： <body> <div class="container">

电玩女神/ 2021年07月26日 11:54/ 0 赞/ 687 阅读