JAVA程序员笔记（第二阶段：前端）第4篇——定位、太极图、经典轮播图一、简单transfrom变换效果

本文链接：https://blog.csdn.net/Muyun5202/article/details/120660212

定位：

绝对定位Absolution：

元素会脱离文档流，定位是相对于离它最近的且不是static定位的父元素而言，若该元素没有设置宽度，则宽度由元素里面的内容决定，且宽度不会影响父元素，定位为absolution后，原来的位置相当于是空的，下面的的元素会来占据。

<style>
        #app {
            position: absolute;
            width: 300px;
            height:200px;
            background:red;
            z-index: -1;
        }

        #test {
            width: 300px;
            height:200px;
            background:blue;
            /* 相对于 父级最近具有定位的元素进行定位，如果父级没有定位的元素，则相对于浏览器进行位置。绝对定位会脱离正常的文档流  */
            position: absolute;
            left: 300px;
            top: 50px;
        }

        .xxx {
            position: absolute;
            height: 200px;

        }

        #xxxxxx {
            position: relative;
            width: 600px;
            height:200px;
            background:green;

        }

    </style>





<body>

<div class="xxx">
    <div>
        <div id="app"></div>

        <div id="test"></div>
    </div>
</div>


<div id="xxxxxx"></div>

</body>

相对定位Relative：

元素仍处于文档流中，定位是相对于原本自身的位置，若没有设置宽度，则宽度为父元素的宽度，该元素的大小会影响父元素的大小。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

  <style>

    *{
      width: 300px;
      height: 250px;
    }

    #红块{
      background: red;
    }
    #蓝块{
      height: 200px;
      background: deepskyblue;
      position: relative;
      right: -300px;
      top: -250px;
    }
    #黄块{
      background: yellow;
      float: left;
    }

  </style>

</head>
<body>

<div id="红块"></div>

<div id="蓝块"></div>
<div id="黄块"></div>

</body>
</html>

通俗来说：

绝对定位相当于将该块拿起来，然后摆放在其他块的头顶上，所以会遮盖其他块，且不会占（最底下一层）其他块的位置。但是会受其父类块的影响，不能超过他的父类块区域。
因为在不设置的情况下，其父类块区域是body，就是整个网页，因此会遮挡其他块。
然是如果他的父类块是另一个div之类的，该绝对定位的块，不能超出其父类块的区域。

相对定位则是本身留在原地，但是隐身了，看不见却能占位置
举个例子：相对定位就是放出去的风筝，人还在地上，但是从天上往下看只能看到风筝。人在地上占着位置，但是风筝不会占其他地上人的位置。
反之，绝对定位就是人飞起来了，不占位置

固定定位Fixed：

固定在浏览器某个确定的位置，不会发生变化。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #adv {
            position: fixed;
            width: 150px;
            height:300px;
            background-color: #777;
            right: 0;
            bottom: 20px;
        }

    </style>
</head>
<body>



<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>

<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>

<div id="adv"></div>

</body>
</html>

太极图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>

        .app {
            position: absolute;
            width: 400px;
            height: 400px;
            margin: 0 auto;
            overflow: hidden;


        }

        .app .cr.left {
            left: 0px;
            background-color: #000;
        }

        .app .cr {
            position: absolute;
            width: 400px;
            height:400px;

            left: -200px;
            background-color: #fff;
            border-radius: 50%;

        }

        .app.right {
            position: absolute;
            left: 200px;

        }

        .in-cr-t {
            position: absolute;
            width: 200px;
            height:200px;
            background-color: #000;
            left: 100px;
            border-radius: 50%;
        }

        .in-cr-b {
            position: absolute;
            width: 200px;
            height:200px;
            background-color: #fff;
            left: 100px;
            top: 200px;
            border-radius: 50%;
        }

        .in-cr-t0 {
            position: absolute;
            width: 50px;
            height:50px;
            background-color: #fff;
            left: 175px;
            top: 75px;
            border-radius: 50%;
        }


        .in-cr-b0 {
            position: absolute;
            width: 50px;
            height:50px;
            background-color: #000;
            left: 175px;
            top: 275px;
            border-radius: 50%;
        }

       @keyframes tjt {
           to {
               transform: rotate(360deg);
          }
       }

    </style>

</head>
<body>

