1.浮动属性float
清除浮动clear
overflow属性
visible:内容不会被修剪,会呈现在元素框之外
hidden:溢出内容会被修剪,并且被修建的内容是不可见的
立即学习“前端免费学习笔记(深入)”;
auto:在需要时产生滚动条,即自适应所要显示的内容
scroll:溢出内容会被修剪,且浏览器会始终显示滚动条
2.定位属性position
static:静态定位
relative:相对定位
absolute:绝对定位
fixed:固定定位
例子如下:
P196
子元素相对于直接父元素定位 child-01child-02child-03
3.制作车载音乐页面网页焦点图
如下代码:
车载音乐页面
定义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中文网!











