css.day.05.eg
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>浮动对标准流的影响</title>
<style type="text/css">
body,div,ul,li,ol,h1,h2,h3,h4,h5,input,textarea,p{margin:0; padding:0;}
body{font-size:14px; color:#3c3c3c; font-family:Arial, Helvetica, sans-serif;}
a{text-decoration:none; color:#3c3c3c;}
a:hover{color:#f00; text-decoration:underline;}
.main{width:800px;margin:0 auto;}
.left{width:300px; height:200px; background-color:#0FF; float:left;}
.right{width:499px; height:200px; background-color:#CCC; float:right;}
.footer{height:100px; width:800px; background-color:#000; margin:0 auto}
.clearfix:after,.clearfix:before{content:"";display:table;}
.clearfix:after{clear:both;}
.clearfix{zoom:1;}
</style>
</head>
<body>
<div class="main clearfix">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="footer"></div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>overflow检查内容</title>
<style type="text/css">
.father{width:600px; border:1px solid #f00; margin:0 auto; overflow:hidden;}
.damao,.ermao{width:200px; height:200px; background-color:#00F; margin:0 5px; float:left;}
</style>
</head>
<body>
<div class="father">
<div class="damao"></div>
<div class="ermao"></div>
<div class="damao"></div>
<div class="ermao"></div>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>overflow隐藏</title>
<style type="text/css">
.box{width:200px; height:200px; border:1px solid #f00; overflow:hidden;}
</style>
</head>
<body>
<div class="box">
一个大盒子，里面放着两个小盒子，这是典型的标准流的写法，这个父盒子可以不用指定高度，因为，小盒子可以给大盒子撑开，但是，如果这两个小盒子浮动了，脱离了标准流，浮起来，这时候，两个小盒子就不再是标准流，那么，父盒子就检测不到里面的内容。这个父盒子就会变成一条线。我们可以用overflow:hidden 检测复合内部内容。
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>display:none</title>
<style type="text/css">
.one{width:200px; height:100px; background-color:#F00; /*display:none;*/ visibility:hidden;}
.two{width:200px; height:100px; background-color:#00F;}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>绝对定位</title>
<style type="text/css">
body,div,ul,li,ol,h1,h2,h3,h4,h5,input,textarea,p{margin:0; padding:0;}
body{font-size:14px; color:#3c3c3c; font-family:Arial, Helvetica, sans-serif;}
a{text-decoration:none; color:#3c3c3c;}
a:hover{color:#f00; text-decoration:underline;}
.father{height:200px; width:200px; border:1px solid #00f; position:absolute; right:0; bottom:0;}
/*.box{width:100px; height:100px; background-color:#F00; position:absolute; top:5px; left:5px;}*/
</style>
</head>
<body>
<div class="father">
<div class="box"></div>
</div>
<p>这里面放的是文字</p>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>绝对定位使用</title>
<style type="text/css">
.one,.two{width:200px; height:200px; background-color:#F00; position:absolute; top:0; left:0;}
.two{background-color:#0F0; top:10px ; left:10px; z-index:101;}
.one{z-index:100;}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>相对定位</title>
<style type="text/css">
body,div,ul,li,ol,h1,h2,h3,h4,h5,input,textarea,p{margin:0; padding:0;}
body{font-size:14px; color:#3c3c3c; font-family:Arial, Helvetica, sans-serif;}
a{text-decoration:none; color:#3c3c3c;}
a:hover{color:#f00; text-decoration:underline;}
.father{width:200px; height:200px; border:1px solid #0f0; margin:100px;}
.son{width:100px; height:100px; background-color:#00f; position:relative; top:10px; left:10px;}
.sun{width:50px; height:50px; background-color:#900; position:relative; top:10px;}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
<div class="sun"></div>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>定位</title>
<style type="text/css">
.one,.two{width:200px; height:200px; background-color:#F00; position:relative; top:0; left:0;}
.two{background-color:#0F0;}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>父级绝对，子集也绝对</title>
<style type="text/css">
.father{width:200px; height:200px; position:absolute; top:20px; left:20px; background-color:#966;}
.son{width:100px; height:100px; background-color:#096; position:absolute; top:0; left:0;}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>父级相对，子集绝对</title>
<style type="text/css">
.father{width:200px; height:200px; position:relative; top:20px; left:20px; background-color:#966;}
.son{width:100px; height:100px; background-color:#096; position:absolute; top:0; left:0;}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>绝对定位</title>
<style type="text/css">
html{cursor:url(horse.ani);}
.wenti{width:502px; height:401px; background:url(votebg.jpg) no-repeat; position:absolute; right:0; bottom:0; cursor:url(dinosaur.ani);}
.close{width:16px; height:16px; display:block; top:7px; right:8px; position:absolute; cursor:pointer;}
.submit{width:64px; height:24px; display:block; bottom:8px; right:8px; position:absolute; cursor:pointer;}
</style>
</head>
<body>
<div class="wenti">
<span class="close"><img src="close.jpg" /></span>
<span class="submit"><img src="tijiao.jpg" /></span>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>定位</title>
<style type="text/css">
body,div,ul,li,ol,h1,h2,h3,h4,h5,input,textarea,p,dl,dd,dt{margin:0; padding:0;}
body{font-size:14px; color:#3c3c3c; font-family:Arial, Helvetica, sans-serif;}
a{text-decoration:none; color:#3c3c3c;}
a:hover{text-decoration:underline;}
ul{list-style:none;}
.view{width:998px; height:190px; margin:50px auto; border:1px solid #D2E1F1;border-top:1px solid #458FCE; position:relative;}
.view dt{height:30px; background-color:#F6F9FE;}
.view dt a{color:#458fce; font-size:14px;padding:7px 0 0 12px;display:block; width:70px;}
.view dd {padding:20px 43px 0;}
.view dd li{float:left; margin-right:28px; text-align:center;}
.view dd li p{padding-top:8px;}
.view dd li a{font-size:12px;}
.view dd li a:hover{color:#f00;}
.view .nomargin{margin-right:0;}
.left{width:11px; height:20px; background:url(icon_r1_c1.png) no-repeat; display:block; position:absolute; top:90px; left:18px;}
.left:hover{background:url(icon_r1_c5.png) no-repeat;}
.right{background:url(icon_r1_c3.png) no-repeat; width:11px; height:20px; display:block; position:absolute; top:90px; right:18px;}
</style>
</head>
<body>
<dl class="view">
<dt><h2><a href="#">视觉焦点</a></h2></dt>
<dd>
<a href="#" class="left"></a>
<ul>
<li>
<img src="01.jpg" />
<p><a href="#">泰国北部发生地震</a></p>
</li>
<li>
<img src="01.jpg" />
<p><a href="#">泰国北部发生地震</a></p>
</li>
<li>
<img src="01.jpg" />
<p><a href="#">泰国北部发生地震</a></p>
</li>
<li>
<img src="01.jpg" />
<p><a href="#">泰国北部发生地震</a></p>
</li>
<li class="nomargin">
<img src="01.jpg" />
<p><a href="#">泰国北部发生地震</a></p>
</li>
</ul>
<a href="#" class="right"></a>
</dd>
</dl>
</body>
</html>
转载请备注。
css.day.05.eg的更多相关文章
- CSS【05】：CSS三大特性
继承性 作用:给父元素设置一些属性,子元素也可以使用,这个我们就称之为继承性 示例代码: <style> div { color: red; } </style> <di ...
- CSS系列 (05)：浮动详解
浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止.由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样. -- W3C 文字环绕 float可以 ...
- css笔记05：表单
1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o ...
- css基础05
无关浏览器,只想对于原来的位置.而且下面的盒子也不会升上去. 没有父亲的时候就是以浏览器为标准的. 父亲没定位,爷爷有定位,就按照爷爷的,不管父亲了. 绝对定位飘起来比浮动还要高.飘起来了它的位置就会 ...
- 推荐25个帮助你提高技能的 CSS3 实战教程
使用 CSS,你能够以极高的效率和易用性创造出美丽的设计.而目前流行的 CSS3 技术更加强大,能够创造更多丰富的效果和功能,而不需要任何外部插件.今天,我为大家收集了25个很有用的 CSS 教程,技 ...
- CSS_01_CSS和html结合的方式3、4
第01步:编写第01个css样式:div.css @charset "utf-8"; /*第01步:定义div:背景色.字体颜色*/ div{ background-color:# ...
- [转]Web应用防火墙WAF详解
通过nginx配置文件抵御攻击 0x00 前言 大家好,我们是OpenCDN团队的Twwy.这次我们来讲讲如何通过简单的配置文件来实现nginx防御攻击的效果. 其实很多时候,各种防攻击的思路我们都明 ...
- 相册 垂直居中; 水平居中. 1)宽度 大于高度, 宽度 100%; 2) 高度 大于 宽度 , 高度100%; getimagesize , list --->line-height , text-align, vertical-align, max-height, max-width
一: 效果: 1) 黑色 部分是 相框. 2) 图片 要实现 水平居中, 垂直居中 3) 如果 宽度 大于 高度 ,那么 宽度 100% ,如图1 , 高度 自适应 ,同时不能超过黑色相框的 高度 ; ...
- t添加最佳视口
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
随机推荐
- CSS HACK的方法
所有浏览器 通用 height: 100px; IE6 专用 _height: 100px; IE7 专用 *+height: 100px; IE6.IE7 共用 *height: 100px; IE ...
- 转:mysql性能优化的19个要点
原文来自于:http://outofmemory.cn/mysql/mysql-performance-tips 1.为查询优化你的查询 大多数的MySQL服务器都开启了查询缓存.这是提高性最有效的方 ...
- 转:使用Mongo Connector和Elasticsearch实现模糊匹配
原文来自于:http://www.csdn.net/article/2014-09-01/2821485-how-to-perform-fuzzy-matching-with-mongo-connec ...
- ubuntu wubi安装注意事项
从这个镜像下载 http://mirrors.163.com/ubuntu-releases/12.10/ ubuntu-12.10-desktop-amd64.iso 和 wubi.exe然后放到同 ...
- stm32 smartcard调试--不用st8024
关于stm32 smartcard功能调试,官方提供的例程是配合8024芯片进行控制的.程序可从地址:http://www.pudn.com/downloads420/sourcecode/embed ...
- AlgorithmsI PA2: Randomized Queues and Deques Subset
本题的bonus是 因此方法是queue的size 达到了K, 就停止增加元素,保证queue.size() 最大时只有k. Java code: import edu.princeton.cs.al ...
- Pie（二分）
ime Limit: 1000MS Memory Limit: 65536K Total Submissions: 8930 Accepted: 3235 Special Judge De ...
- 【转】eclipse -- the project was not built due to a resource exists with a different case...
原文网址:http://blog.csdn.net/mylinx/article/details/44280563 进行编码时,工程前面莫名有个红X,正当百思不得其解时,发现在[problems]下有 ...
- Python修饰器
Python的修饰器的英文名叫Decorator,当你看到这个英文名的时候,你可能会把其跟Design Pattern里的Decorator搞混了,其实这是完全不同的两个东西.虽然好像,他们要干的事都 ...
- JavaScript之作用域与作用域链
今天是2016的第一天,我们得扬帆起航踏上新的征程了.此篇阐述JavaScript中很重要的几个概念:作用域与作用域链及相关知识点. 我们先从变量与作用域的行为关系开始讨论. 变量作用域 JavaSc ...