位置：固定锚定？

body { 
 
    margin: 0px; 
 
    background-color: rgba(195, 246, 255, 0.48); 
 
} 
 

 
.nav { 
 
    background-color: rgba(190, 190, 190, 0.72); 
 
    position: fixed; 
 
    top: 0px; 
 
    right: 0px; 
 
    left: 0px; 
 
    text-align: center; 
 
    height: 85px; 
 
    border: 1px solid black; 
 
} 
 

 
ul { 
 
    position: relative; 
 
    top: 6px; 
 
    left: 360px; 
 
    width: 450px; 
 
    height: 60px; 
 
    margin: 0px auto; 
 
    font-family: "Cairo"; 
 
    padding: 5px; 
 
} 
 

 
li { 
 
    position: relative; 
 
    top: 6px; 
 
    display: inline; 
 
    font-size: 25px; 
 
    text-transform: uppercase; 
 
    letter-spacing: .03em; 
 
} 
 

 
li.spacing1 { 
 
    margin-right: 25px; 
 
} 
 

 
li.spacing2 { 
 
    margin-left: 25px; 
 
} 
 

 
li:hover { 
 
    border: 1px solid red; 
 
    padding: 5px; 
 
} 
 

 
.content { 
 
    background-color: white; 
 
    width: 1100px; 
 
    margin: 87px auto 0px auto; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link href="../css/example.css" rel="stylesheet" type="text/css"> 
 
    <link href="https://fonts.googleapis.com/css?family=Cairo" rel="stylesheet"> 
 
    <title>My Portfolio</title> 
 
</head> 
 

 
<body> 
 

 
    <div class="nav"> 
 
    <ul> 
 
     <li class="spacing1"><a href="#about">About</a></li> 
 
     <li><a href="#portfolio">Portfolio</a></li> 
 
     <li class="spacing2"><a href="#contact">Contact</a></li> 
 
    </ul> 
 
    </div> 
 

 
    <div class="content"> 
 

 
    <p id="about">My name is Lawrence Yoon and I graduated from Cal Poly Pomona with a degree in Hospitality Management and minor in Business Marketing. After working in the hospitality industry for 5+ years, I wanted to expand my knowledge by trying out different 
 
     career paths and happened to find out about computer programming. I've been self-learning for 3+ months, and hope to become a front-end web developer soon! I am proficient with HTML and CSS, and have some knowledge of JavaScript. Once I get my first 
 
     job, I hope to continue studying and eventually learn back-end. My goal is to one day become a full-stack developer!</p> 
 
    <p>So far, I have knowledge of HTML, CSS, Bootstrap, JavaScript, and jQuery. I have used StackOverflow a couple times, and although I don't rely on this, it's great to ask questions and receive answers promptly from a loving community. Jon Duckett's 
 
     Introduction to HTML and CSS has been a great teacher to me thus far; although it's a bit dated, it contains detailed images and helped me greatly step foot into the world of web development. Following this book, I got his second book for JavaScript 
 
     and jQuery and have started to read through that. While I'm doing this, I'm learning from FreeCodeCamp, which immensely helped because through their projects, I'm able to make this file on Codepen, which will become my portfolio! I will definitely 
 
     try to finish all FCC challenges, and make a couple of apps to showcase my skills!</p> 
 
    <p>As of right now, I'm not looking for a job because I lack the skills necessary to get my first job in web development. In a couple of months, I hope to polish what I know so far as well as learn new skills to get my first job. In time, I will showcase 
 
     my skills by demonstrating my abilities through the makings of small apps. Thanks for reading! Please don't hesitate to reach out to me to provide tips, or if you want to talk about anything I'm all ears!</p> 
 

 
    <p id="portfolio">Portfolio:</p> 
 
    <img src="http://res.cloudinary.com/lyoon/image/upload/v1503300012/06_10_16_buqi65.jpg" alt="Beautiful sunset in Redondo Beach" width="300" height="300"> 
 
    <img src="http://res.cloudinary.com/lyoon/image/upload/v1503299864/01_30_16_2_d1ntei.jpg" alt="Gray day in Redondo Beach" width="300" height="300"> 
 
    <img src="http://res.cloudinary.com/lyoon/image/upload/v1503299922/02_01_16_wbmyow.jpg" alt="Water in Redondo Beach" width="300" height="300"> 
 
    <img src="http://res.cloudinary.com/lyoon/image/upload/v1503300012/06_10_16_buqi65.jpg" alt="Beautiful sunset" width="300" height="300"> 
 
    <p>Contact me here:</p> 
 
    <input type="text"> 
 
    <br> 
 
    <input type="text"> 
 
    <br> 
 
    <input type="text"> 
 
    <br> 
 
    <input type="submit" value="Send"> 
 

 
    <p id="contact">Here's where you can get in touch with me! Here, you can request for my resume, get more details on my experience, or learn more about my favorite hobbies! I will reply as soon as I am able, thanks! 
 

 
    </div> 
 
</body> 
 

 
</html>

两个问题：

我有阻止我的锚标签（约，组合，接触），当我点击它们的意思我position: fixed导航栏，它需要我到他们的位置，但导航栏阻止了开始。当我点击顶部的链接时，我怎样才能让它从我的导航栏下面开始？
我正在使用CSS li:visited {text-decoration: none;}，但它变成紫色，仍然有下划线。为什么会发生？

来源

2017-08-22 Lawrence Yoon

您希望在访问之前为链接指定下划线，并且一旦访问它就想要消失？ – kmg

我想使它没有装饰，即使点击它！ –

要解决页内定位点和固定标题的问题，您需要做的是在内容部分上方创建并相对定位定位元素。

小提琴例如：https://jsbin.com/dosalajotu/edit?html,css,output

例如，如果你的头是50px身材：

header { height: 50px; } 
.anchor { position: relative; top: -50px; } 

<section> 
    <div id="about" class="anchor"></div> 
</section>

随着:visited状态，这将适用于a元素，而不是li元素。如果你更新你的CSS选择器并且重写颜色，那应该可以解决问题。

li a:active, li a:visited { color: red; text-decoration: none; }

来源

2017-08-22 05:03:55 fubar

我这样试了，做了你说的话;但它只是将我的id =“about”向下移动，所以我有更多的空白区域 –

不，它需要是一个完全独立的空元素，以便它不会阻止任何内容。给我5分钟，我会把小提琴放在一起。 – fubar

@劳伦斯·约恩 - 在我的答案中看到小提琴链接。 – fubar

位置：固定锚定？

回答

相关问题