CSS_样式sample

来源：互联网发布：移动网络变成电信编辑：程序博客网时间：2024/05/16 08:48

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

0 0