zoukankan      html  css  js  c++  java
  • 当锚点定位遇上position: fixed

    <!DOCTYPE html>
    <html>

    <head>
    <title>当锚点定位遇上position: fixed</title>
    <style type="text/css">
    * {
    margin: 0;
    padding: 0;
    }

    body {
    position: relative;
    }

    a {
    color: white;
    text-decoration: none;
    }

    .nav {
    position: fixed;
    top: 0;
    left: 0;
    100%;
    height: 100px;
    background-color: black;
    }

    .part-one,
    .part-two,
    .part-three {
    100%;
    height: 800px;
    }

    .part-one {
    background-color: red;
    padding-top: 100px;
    }

    .part-two {
    background-color: blue;
    padding-top: 100px;
    margin-top: -100px;
    }

    .part-three {
    background-color: yellow;
    padding-top: 100px;
    margin-top: -100px;
    }
    </style>
    </head>

    <body>
    <div class="nav">
    <a href="#part-one">part one</a>
    <a href="#part-two">part two</a>
    <a href="#part-three">part three</a>
    </div>
    <div class="part-one" id="part-one">I'm part one</div>
    <div class="part-two" id="part-two">I'm part two</div>
    <div class="part-three" id="part-three">I'm part three</div>
    </body>

    </html>

    <!DOCTYPE html>
    <html>
    
    	<head>
    		<title>CSS解决有固定导航时链接锚点定位偏移</title>
    		<style type="text/css">
    			* {
    				margin: 0;
    				padding: 0;
    			}
    			
    			body {
    				position: relative;
    			}
    			
    			a {
    				color: white;
    				text-decoration: none;
    			}
    			
    			.nav {
    				position: fixed;
    				top: 0;
    				left: 0;
    				 100%;
    				height: 100px;
    				background-color: black;
    			}
    			
    			.part-one,
    			.part-two,
    			.part-three {
    				 100%;
    				height: 800px;
    			}
    			
    			.part-one {
    				background-color: red;
    				padding-top: 100px;
    			}
    			
    			.part-two {
    				background-color: blue;
    				padding-top: 100px;
    				margin-top: -100px;
    			}
    			
    			.part-three {
    				background-color: yellow;
    				padding-top: 100px;
    				margin-top: -100px;
    			}
    		</style>
    	</head>
    
    	<body>
    		<div class="nav">
    			<a href="#part-one">part one</a>
    			<a href="#part-two">part two</a>
    			<a href="#part-three">part three</a>
    		</div>
    		<div class="part-one" id="part-one">I'm part one</div>
    		<div class="part-two" id="part-two">I'm part two</div>
    		<div class="part-three" id="part-three">I'm part three</div>
    	</body>
    
    </html>
    

      

  • 相关阅读:
    从虚拟地址,到物理地址(开PAE)
    无LoadLibrary获取指定模块基址
    练习
    Centos安装Python3及设置对应版本pip
    Varnish安装使用(初学)
    luogu P2463 [SDOI2008]Sandy的卡片 |二分+hash
    luogu P2852 [USACO06DEC]牛奶模式Milk Patterns |二分+hash
    luogu P4051 [JSOI2007]字符加密 |后缀数组(SA)
    弦图 学习笔记&
    luogu P1600 天天爱跑步 |树上差分+LCA
  • 原文地址:https://www.cnblogs.com/zhangyingqin/p/7196446.html
Copyright © 2011-2022 走看看