在線客服
24小時(shí)免費(fèi)咨詢電話：18978941786
客服時(shí)間：上午9：30~下午6點(diǎn)
當(dāng)前位置：首頁(yè)>> 技術(shù)文章 >> Web標(biāo)準(zhǔn) >> sup實(shí)現(xiàn)css浮角
sup實(shí)現(xiàn)css浮角
收藏 分享 發(fā)布日期:2012-2-12 16:30:40 編輯:admin 文章來(lái)源: 點(diǎn)擊率:
，更加醒目的來(lái)提示用戶，我給它起名為CSS浮角。當(dāng)浮角只有一個(gè)的時(shí)候，我們可以用外框相對(duì)定位，浮角絕對(duì)定位來(lái)精準(zhǔn)的定位小圖標(biāo)的位置。如果可能出現(xiàn)多個(gè)浮角的話，可以用sup標(biāo)簽來(lái)做。我看了淘寶和拍拍的代碼，覺得這種方式做比較好。想顯示浮角的地方后面直接加上SUP標(biāo)簽就能實(shí)現(xiàn)。而不用去計(jì)算定位的坐標(biāo)。-----------------------------------------------------------
原理很簡(jiǎn)單：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無(wú)標(biāo)題文檔</title>
<style type="text/css">
body{
margin:0px;
padding:0px;
}
.menu ul li{
list-style:none;
}
.menu{
font-size:16px;
}
.menu li{
float:left;
font-weight:bold;
padding:0 10px;
}
.menu li a{
text-decoration:none;
}
.menu li sup{
font-weight:normal;
}
.menu li sup a{
color:red;
}
</style>
</head>
<body>
<div class="menu">
<ul>
<li><a href="#">首頁(yè)</a></li>
<li><a href="#">信息查看</a><SUP><a href="#">發(fā)布</a></SUP></li>
<li><a href="#">聯(lián)系我們</a></li>
</ul>
</div>
</body>
</html>
-----------------------------------------------------------
效果如圖：
---------------------------------------------------------------------------------
娟子為您講解，謝謝欣賞！本文章由南寧網(wǎng)站建設(shè)、南寧網(wǎng)站優(yōu)化、南寧網(wǎng)絡(luò)公司整理，轉(zhuǎn)載請(qǐng)注明出處：http://m.absorbed3d.com/
