zoukankan      html  css  js  c++  java
  • CSS——◇demo

    核心思想:嵌套盒子中的◇超过父盒子的部分隐藏。

    第一种写法:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            div{
                100px;
                height:30px;
                background-color:#eee;
                position:relative;
            }
            i,s{
                text-decoration:none;
                font-style:normal;
            }
            i{
                position:absolute;
                right:0;
                top:12px;   
                10px;
                height:7px;
                background-color:aliceblue;
                font:400 13px/13px "微软雅黑";
                overflow:hidden;
            }
            s{
                position:absolute;
                top:2px;
            }
        </style>
    </head>
    <body>
        <div>
            <i><s>◇</s></i>
        </div>
    </body>
    </html>

    第二种写法:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            div{
                100px;
                height:30px;
                background-color:#eee;
                position:relative;
            }
            i,s{
                text-decoration:none;
                font-style:normal;
            }
            i{
                position:absolute;
                right:0;
                top:12px;   
                10px;
                height:7px;
                background-color:aliceblue;
                font:400 13px/13px "微软雅黑";
                overflow:hidden;
            }
            s{
                display:block;
                margin-top:-6px;
            }
        </style>
    </head>
    <body>
        <div>
            <i><s>◇</s></i>
        </div>
    </body>
    </html>

    效果:

    注释:s标签必须转成块级元素,display的值必须是block。

  • 相关阅读:
    微信OpenID获取
    2015总结及2016目标
    python start
    csv到mysql数据库如何分割
    读书 --- 老码识途
    读书--编写高质量代码 改善C#程序的157个建议2
    读书--编写高质量代码 改善C#程序的157个建议
    BinarySearch
    在aspx中写c#
    AWS 2020 Innovate所有视频
  • 原文地址:https://www.cnblogs.com/wuqiuxue/p/7814110.html
Copyright © 2011-2022 走看看