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>

 

转载请备注。

 

posted @ 2015-09-23 23:12  sunnyJun  阅读(132)  评论(0)  编辑  收藏  举报