CSS_样式sample
浏览数：26 /
时间：2015年06月09日
<!DOCTYPE HTML>
<html>
<head>
<title>div浮动</title>
<style type="text/css">
body{
margin: 0px 1px 2px 3px;
}
#father{
background-color: yellow;
width: 100%;
height: 100px;
border: dashed green;
}
#son1{
float: left;
}
#son2{
float: left;
}
#son3{
float: left;
}
#clear{
clear: both;
}
</style>
</head>
<body>
<!--是div在同一列上,如果清楚浮动效果 同层div也会浮动-->
<div id="father">
<div id="son1">aaaaaa</div>
<div id="son2">bbbbbb</div>
<div id="son3">cccccc</div>
<div id="clear"></div>
<div>dddddddddddd</div>
</div>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<title>div浮动</title>
<style type="text/css">
body{
margin: 0px 1px 2px 3px;
}
#father{
background-color: yellow;
width: 100%;
height: 100px;
border: dashed green;
position:relative;
}
#son1{
position: absolute;
margin-left: 60%;
}
#son2{
}
</style>
</head>
<body>
<!--相对定位，元素没有脱离文本流-->
<!--绝对定位，是相对于浏览器-->
<!--如果相对于父节点的绝对定位，父节点要设置相对定位,脱离文本流-->
<!--result bbbbbb aaaaaaaaaa-->
<div id="father">
<div id="son1">aaaaaa</div>
<div id="son2">bbbbbb</div>
</div>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<title>div常用样式</title>
<style type="text/css">
#father{
background-color: yellow;
width: 100%;
height: 100px;
border:1px dashed green;
}
#son1，#son2,#son3{
background-color: green;
width: 100px;
margin-left: 5px;
margin-top: 5px;
display: inline; /*3个div显示在同一行*/
}
#son3{
display: none; /*隐藏第三个div*/
}
#son2:hover,#son1:hover{
background-color: blue;
cursor: hand;
}
</style>
</head>
<body>
<div id="father">
<div id="son1">aaaaaa</div>
<div id="son2">bbbbbb</div>
<div id="son3">bbbbbb</div>
</div>
</body>
</html>郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
