0x01布局總體預(yù)覽圖

慕課Amy-Tooltip 修改版總體布局預(yù)覽圖

0x02 代碼示例

html布局代碼

<body>

        <div class="nav">
            <ul>
                <li><a href="#" class="tooltip tooltip-effect-1">Home
                    <span class="tooltip-content">
                        <i class="fa fa-home fa-fw" aria-hidden="true"></i></span>
                </a></li>
                <li><a href="#" class="tooltip tooltip-effect-2">About me
                    <span class="tooltip-content">
                        <i class="fa fa-book fa-fw" aria-hidden="true"></i></span>
                </a></li>
                <li><a href="#" class="tooltip tooltip-effect-3">
                    <span class="tooltip-content">
                        <i class="fa fa-camera-retro"></i></span>Potography
                </a></li>
                <li><a href="#" class="tooltip tooltip-effect-4">Work
                    <span class="tooltip-content">
                        <i class="fa fa-book fa-fw" aria-hidden="true"></i></span>
                </a></li>
                <li><a href="#" class="tooltip tooltip-effect-5">Contact
                    <span class="tooltip-content">
                        <i class="fa fa-book fa-fw" aria-hidden="true"></i></span>
                </a></li>
            </ul>
        </div>
    </body>

css樣式代碼

    /*Global style*/
    html{
        width: 100%;
        height: 100%;
        -webkit-text-size-adjust:none;
        -moz-text-size-adjust:none;
        -o-text-size-adjust:none;
        -ms-text-size-adjust:none;
        text-size-adjust:none;

    } 
    
    body{
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        background: #47c9af;
        color: #74777b;
        font-weight:300;
        font-size: 1.5em;
    
    }
     ul{
        list-style: none;
        padding: 0;
        margin: 0;  
     }
     a:link,a:visited,a:focus{
        text-decoration: none;
        outline:none;
     }
    /*
     box-sizing 屬性用于更改用于計(jì)算元素寬度和高度的默認(rèn)的 CSS 盒子模型。可以使用此屬性來模擬不正確支持CSS盒子模型規(guī)范的瀏覽器的行為。
     content-box
    默認(rèn)值，標(biāo)準(zhǔn)盒子模型。 width 與 height 只包括內(nèi)容的寬和高， 不包括邊框（border），內(nèi)邊距（padding），外邊距（margin）。注意: 內(nèi)邊距, 邊框 & 外邊距 都在這個(gè)
    盒子的外部。 比如. 如果 .box {width: 350px}; 而且 {border: 10px solid black;} 那么在瀏覽器中的渲染的實(shí)際寬度將是370px;

    尺寸計(jì)算公式：width = 內(nèi)容的寬度，height = 內(nèi)容的高度。寬度和高度都不包含內(nèi)容的邊框（border）和內(nèi)邊距（padding）。
    border-box
    width 和 height 屬性包括內(nèi)容，內(nèi)邊距和邊框，但不包括外邊距。這是當(dāng)文檔處于 Quirks模式 時(shí)Internet Explorer使用的盒模型。注意，填充和邊框?qū)⒃诤凶觾?nèi) , 
    例如, .box {width: 350px; border: 10px solid black;} 導(dǎo)致在瀏覽器中呈現(xiàn)的寬度為350px的盒子。內(nèi)容框不能為負(fù)，并且被分配到0，使得不可能使用border-box
    使元素消失;
    這里的維度計(jì)算為：
    width = border + padding + 內(nèi)容的  width，
    height = border + padding + 內(nèi)容的 height。
    padding-box   
    width 和 height 屬性包括內(nèi)容和內(nèi)邊距，但是不包括邊框和外邊距。只有Firefox實(shí)現(xiàn)了這個(gè)值，它在Firefox 50中被刪除。
     */
     *,*:after,*:before{   /*通配符選擇器*/
        -webkit-box-sizing:border-box;      
        -moz-box-sizing:border-box;
        -ms-box-sizing:border-box;
        -o-box-sizing:border-box;
        box-sizing: border-box;
     }
    *:after,*:before{
        display:inlie-block;
        content:"";
    }
    *:after{clear: both;}
    
    /*Navgaitor style*/
    .nav{
        width: 900px;
        height: 300px;
        margin: 300px auto;
    }
    .nav li{
        display: inline-block;
        margin:0 1em;
        }
    .tooltip{
        position: relative;   /*定位屬性 使元素 按照用戶定義進(jìn)行移動(dòng)  相對定位元素*/
        z-index: 9;
        float: left;
        font-weight: 700;
        color: rgba(0,0,0,0.3);
        padding: 0.15em 0.25em;     
    }
    .tooltip-content {
        position: absolute;   /*定位屬性 使元素 按照用戶定義進(jìn)行移動(dòng)  絕對定位元素*/
        z-index: 10;
        left: 50%;
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background: #fff;
        margin-left:-40px;
        bottom: 100%;
        text-align: center;
        padding-top:25px;
        color:#47c9af;
    }
    .tooltip-content::after{  /*css3 after元素選擇*/
        display: block;
        content: "";
    }
    .tooltip>*{
        opacity: 0;/*css透明度*/
    }
    .tooltip:hover > *{
        opacity: 1; /*css透明度*/
        transition:1s; /*css3過渡動(dòng)畫*/
        transform: rotate(360deg); /*css3旋轉(zhuǎn)動(dòng)畫*/
    }

效果圖