如何在导航栏添加hot样式图片_html/css

如何在导航栏添加hot样式图片_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:31:25

Original

2973 people have browsed it

如何在导航栏添加hot样式图片:
建议:尽可能的手写代码，可以有效的提高学习效率和深度。
在很多网站的导航栏中都有这样的效果，在一个比较热门的栏目上面会有一个动态的小图片用以标示此栏目比较热门或者是新增栏目等等，效果比较美观且人性化，下面就简单介绍一下如何实现此效果，先看一段代码实例:

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">* {  padding: 0px;  margin: 0px;}body {  font: 12px;  margin-top: 80px;}li {  list-style: none;}a {  text-decoration: none;  color: #20537A;}.clearfix:after {  content: "\0020";  display: block;  height: 0;  clear: both;}.clearfix {  _zoom: 1;}* + html .clearfix {  overflow: auto;}.menu_navcc {  width: 970px;  margin: 0 auto;}.menu_nav {  width: 970px;  height: 48px;  background: url(mytest/div+css/mynav_bg.gif) repeat-x;  float: left;  margin-top: 18px;}.menu_nav .nav_content {  padding-left: 25px;  background: url(mytest/div+css/mynav_l_bg.gif) no-repeat;  float: left;}.menu_nav .nav_content li {  width: 88px;  height: 48px;  padding-left: 15px;  padding-right: 13px;  background: url(mytest/div+css/mynav_li_right.gif) no-repeat right center;  float: left;  line-height: 48px;  text-align: center;  font-size: 14px;  font-weight: bold;}.menu_nav .nav_content li a {  color: #fff;  width: 88px;  height: 48px;  display: block;}.menu_nav .nav_content li.current {  line-height: 37px;}.menu_nav .nav_content li em {  background: url(mytest/div+css/bid_new.gif) no-repeat;  width: 35px;  height: 21px;  display: inline-block;  position: absolute;  top: -20px;  left: 40px;}.menu_nav .nav_content li.current a, .menu_nav .nav_content li a:hover {  width: 88px;  height: 37px;  background: url(mytest/div+css/mynav_li_current.gif) no-repeat;  display: block;  color: #fff;} .menu_nav .nav_content li a:hover {  background: url(mytest/div+css/mynav_li_hover.gif) no-repeat;  line-height: 37px;  text-decoration: none;}.menu_nav_right {  padding-right: 20px;  background: url(mytest/div+css/mynav_r_bg.gif) no-repeat right top;  float: right;  margin-left: 50px;  padding-top: 13px;  height: 23px;  padding-bottom: 12px;}p {  margin-bottom: 15px;}</style></head><body>  <div class="menu_navcc">    <div class="menu_nav clearfix">      <ul class="nav_content">        <li class="current"><a href="#" title="首页"><span>首页</span></a></li>        <li><a href="#" title="DIV+CSS教程"><span>DIV+CSS教程</span></a></li>        <li style="position:relative;"><a href="#" title="站长交流"><span>站长交流</span></a><em></em></li>        <li><a href="#" title="搜索优化"><span>搜索优化</span></a></li>        <li><a href="#" title="jQuery专区"><span>jQuery专区</span></a></li>        <li><a href="#" title="特效下载"><span>特效下载</span></a></li>      </ul>      <div class="menu_nav_right"></div>    </div>  </div></body></html>

Copy after login

以上代码实现了想要的效果，下面简单介绍一下如何实现此效果的:
实现原理:
将所在的li元素position属性值设置为relative，然后再将li元素中的em元素设置为绝对定位，并且给其设置背景图片，这个背景图片就是所看到的new图片，然后再实用left和top属性控制em的位置，这样就达成了想要的效果。之所以li元素要设置成相对定位，这样是因为如果em元素设置为绝对定位的话，em元素定位的参考元素就是li元素，具体可以参阅position绝对定位以哪个对象为参考一章。

原文地址是;http://www.softwhy.com/forum.php?mod=viewthread&tid=6286

更多内容可以参阅:http://www.softwhy.com/divcss/