码迷,mamicode.com
首页 > Web开发 > 详细

CSS定位

时间:2015-04-05 17:22:25      阅读:197      评论:0      收藏:0      [点我收藏+]

标签:

1:CSS定位

   技术分享

  position:

  • absolute    绝对布局  不占位置 而且margin左右设为auto没用 
  • realtive      相对布局  占位置   margin左右设为auto有用
  • fixed          不占位置   但是会固定在浏览器的一个位置 而且margin左右设为auto没用     前三个都可以使用偏移量
  • static  其他属性z-index 偏移量会没用
技术分享
 <style type="text/css">
     #div1{
         height: 100px;
         width: 500px;
         background-color: blue;
         position: fixed;
         border-radius: 20px;
         z-index: 2;
   }
     #div2{
         height: 100px;
         width: 500px;
         left: 50px;
         top: 50px;
         background-color: red;
         position: fixed;
         border-radius: 20px;
         z-index: 0;
   }
     #div3{
         height: 100px;
         width: 500px;
         left: 100px;
         top: 80px;
         background-color: yellow;
         position: fixed;
         border-radius: 20px;
         z-index: 1;
     }

    </style>
CSS
技术分享
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<script>
    for(var i = 0;i < 100 ;i++ ){
        document.write(i + "<br />");}
</script>
HTML

效果:

 技术分享

 2:CSS浮动

  技术分享

技术分享
<div id="continer">
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
    LIPENGLIPENGLIPENG
</div>
HTNL
技术分享
  <style type="text/css">
     #div1{
         height: 100px;
         width: 50px;
         background-color: blue;
         border-radius: 20px;
         float: left;
   }
     #div2{
         height: 100px;
         width: 100px;
         background-color: red;
         border-radius: 20px;
         float: left;
   }
     #div3{
         height: 100px;
         width: 100px;
         background-color: yellow;
         border-radius: 20px;
         float: left;
     }
    #continer{
        height: 300px;
        width: 240px;
        background-color:gray;
        border-radius: 20px;
        float: left;
    }
    </style>
CSS

 效果:

技术分享

 

3:浮动的应用

技术分享
    <style type="text/css">
     #div1{
         height: auto;
         width: 500px;
         margin: 100px auto;
    }
    li {
        list-style: none;
}
    ul{
        width: 25px;
        float: left;
     }
    </style>
CSS
技术分享
<div id="div1">
    <ul>
        <li><img src="img/1.jpg" title="1"></li>
        <li><img src="img/2.jpg"  title="2"></li>
        <li><img src="img/3.jpg"></li>
    </ul>
    <ul>
        <li><img src="img/4.jpg"></li>
        <li><img src="img/5.jpg"></li>
        <li><img src="img/6.jpg"></li>
    </ul>
    <ul>
        <li><img src="img/7.jpg"></li>
        <li><img src="img/8.jpg"></li>
        <li><img src="img/9.jpg"></li>
    </ul>
</div>
HTML

 

CSS定位

标签:

原文地址:http://www.cnblogs.com/lipeng0824/p/4394353.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!