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>& ...
随机推荐
- 老oj2146 && Pku2135 Farm Tour
Description When FJ's friends visit him on the farm, he likes to show them around. His farm comprise ...
- MySQL Explain 结果解读与实践
Explain 结果解读与实践 基于 MySQL 5.0.67 ,存储引擎 MyISAM . 注:单独一行的"%%"及"`"表示分隔内容,就象分开&qu ...
- 转:jQuery常用插件
原文来自于:http://download.csdn.net/album/detail/369 jquery.cycle.all.js 上传者:itmyhome 上传时间:2014-06-1 ...
- hadoop 2.2.0 eclipse 插件编译 及相关eclipse配置图解
https://github.com/winghc/hadoop2x-eclipse-plugin 官网 http://kangfoo.github.io/article/2013/12/build- ...
- [BZOJ 2243] [SDOI 2011] 染色 【树链剖分】
题目链接:BZOJ - 2243 题目分析 树链剖分...写了200+行...Debug了整整一天+... 静态读代码读了 5 遍 ,没发现错误,自己做小数据也过了. 提交之后全 WA . ————— ...
- myeclipse spket spket-1.6.23.jar 破解安装教程
一年前安装文档就写过了,今天写破解文档,本来开发js/ext是想用aptana的,但是安装包100多M,我还是用spket吧(才11M),这个需要破解一下license,否则用不了. 一 安装教程如下 ...
- QiQi and Bonds
只有链接:http://sdu.acmclub.com/index.php?app=problem_title&id=961&problem_id=23685 题意:现在有n个QiQi ...
- QT 线程暂停，继续执行的一种实现（有些道理，而且封装了）
注意:本次实现线程的暂停执行主要采用互斥量的方法,如果有更好的实现方法的小伙伴可以在下面留言! 直接插入代码了,由于做的小demo,代码写的可能有点乱,但还算完整. 1 2 3 4 5 6 7 8 9 ...
- xp下删除windows7，无法删除windows7文件夹，无法删除windows7文件，双系统卸载，取得文件权限
http://blog.csdn.net/lanmanck/article/details/5722050 ---------------------------------------------- ...
- left join 、right join 、inner join和 full join的区别
内连接 INNER JOIN(等值连接):只显示两个表中联结字段相等的行.这个和用select查询多表是一样的效果,所以很少用到: 外连接:LEFT JOIN :以左表为基础,显示左表中的所 ...