css定位

1.css定位：改变元素在页面的位置

属性：

           position ：static（偏移量不起效果），relative，absolute，fixed（固定元素位置）

           z-index：1，2，3（前后位置）

2.浮动：

属性：

         float：left，right，none，inherit（从父级继承属性）

         clear：去除浮动属性(包括继承来的）left，right，both，inherit

3.浮动的应用：瀑布流

.html

<body>
    <div id="div1">
        <ul>
            <li><img src="img/1.jpg"></li>
            <li><img src="img/2.jpg"></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>
        </ul>
    </div>
</body>

.css

*{
    margin: 0px;
padding: 0px;
}
li{
    list-style:none;
}
#div1{
    width: 500px;
    height: auto;
    margin: 20px auto;
}
ul{
    width: 20px;
    float: left;
}

4.css3选择器

（1）元素选择器h1，a等

（2）选择器分组  h1,h2{}或 *{margin：0px；

                                               padding：0px；}

（3）类选择器详解

       结合元素选择器a.class{}

       多类选择器.class.class{}  (class=p1 p2  -> .p1.p2)

（4）ID选择器详解

       ID只能在文档中使用一次，类可以多次

       ID选择器不能结合使用

       当使用jS时，需要ID

（5）属性选择器详解

          [title]{}

          例：<a href =" ">极客学院</a>

                 [href]{   }

          [title] ~="title"  //模糊属性值（根据部分属性值选择）

（6）后代选择器(可以隔代寻找）

        .html

         <p>this is my <strong>web</strong> page</p>

         .css

            p strong{
                    color: aqua;
                       }

（7）子元素选择器  （不可以隔代寻找）

          h1>strong{ }

（8）相邻兄弟选择器 //紧接在另一个元素后的元素，且二者有相同氟元素

           h1+p{ }

 5.css常用操作

     （1）对齐操作

           margin  水平对齐

           position  左右对齐

            float       左右对齐  

     （2）尺寸操作 

         line-height   行高（可设置行间距），max-height（width）  元素最大高（宽）度，min-height（width）  内容不低于

      （3）分类操作

          clear，float，position

          cursor //规定指向某元素之上时显示的指针类型

          display //是否及如何显示元素（列表中使用 eg：导航栏）

          visibility //元素是否可见

      （4）导航栏 

             .html

         <ul>

          <li><a href="#">导航一</a></li>
          <li><a href="#">导航二</a></li>
          <li><a href="#">导航三</a></li>
           <li><a href="#">导航四</a></li>
          </ul>

              .css

         ul{
               list-style-type: none;
               margin: 0px;
               position: 0px;
             }
          a:link,a:visited{
                text-decoration: none;
                display: block;
                background-color: burlywood;
                color: aliceblue;
                width: 3.125rem;
                text-align: center;
            }
         a:active,a:hover{
               background-color: brown;
             }

       （5）图片操作 

          例：

           .html            

<div class="container">
    <div class="image">
        <a href="#" target="_self">
            <img src="images/me.jpg" alt="风景" width="200px" height="200px">
        </a>
        <div class="text">我的照片</div>
    </div>
    <div class="image">
        <a href="#" target="_self">
            <img src="images/me.jpg" alt="风景" width="200px" height="200px">
        </a>
        <div class="text">我的照片</div>
    </div>
<div/>
    .css
body{
    margin: 10px auto;
    width: 70%;
    height: auto;
}
.image{
    border: 1px solid darkgray;
    width: auto;
    height: auto;
    float: left;
    text-align: center;
    margin: 5px;
}
img{
    margin: 5px;
    opacity: 0.5;   //透明度（0~1）
}
.text{
    font-size: 12px;
    margin-bottom: 5px;
}
a:hover{
    background-color: crimson;
}
6.css动画-2D，3D转换
（1）2D，3D转换
      2D转换方法：
               translate（）移动
 transform: translate(100px,100px);
-webkit-transform: translate(100px,100px);/*支持 safari  chrome*/
-ms-transform: translate(100px,100px);/*IE*/
-o-transform: translate(100px,100px);/*opera*/
-moz-transform: translate(100px,100px);/*firefox*/
                rotate（）旋转
   transform：rotate（200deg）；
                 scale（）缩放
   transform：scale（1，2）；//x，y轴
                 skew（）倾斜
   transform：skew（50deg，50deg）；//x，y轴
                 matrix（）矩阵
      3D转换方法：
        rotateX（）  transform：rotateX（100deg）；
        rotateY（）  transform：rotateY（100deg）；
（2）过渡{动画效果的css和动画执行的时间）
    transition   设置四个过度属性
    transition-property   过度的名称
    transition-duration   过渡效果花费的时间
    transition-timing-function  过度效果的时间曲线
    transition-delay    过渡效果开始时间
   例：
.css
div{
    width: 100px;
    height: 100px;
    background-color: blue;
    transition: width 2s,height 2s,transform 2s;
    -webkit-transition: width 2s,height 2s, -webkit-transform 2s;
}
div:hover{
    width: 200px;
    height: 200px;
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
}
（3）动画  遵循@keyframes规则  规定动画时长和名称
.css
div{
    width: 100px;
    height: 100px;
    background: blue;
    position: relative;
    animation: anim 5s infinite alternate;  //infinite alternate 重复进行
    -webkit-animation: anim 5s infinite alternate;
}
@keyframes anim {
    0%{background: blue;left: 0px;top: 0px}
    25%{background: red;left: 200px;top: 0px}
    50%{background: chartreuse;left: 200px;top: 200px}
    75%{background: crimson;left: 0px;top: 200px}
    100%{background: blueviolet;left: 0px;top: 0px}
}
@-webkit-keyframes anim {
    0%{background: blue;left: 0px;top: 0px}
    25%{background: red;left: 200px;top: 0px}
    50%{background: chartreuse;left: 200px;top: 200px}
    75%{background: crimson;left: 0px;top: 200px}
    100%{background: blueviolet;left: 0px;top: 0px}
}

（4）多列
     属性：column-count
          column-gap
          column-rule      
.div1{
    column-count: 3;
    -webkit-column-count: 3;
    column-gap:50px;
    -webkit-column-gap: 50px;
    column-rule: 5px outset red;
    -webkit-column-rule: 5px outset red;
}

  7瀑布流效果    

 

.container{
    column-width: 250px;
    -webkit-column-width: 250px;
    column-gap: 5px;
    -webkit-column-gap: 5px;
}
.container div{
    width: 50px;
    margin: 5px 0px;
}
posted @ 2019-11-14 16:44  华儿E  阅读(123)  评论(0)    收藏  举报