建站
咨詢
售后
建站咨詢
新聞中心
這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
純css實現(xiàn)小箭頭或三角形標志的方法
小編給大家分享一下純css實現(xiàn)小箭頭或三角形標志的方法，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！
目前創(chuàng)新互聯(lián)建站已為1000多家的企業(yè)提供了網(wǎng)站建設(shè)、域名、虛擬主機、網(wǎng)站托管維護、企業(yè)網(wǎng)站設(shè)計、霍州網(wǎng)站維護等服務(wù)，公司將堅持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。
實現(xiàn)小箭頭：
.arrow{
width: 20px;
height: 20px;
margin-top: 50px;
margin-left: 50px;
border-top: 1px solid #000;
border-left: 1px solid #000;
transform: rotate(45deg);/*旋轉(zhuǎn)角度*/
}
實現(xiàn)三角形：
.triangle{
width: 0;
height: 0;
border-width: 100px;
border-style: solid;
border-color: red transparent transparent transparent;
transform:rotate(45deg);
}
（免費視頻教程：css視頻教程）
如何讓多個元素在一行顯示？
（1）display:inline把元素轉(zhuǎn)化為行內(nèi)元素，但是寬高屬性不起作用
（2）display：inline-block可以讓元素在一行顯示，但是他會受空格、換行鍵的影響，會有默認間距
解決辦法：
1、去掉空格和換行鍵的影響 讓標簽全都在一行（這種方法不推薦，閱讀性不好）
2、給加了display:inline-block屬性的元素的父元素加一個屬性font-size:0
display:inline-block在ie6 7下不兼容的解決辦法？ dispaly:inline;//css hack ie瀏覽器可以識別 zoom:1;//觸發(fā)css hack的layout
3、利用浮動floa:left/right,但是需要清浮動
看完了這篇文章，相信你對“純css實現(xiàn)小箭頭或三角形標志的方法”有了一定的了解，如果想了解更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！
當前名稱：純css實現(xiàn)小箭頭或三角形標志的方法
文章來源：http://fisionsoft.com.cn/article/pgsdho.html
