zoukankan      html  css  js  c++  java
  • 【案例】相对定位实现波浪效果

    <!DOCTYPE html>

    <html lang="en">

    <head>

            <meta charset="UTF-8">

            <title>相对定位实现波浪效果</title>

            <style>

                     *{

                             margin:0;

                             padding:0;

                     }

                     li{

                             list-style: none;

                     }

                     a{

                             text-decoration: none;

                     }

                     ul{

                             200px;

                             height: 240=6px;

                             margin-top: 20px;

                             margin-left: 10px;

                             border: 1px solid skyblue;

                     }

                     ul>li{

                             100%;

                             height: 40px;

                             line-height: 40px;

                             text-align: center;

                             border-bottom: 1px dashed skyblue;

                             background: pink;

                     }

                     ul>li:hover{

                             background: yellow;

                             position: relative;

                             left: 2px;

                             top: 1px;

                     }

                     ul>li>a{

                             display: block;

                             color: #000;

                             font-size: 14px;

                             font-weight: 700;

                             font-family: '微软雅黑';

                     }

            </style>

    </head>

    <body>

            <ul>

                     <li><a href="">首页</a></li>

                     <li><a href="">博客</a></li>

                     <li><a href="">编程</a></li>

                     <li><a href="">UI设计</a></li>

                     <li><a href="">前端</a></li>

                     <li><a href="">大数据</a></li>

            </ul>

    </body>

    </html>

  • 相关阅读:
    [转]Windows visio2019破解激活
    KMP模式匹配算法
    【蓝桥杯2016_C++】t3:方格填数
    【蓝桥杯2015_C++】t4:格子中输出
    【蓝桥杯2015_C++】t3:奇妙的数字
    【蓝桥杯2014_C++】t6:扑克序列
    【蓝桥杯2014_C++】t4:史丰收速算
    【蓝桥杯2014_C++】t3:神奇算式
    【蓝桥杯2017_C++】t1:迷宫
    【蓝桥杯】买不到的数目
  • 原文地址:https://www.cnblogs.com/sherryStudy/p/relative_position.html
Copyright © 2011-2022 走看看