导航栏和背景半透明

最新推荐文章于 2022-03-25 18:11:27 发布

广东话的蛇皇

最新推荐文章于 2022-03-25 18:11:27 发布

阅读量1k

点赞数 3

分类专栏：前端

本文链接：https://blog.csdn.net/qq_43618136/article/details/104167316

版权

前端专栏收录该内容

352 篇文章 1 订阅

订阅专栏

导航栏和背景半透明

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		a{
			display: inline-block;
			background-image: url(images/dao01.png);
			margin:6px 2px;
			width: 100px;
			height: 40px;
			color: white;
			font-size: 16px;
			line-height: 40px;
			text-align: center;
			border-radius: 15px;
			text-decoration: none;

		}
		a:hover{
			background-image: url(images/dao02.png);
			color: black;
		}
		.clearfix{
			clear: both;
			content:'';
			display: block;
		}
		.nav{
			width: 600px;
			height: 50px;
			margin: 10px auto;
			background-color: rgba(0,0,0,0.15);//背景半透明IE8以下不支持，
			background-color:#000\9;//只有IE9以下能处理这个代码hask
			filter:alpha(opacity=30);//IE滤镜
			
		}
		body{
			background-image: url(images/03.png);
		}

	</style>
</head>
<body>
	<div class="nav ">
		<a href="" style="margin-left: 30px">设为首页</a>
		<a href="">精彩活动</a>
		<a href="">特色服务</a>
		<a href="">关于我们</a>
		<a href="">联系方式</a>
	</div>
</body>
</html>

仿新浪导航栏（不完整）

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		a{
			text-decoration: none;
			color: black;
		}
		.fl{
			float: left;
		}
		.fr{
			float: right;
		}
	
		.nav{
			width: 1200px;
			margin: 0 auto;
			background-color: #fff5ee;

		}
		.nav div a{
			display: inline-block;
			height: 50px;
			line-height: 50px;
			font-size: 14px;
			padding:0 18px;
		}

		.nav div a:hover{
			color: white;
			background-color: #ffe4e1;
		}
		.shut{
			float: right;
			border:1px solid #bebebe;
			width: 60px;
			height: 30px;
			margin: 10px;
			text-align: center;
		
		}
		
	</style>
</head>
<body>
	<div style="height: 50px;border-top: 3px solid #c1ffc1;border-bottom: 1px solid #bebebe;
	">
	 <div class="nav ">
	 	<div class="left fl">
		 	<a href="">设为首页</a>
		 	<a href="">手机版</a>
		 	<a href="">移动客户端</a>
		</div> 	
		<div class="right fr">
		 	<a href="">登录</a>
		 	<a href="">微博</a>
		 	<a href="">博客</a>
		 	<a href="">邮箱</a>
		 	<a href="">网站导航</a>
		 <div class="shut">
		 	<span style="vertical-align: px;">×</span>
		 	<a style="padding: 0;vertical-align: 10px"href="">关闭</a>
		 </div>
		</div>
	 </div>
	</div>

</body>
</html>

会冒图标的导航栏

.tab ul li:hover:before{
	content: "";
	position: absolute;
	width: 23px;
	height: 13px;
	background-image: url(images/logo.jpg);
	background-size: 23px 13px;
	top: -13px;
	left: 50%;
	margin-left: -12px;
}

固定导航栏

在这里插入图片描述

DOM版

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
    * {
      margin: 0;
      padding: 0
    }

    img {
      vertical-align: top;
    }

    .main {
      margin: 0 auto;
      width: 1000px;
      margin-top: 10px;

    }
    .top,.nav{
      width: 1423px;
      margin:0 auto;
    }
    .fixed {
      position: fixed;
      top: 0;
      left: 50%;
      margin-left: -711.5px;
 
    }
    
  </style>
</head>
<body>
<div class="top" id="topPart">
  <img src="images/top.png" alt=""/>
</div>
<div class="nav" id="navBar">
  <img src="images/nav.png" alt=""/>
</div>
<div class="main" id="mainPart">
  <img src="images/main.png" alt=""/>
