在線客服
24小時免費咨詢電話：18978941786
客服時間：上午9：30~下午6點
sup實現css浮角
收藏 分享 發布日期:2012-2-12 16:30:40 編輯:admin 文章來源: 點擊率:
，更加醒目的來提示用戶，我給它起名為CSS浮角。當浮角只有一個的時候，我們可以用外框相對定位，浮角絕對定位來精準的定位小圖標的位置。如果可能出現多個浮角的話，可以用sup標簽來做。我看了淘寶和拍拍的代碼，覺得這種方式做比較好。想顯示浮角的地方后面直接加上SUP標簽就能實現。而不用去計算定位的坐標。-----------------------------------------------------------
原理很簡單：
<!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>無標題文檔</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="#">首頁</a></li>
<li><a href="#">信息查看</a><SUP><a href="#">發布</a></SUP></li>
<li><a href="#">聯系我們</a></li>
</ul>
</div>
</body>
</html>
-----------------------------------------------------------
效果如圖：
---------------------------------------------------------------------------------
娟子為您講解，謝謝欣賞！本文章由南寧網站建設、南寧網站優化、南寧網絡公司整理，轉載請注明出處：http://www.yu-168.cn/
