发布于 2015-04-24 08:55:40 | 136 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的精品教程,程序狗速度看过来!

CSS层叠样式表

CSS(层叠样式表) 即 级联样式表 。 它是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。


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定位使用详解
css盒模型详解
CSS3 Transition使用详解
CSS样式表继承详解
CSS选择器及其优先级详解
css浮动详解
CSS中position属性( absolute | relative | static | fixed )详解
CSS定位 position使用讲解
CSS Modules详解及React中实践
CSS Modules 详解及 React 中实践
CSS Gradient详解
前端开发之CSS原理详解
最新网友评论  共有(0)条评论 发布评论 返回顶部

Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务