在线客服
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.xqgg.net/
