<tbody id="9je1r"></tbody><tbody id="9je1r"><acronym id="9je1r"><rp id="9je1r"></rp></acronym></tbody>

亚洲无码Aⅴ,视频1页精品,欧美系列一区二区,曰韩色999

DIV+CSS實(shí)現(xiàn)左側(cè)帶三角形的提示框

2016/9/21 8:36:43 閱讀：1797 發(fā)布者：1797

實(shí)現(xiàn)效果

實(shí)現(xiàn)代碼

<!DOCTYPE html> 
<html> 
  <head> 
    <meta charset="UTF-8"> 
    <link rel="shortcut icon" href="resources/img/logo-color.png" type="image/x-icon"> 
    <title>測(cè)試</title> 
    <style> 
    .out-div { 
        color: #FFFFFF; 
        font-size: 16px; 
        line-height: 40px; 
        display: inline-block; 
        height: 40px; 
        width: 200px; 
        text-align: center; 
        border-radius: 5px; 
        margin-left: 32px; 
        vertical-align: top; 
        background-color: maroon; 
    } 
     
    .arrow { 
        width: 0px; 
        height: 0px; 
        border-top: 10px solid transparent; 
        border-right: 10px solid; 
        border-bottom: 10px solid transparent; 
        position: absolute; 
        margin-left: -10px; 
        margin-top: 10px; 
        border-right-color: maroon; 
    } 
    </style> 
  </head> 
  <body> 
    <div class="out-div"> 
        <div class="arrow" ></div> 
        <span>這是一個(gè)提示框</span> 
    </div> 
  </body> 
</html>

上一篇 div+css（ul li）實(shí)現(xiàn)圖片上文字下列表布局

下一篇 CSS浮動(dòng)設(shè)置與清除

【微信掃一掃】

亚洲无码Aⅴ,视频1页精品,欧美系列一区二区,曰韩色999

DIV+CSS實(shí)現(xiàn)左側(cè)帶三角形的提示框

實(shí)現(xiàn)效果

實(shí)現(xiàn)代碼

文章分類(lèi)

相關(guān)新聞

熱門(mén)標(biāo)簽