问题:贴友关于CSS效果的实现
今日在百度贴吧中,一贴有提出如下问题:
对于这个问题,咱们贴上代码看效果
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效果的实现的更多相关文章
- [转载] 高大上的 CSS 效果:Shape Blobbing
这篇大部分是转载,来自<高大上的 CSS 效果:Shape Blobbing>和 <Shape Blobbing in CSS> 有部分是自己理解和整理,配合效果要做出 app ...
- CSS 效果汇总
只要决心够, 就能征服痛苦. 把一些常用的 CSS 效果记录下来 1. 利用 z-index :hover 显示层 github 效果地址>> 此效果主要利用 a:hover 来改变 sp ...
- CSS效果:这里有你想要的CSS3漂亮的自定义Checkbox各种复选框
在原来有一篇文章写到了<CSS效果篇--纯CSS+HTML实现checkbox的思路与实例>. 今天这篇文章主要写各种自定义的checkbox复选框,实现如图所示的复选框: 大致的html ...
- CSS效果篇--这里有你想要的CSS3漂亮的自定义Checkbox各种复选框
在原来有一篇文章写到了<CSS效果篇--纯CSS+HTML实现checkbox的思路与实例>.这篇文章主要写各种自定义的checkbox复选框,实现如图所示的复选框: 大致的html代码都 ...
- CSS效果集锦(持续更新中)
高亮光弧效果 使用CSS3实现的一个高亮光弧效果,当鼠标hover到某一个元素上时,一道光弧从左向右闪过,效果如下: 代码如下: <!DOCTYPE html> <html lang ...
- 几个简单实用的css效果
1.要使按钮具有3D效果,只要将它的左上部分边框设置为浅色,右下部分边框设置为深色即可. eg:#button { background: #888; border: 2px solid; borde ...
- 一些常用的html/CSS效果---小技巧
我常用的重置样式表reset.css /*===============基础信息================*/ *{border: 0;padding: 0;margin: 0;} table ...
- html 和css 效果--整理集合篇
一.如何用一张图片做背景图,并且图片自适应div的大小 background: url("../stu_wengu.png") center center no-repeat; b ...
- CSS效果:动态图标
HTML: <html lang="en"> <head> <meta charset="UTF-8"> <meta ...
随机推荐
- 根据不同ip进入不同页面
function GetIP() { $cip = ""; if(!empty($_SERVER["HTTP_CLIENT_IP"])){ $cip = $_S ...
- 使用 PIVOT 和 UNPIVOT
http://msdn.microsoft.com/zh-cn/library/ms177410%28v=SQL.90%29.aspx 可以使用 PIVOT 和 UNPIVOT 关系运算符将表值表达式 ...
- memcached 在window下的安装与使用
memcached搭建缓存系统 一.概念 Memcached是danga.com(运营LiveJournal的技术团队)开发的一套分布式内存对象缓存系统,用于在动态系统中减少数据库负载,提升性能. 二 ...
- log4j日志输出到web项目指定文件夹
感谢 eric2500 的这篇文章:http://www.cxyclub.cn/n/27860/ 摘要:尝试将log4j的文件日志输出到web工程制定目录,遇到了很多问题,最终在eric2500的指导 ...
- Good Bye 2015 A
Problem A:http://codeforces.com/problemset/problem/611/A A. New Year and Days 题意:某人要在2016年收集糖果,有两种不同 ...
- WPF 位置转化和动画
位置转化 private void DrawScale() { double majorTickUnitValue = this.ScaleSweepLenth / this.MajorDivisio ...
- 2013 Multi-University Training Contest 5 k-th point
刚开始我也不知道怎么做,后来慢慢就推出来了…… 对于样例 2 1 0,结果是2/3 2 2 0,结果是4/5 3 2 0,结果是6/7 3 2 1,结果是9/14=6/7*3/4 …… 之后就会发现每 ...
- maven 如何解决因本地jar导致的编译错误
如何解决Maven依赖本地非repository中的jar包,依赖jar包放在WEB-INF/lib等目录下的情况客户端编译出错的处理.http://www.mamicode.com/info-det ...
- POJ2533——Longest Ordered Subsequence(简单的DP)
Longest Ordered Subsequence DescriptionA numeric sequence of ai is ordered if a1 < a2 < ... &l ...
- 基于redis实现的分布式锁
基于redis实现的分布式锁 我们知道,在多线程环境中,锁是实现共享资源互斥访问的重要机制,以保证任何时刻只有一个线程在访问共享资源.锁的基本原理是:用一个状态值表示锁,对锁的占用和释放通过状态值来标 ...