<div style="position: relative;height:400px;width: 400px; z-index:999; animation: tjt 2s linear infinite">

    <div class="app">
        <div class="cr left"></div>
    </div>

    <div class="app right">
        <div class="cr"></div>
    </div>

    <div class="in-cr-t"></div>
    <div class="in-cr-b"></div>

    <div class="in-cr-t0"></div>
    <div class="in-cr-b0"></div>

</div>

</body>
</html>

轮播图

这里先做出样式用的小米官方的图片，侵权的话本人会自删的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
      *{
          margin: 0;
          padding: 0;
      }

      ul{
         list-style: none;
      }

      a{
          text-decoration: none;
      }

      .swiper {
          position: relative ;
          width: 960px;
          height: 460px;
          margin:50px auto 0;
          /*background-color: red;*/
      }

    .swiper img{
        position: absolute;
      width: 100%;
      height: 100%;
        display: none; /* 四张图片全部隐藏*/
    }
      .swiper img:first-child {
          display: block;
      }

      .swiper .dots{
          position: absolute;
          height: 40px;
          width: 100%;
          background-color: rgba(0,0,0,0.5);
          bottom: 0px;
          text-align: center;
          font-size: 0;
      }

      .swiper .dots span{
          display: inline-block;
          width: 10px;
          height: 10px;
          background-color: snow;
          margin: 15px 5px;
          border-radius: 50%;

      }

      .swiper .dots .cur{
          background-color: red;
      }

      .swiper .left ,.swiper .right{
          position: absolute;
          width: 40px;
          height: 70px;
          background: url("./images/icon-slides.png")no-repeat;
          top :210px;
      }

      .swiper .right{
          right: 0px;
          background-position: -43px 0;
      }

      .swiper .left:hover{
          background-position: -85px 0;
      }

      .swiper .right:hover{
          background-position: -128px 0;
      }










  </style>
</head>
<body>
<div class="swiper">
<ul>
    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a532e33470d046b3f044d5ea49fc5e9e.png?thumb=1&w=1226&h=460&f=webp&q=90" />
    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/918820682e4a490221cfd92b24c14b86.jpg?thumb=1&w=1226&h=460&f=webp&q=90" />
    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/67c7222fbcf98db942718eaf29f32297.jpg?thumb=1&w=1226&h=460&f=webp&q=90" />
    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/01a5d7313fe344bddb9e4081df4dc998.jpg?w=2452&h=920" />
</ul>
    <div class="dots">
        <span class="cur"></span>
        <span></span>
        <span></span>
        <span></span>
    </div>

    <div class="left"></div>
    <div class="right"></div>

</div>

</body>
</html>

基于滚动条的轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #swiper {
            width: 960px;
            height: 400px;
            position: relative;
            margin: 50px auto 0 ;
            white-space: nowrap;
            overflow: scroll;
            font-size: 0;
        }

        #swiper img {
            width: 100%;
            height: 100%;
        }

    </style>
</head>
<body>

<div id="swiper">

    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a532e33470d046b3f044d5ea49fc5e9e.png?thumb=1&w=1226&h=460&f=webp&q=90" />
    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/918820682e4a490221cfd92b24c14b86.jpg?thumb=1&w=1226&h=460&f=webp&q=90" />
    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/67c7222fbcf98db942718eaf29f32297.jpg?thumb=1&w=1226&h=460&f=webp&q=90" />
    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/01a5d7313fe344bddb9e4081df4dc998.jpg?w=2452&h=920" />


</div>

</body>
</html>

简单transfrom变换效果

简单的动画效果，作为后端程序员，动画这方面稍作了解即可。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #app {
            width: 300px;
            height: 200px;
            background: red;
            animation: xxx 1s linear infinite forwards;
        }
        
        
        @keyframes xxx {

            from {

            }
            to {
                transform: translate(300px, 50px);
                width: 200px;
                background-color: blue;
                border-radius: 50%;
            }
        }
        
        

        #app:hover {
            width: 200px;
            border-radius: 50%;
            transform: translate(300px, 200px) ;
            /* transition 属性 过渡时长 速度(默认先快后慢) linear(匀速) */
            transition: all 2s linear ;

        }

    </style>
</head>
<body>

<div id="app">

</div>
</body>
</html>