html+css|元素的浮动与定位-html教程-PHP中文网

html+css|元素的浮动与定位

高洛峰

发布： 2017-02-09 13:36:48

原创

2389人浏览过

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>
    @@##@@
    <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中文网！