</div>
<script>


  //获取页面向上或者向左卷曲出去的距离的值
  function getScroll() {
    return {
      left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft||0,
      top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
    };
  }

  //滚动事件
  window.onscroll=function () {
    //向上卷曲出去的距离和最上面的div的高度对比
    if(getScroll().top>=document.getElementById("topPart").offsetHeight){
      //设置第二个div的类样式
     document.getElementById("navBar").className="nav fixed";
      //设置第三个div的marginTop的值
      document.getElementById("mainPart").style.marginTop=document.getElementById("navBar").offsetHeight+"px";
    }else{
      document.getElementById("navBar").className="nav";
      document.getElementById("mainPart").style.marginTop="10px";
    }
  };





</script>
<script>



</script>

</body>
</html>

jQuery版

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>防腾讯固定导航栏</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        .main {
            width: 1000px;
            margin: 0 auto;
        }
        /*.top {
            height: 171px;
        }
        .nav {
            height: 86px;
        }*/
    </style>
    <script src="jquery-1.12.2.js"></script>
    <script>
      $(function () {
        //浏览器的滚动条上下移动的时候,设置页面中的nav的div固定在页面的顶部或者是回到原来的位置

        //为浏览器注册滚动的事件
        $(window).scroll(function () {
          //获取页面的向上卷曲出去的距离的值

          //console.log($(this).scrollTop());
          //如果向上卷曲出去的距离的值大于或者是等于第一个div的高度
          if($(this).scrollTop()>=$(".top").height()){
            //设置导航栏固定在页面的顶部
            $(".nav").css("position","fixed");
            //设置导航栏在顶部的值是0
            $(".nav").css("top",0);
            //设置.main的div的位置,不是直接跳上去的
            $(".main").css("marginTop",$(".nav").height());
          }else{
            //恢复
            $(".nav").css("position","static");
            $(".main").css("marginTop",0);
          }
        });
      });

    </script>
</head>

<body>
<div class="top">
    <img src="images/top.png" />
</div>
<div class="nav">
    <img src="images/nav.png" />
</div>
<div class="main">
    <img src="images/main.png" />
</div>
</body>

</html>

tab切换效果导航栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    #list li {
      list-style-type: none;
      width: 80px;
      height: 30px;
      line-height: 30px;
      background-color: beige;
      text-align: center;
      float: left;
      margin-left: 5px;
    }

    #list li.current {
      background-color: burlywood;
    }

    #list li a {
      text-decoration: none;
    }
  </style>

</head>
<body>
<div id="menu">
  <ul id="list">
    <li class="current"><a href="http://www.baidu.com">首页</a>
    </li>
    <li><a href="javascript:void(0)">博客</a></li>
    <li><a href="javascript:void(0)">相册</a></li>
    <li><a href="javascript:void(0)">关于</a></li>
    <li><a href="javascript:void(0)">帮助</a></li>
  </ul>
</div>
<script>
  function getFirstElement(element) {
      if (element.firstElementChild) {
          return element.firstElementChild;
      } else {
          var node = element.firstChild;
          while (node && node.nodeType != 1) {
              node = node.nextSibling;
          }
          return node;
      }
  }
  //获取所有的li标签,
  var liObjs=document.getElementById("list").getElementsByTagName("li");
  //循环遍历,找到每个li中的a,注册点击事件
  for(var i=0;i<liObjs.length;i++){
    //每个li中的a
    var aObj=getFirstElement(liObjs[i]);

    aObj.onclick=function () {
      //第一件事:把这个a所在的li的所有的兄弟元素的类样式全部移除
      for(var j=0;j<liObjs.length;j++){
        liObjs[j].removeAttribute("class");
      }
      //第二件事:
      //当前点击的a的父级元素li(点击的这个a所在的父级元素li),设置背景颜色
      this.parentNode.className="current";

      return false;//阻止超链接跳转
    };
  }
</script>

</body>
</html>

广东话的蛇皇

关注

3
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
导航栏和背景半透明

<!DOCTYPE html><html><head> <title></title> <style type="text/css"> a{ display: inline-block; background-image: url(images/dao01.png); margin:6px 2px...
复制链接

扫一扫