一、定位

  1. .parent{
  2.             width: 200px;
  3.             height: 200px;
  4.             background: red;
  5.             position: relative;
  6.             /*相对元素*/
  7.             left: 100px;
  8.             top:100px;
  9.         }
  10.         .child{
  11.             width: 100px;
  12.             height: 100px;
  13.             position: absolute;
  14.             background-color: blue;
  15.             right: 0px;
  16.             bottom: 0;
  17.             /* position:absolute 绝对定位的left,top它是相对于
  18.             给了最近定位的父元素*/
  19.         }
  21.     </style>
  22. </head>
  23. <body>
  24.     <!--position:lbsolute,relotive,fixed-->
  25.     <!--position:relative 就是元素在页面上正常的位置,只不过使我们多了一种手段left-top可以改变
  26.     元素的位置
  27.     left ，top-->
  28.     <div class="parent">
  29.         <div class="child">
  30.         </div>
  31.     </div>
  33.     <p>hello world</p>
  34. </body>
  35. </html>

二、search

button{
            position: absolute;/*绝对位置*/
            right: 10px;
            top: 9px;
            width: 23px;
            height: 22px;
            background: url("images/icon4.png" ) no-repeat center;
            border:none;/*不显示边线*/
            outline: none;/*不显示轮廓*/
        }
        button:hover{
            cursor:pointer;
        }
        .search{
            overflow: hidden;/*溢出处理*/
            margin: 100px;
            width: 240px;
            height: 40px;
            background:#eee;
            border: 1px solid #666;
            border-radius: 30px;
            position: relative;
           }
        input{
            /*left:20px;*/
            top: 0px;
            position: absolute;
            padding-left:20px;
            border: none;
            height: 40px;
            background: #eee;
            outline: none;
        }
    </style>
</head>
<body>
    <div class="search">
        <input type="text" placeholder="搜索">
        <button></button>
    </div>
</body>
</html>

三、垂直水平居中

.parent{
            width: 300px;
            height: 300px;
            background: red;
            position: relative;
        }
        .child{
            width: 100px;
            height: 100px;
            background: blue;
            position: absolute;
            top: 50%;
            left: 50%;
            /*margin-left:-50px;
            margin-top: -50px;*/
            transform/*改变*/: translate(-50%,-50%)/*转化*/
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">

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

五、手机居中

 html,body{
            height: 100%;
        }
        body{
            position: relative;
        }
        img{
            width: 400px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%)
        }
    </style>
</head>
<body>
    <img src="images/phone.png" alt="">
</body>
</html>

六、动画

div{
            width:100px;
            height: 100px;
            background: red;
            animation: animated 2s linear;
        }
        @keyframes animated{
            0%{
                transform: fotate(0deg)
            }
            50%{
                transform: rotate(180deg)
            }
            100%{
                transform: rotate(360deg)
            }
        }
        div:hover{
            animation: animated 1s linear infinite;/*infinte 重复*/
        }
    </style> 
</head>
<body>
    <div>

    </div>

七、音乐旋转动画

img{
            border-radius: 50%;
            width: 250px;
            height: 250px;
            animation: animated 3s linear infinite;
            animation-play-state: paused;
        }
        @keyframes animated{
            0%{
                transform: rotate(0deg)
            }
            50%{
                transform: rotate(100deg)
            }
            100%{
                transform: rotate(360deg)
            }
        }
        img:hover{
            animation-play-state: running;
        }
    </style>
</head>
<body>
    <img src="images/wan.jpg" alt="">
</body>
</html>

八、链接网站图标 iconfont

 <link rel="stylesheet" href="https:////at.alicdn.com/t/font_1291013_ffbx3umkx55.css">
    <style>
        *{margin: 0;padding: 0}
    </style>

</head>
<body>
    <i class="iconfont search">&#xe665;</i>
</body>
</html>