css.day05

1. 外边距合并  不是bug  而是一个特性  (以最大的那个边距为准)

两个盒子是并列关系

两个盒子 父子级关系

1. border

2.overflow:hidden;

3. padding  盒子实体  (特殊情况下也可以使用)

2. float (浮动)   left  right

标准流:块级自己占一行  行内可以放多个没有高和宽

脱离标准流   盒子叠放次序

清除浮动

浮动本来是一个非常好的属性,我们经常用它来进行网页排版布局,但是,浮动虽然脱离了标准流,还是会影响正常的标准流,这时候,我们需要,用到一个叫  清除浮动的属性  clear .

clear:  left   right     both     三个属性值

其实,我们一般情况下直接 clear:both;

清除浮动 之 额外标签法

w3c组织 提倡 在最后一个标签的后面,添加一个 新的标签  里面写上 clear:both 这个语法 。  我们称之为 额外标签法。

注意: 因为left  和right  这个盒子浮动,影响了 footer  ,所以在right 这个盒子后面添加新标签。

优点: 简单

缺点: 额外增加了代码

代码如下:

<!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}
.clear{clear:both;}
</style>
</head>
<body>
<div class="main">
<div class="left"></div>
<div class="right"></div>
<div class="clear"></div>
</div>
<div class="footer"></div>
</body>
</html>

清除浮动 之  overflow:hidden  

这种方法是最简单的,一定是给大盒子加上overflow:hidden 这句话,就可以清除浮动。

代码如下:

<!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; overflow:hidden;}
.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}
</style>
</head>
<body>
<div class="main">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="footer"></div>
</body>
</html>

优点: 最简单的一种

缺点: 里面的内容有定位 ,就引起麻烦 所以,里面子盒子如果需要定位,不太推荐使用。

清除浮动 之 伪类after

专门写一个类:(网络比较火的写法)

格式如下:

.clearfix:after{content:""; display:block; visibility:hidden; height:0; clear:both;}

.clearfix{zoom:1;} /*照顾ie6.7*/

解释: visibility:hidden 隐藏

代码如下:

<!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{content:""; display:block; visibility:hidden; height:0; clear:both;}
.clearfix{zoom:1;} /*照顾ie6.7*/
</style>
</head>
<body>
<div class="main clearfix">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="footer"></div>
</body>
</html>

缺点: 写法稍微麻烦

优点: 调用方便 不会增加标签

将来可能用的比较多的  伪类  after  before

代码如下:

.clearfix:after,.clearfix:before{content:"";display:table;}

.clearfix:after{clear:both;}

.clearfix{zoom:1;}

这种方法要求: 现在大家了解,如果以后看到这种写法,要知道是清除浮动。

<!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>

overflow:hidden  作用 (溢出隐藏)

可以调整兼容性 (清除浮动)

一个大盒子,里面放着两个小盒子,这是典型的标准流的写法,这个父盒子可以不用指定高度,因为,小盒子可以给大盒子撑开,但是,如果这两个小盒子浮动了,脱离了标准流,浮起来,这时候,两个小盒子就不再是标准流,那么,父盒子就检测不到里面的内容。这个父盒子就会变成一条线。我们可以用overflow:hidden 检测复合内部内容。

overflow:hidden  常用的第一种用法: 检测内部高度。

溢出隐藏(overflow:hidden)  可以切割多余的内容

overflow:visible;  超出的部分显示

overflow:hidden  超出的部分隐藏

overflow:scroll   有事没事显示滚动条(不管超出还是不超出)

overflow:auto    超出就有滚动条,不超出就没有滚动条

隐藏元素

我们在页面中,经常会把一些元素 显示出来,或者隐藏起来。

display  显示元素

display :block  inline  inline-block   none;

display:none  隐藏元素

visibility:hidden  隐藏元素

也可以隐藏元素。

两者的区别

占位

它们两个最本质的区别就是:

visibility:hidden 虽然是隐藏的,但是还是占有自己位置

而 display:none  隐藏的同时,不占位置。

定位(position)

我们网页布局方法:

1. 标准流   (最稳定)

2. 浮动流   (float 其次)

3. 定位流    ( 稳定性最后)

定位是完全脱离标准流的一种布局方式。

定位的分类:

1.绝对定位 absolute 

position:absolute;

定位和方位名词一起使用:

left  top  right  bottom

position:absolute; top:20px;

绝对定位是以浏览器左上角为原点(0.0)

绝对定位不占位置

2.相对定位 (relative)

position:relative

1.相对定位是占位置的。

2.相对定位是以自己左上角为原点

3.叠放次序:

z-index: 数值;

数值越大  盒子越靠上  需要注意:数值后面一定不能加单位.

.one{z-index:10;}

注意:

如果父盒子是 绝对定位 ,子盒子也是绝对定位,那么,子盒子会以父盒子的左上角为原点。

<!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>

如果父盒子是 相对定位 ,子盒子也是绝对定位,那么,子盒子会以父盒子的左上角为原点。

平时我们定位网页布局:  父级相对   子级绝对   (父相子绝)

更改鼠标样式:

cursor:pointer;

鼠标样式:

.ani   .cur

html{cursor:url(horse.ani);}

注意:更换鼠标样式ie支持的好,火狐之类的不支持。

cursor:pointer;  所有的浏览器都支持   鼠标变成 小手

<!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>

转载请备注。

上一篇:Windows、Linux之间传输文件的几种方式


下一篇:SecureCRT的SFTP在Windows与Linux之间传输文件