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>

  • 相关阅读:
    LeetCode173. 二叉搜索树迭代器
    LeetCode172. 阶乘后的零
    电商系统 SKU 设计和优化2
    电商系统 SKU 设计和优化
    JQuery/JS插件 排列组合 前端实现
    开源框架 码云 推荐项目
    Java idea 打包 编码问题 解决
    Java 基础 MyBatis-Plus 组装查询条件
    Java 基础 list 排序
    Java 基础 list 查询 ids
  • 原文地址:https://www.cnblogs.com/sherryStudy/p/relative_position.html
Copyright © 2011-2022 走看看