问题:贴友关于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 ...
随机推荐
- IntelliJ IDEA 进行js Debug调试
idea的js调试目前看来不同给力,一是玩转它需要安装谷歌插件支持,二是貌似存在一些bug... 一.新建一个jsp并打上断点 二.调试 idea出现提示: 安装JetBrains IDE Suppo ...
- jq获取元素到底部的距离
// var wh = $(window).height(),//是文档窗口高度 // ot = $("#icoimg").offset().top,//是标签距离顶部高度 // ...
- hdu 4678 Mine 博弈论
这是一题简单的博弈论!! 所有的空白+边界的数字(个数为n)为一堆,容易推出其SG函数值为n%2+1: 其他所有的数字(个数为m)的SG值为m%2. 再就是用dfs将空白部分搜一下即可!(注意细节) ...
- 微软在 .NET 3.5 新增了一个 HashSet 类,在 .NET 4 新增了一个 SortedSet 类,本文介绍他们的特性,并比较他们的异同。
微软在 .NET 3.5 新增了一个 HashSet 类,在 .NET 4 新增了一个 SortedSet 类,本文介绍他们的特性,并比较他们的异同. .NET Collection 函数库的 Has ...
- boost库在windows下的编译和使用
因为跨平台的原因,现在要使用到boost库,boost库非常大,现在处于摸索阶段. 首先来说boost库在window下的安装和使用. 一.下载 首先从boost官方主页http://www.boos ...
- python string 连接test
def strTest(): name = "" for i in range(10): name += "hello" #print name def str ...
- Git教程之分支管理之一
分支在实际中有什么用呢? 你创建了一个属于你自己的分支,别人看不到,别人还继续在原来的分支上正常工作,而你在自己的分支上干活,想提交就提交,直到开发完毕后,再一次性合并到原来的分支上,这样,既安全,又 ...
- 当当开源sharding-jdbc,轻量级数据库分库分表中间件
近期,当当开源了数据库分库分表中间件sharding-jdbc. Sharding-JDBC是当当应用框架ddframe中,从关系型数据库模块dd-rdb中分离出来的数据库水平分片框架,实现透明化数据 ...
- PHP 的面向方面编程
面向方面编程(AOP)对于PHP来说是一个新的概念.现在PHP对于 AOP 并没有官方支持,但有很多扩展和库实现了这个特性.本课中,我们将使用 Go! PHP library 来学习 PHP 如何进行 ...
- A9系统时钟用外部
问个笨蛋的问题,,电脑主板的主频是由外部时钟倍频得来,还是内部时钟倍频?? [ARM11]瘋子 2015/5/5 19:08:16 @蓝凌风 [x86]蓝凌 2015/5/5 19:08:25 外部 ...