html+css|元素的浮动与定位
程序员文章站
2022-04-11 19:28:56
...
1.浮动属性float
清除浮动clear
overflow属性
visible:内容不会被修剪,会呈现在元素框之外
hidden:溢出内容会被修剪,并且被修建的内容是不可见的
auto:在需要时产生滚动条,即自适应所要显示的内容
scroll:溢出内容会被修剪,且浏览器会始终显示滚动条
2.定位属性position
static:静态定位
relative:相对定位
absolute:绝对定位
fixed:固定定位
例子如下:
P196
<!doctype html> <html> <head> <meta charset="utf-8"> <title>子元素相对于直接父元素定位</title> <style type="text/css"> body{ margin:0px; padding:0px; font-size:18px; font-weight:bold;} .father{ margin:10px auto; width:300px; height:300px; padding:10px; background:#ccc; border:1px solid #000; position:relative; } .child01,.child02,.child03{ width:100px; height:50px; line-height:50px; background:#ff0; border:1px solid #000; margin:10px 0px; text-align:center; } .child02{ position:absolute; left:50px; top:100px; z-index:1000; } .child03{ position:absolute; left:10px; top:80px; z-index:100; } </style> </head> <body> <div class="father"> <div class="child01">child-01</div> <div class="child02">child-02</div> <div class="child03">child-03</div> </div> </body> </html>
3.制作车载音乐页面网页焦点图
如下代码:
<!doctype html> <html> <head> <meta charset=”utf-8”> <title>车载音乐页面</title> </head> <body> <div> <img src=”images/11.jpg”alt=”车载音乐”> <a href=”#”class=”left”></a> <a href=”#”class=”right”></a> <ul> <li class=”max”></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </body> </html>
定义css样式表
*{margin:0;padding:0;border:0;list-style:none;} a{text-decoration:none;font-size:30px;color:#fff;} div{ width:580px; height:200px; margin:50px auto; position:relative; } a{ float:left; width:25px; height:90px; line-height:90px; background:#333; opacity:0.7; border-radius:4px; text-align:center; display:none; cursor;pointer; } .left{ position:absolute; left:-12px; top:60px; } .right{ position:absolute; right:-12px; top:60px; } div:hover a{ display:block; } ul{ width:110px; height:20px; background:#333; opacity:0.5; border-radius:8px; position:absolute; right:30px; bottom:20px; text-align:center; } li{ width:5px; height:5px; background:#ccc; border-radius:50%; display:inline-block; } .max{ width:12px; background:#03BDE4; border-radius:6px; }
更多html+css|元素的浮动与定位相关文章请关注PHP中文网!