我的新项目是一个单页网站。坦率地说，这是我的演示页面。这里
现在，我的问题。正如我所说，该网站应该 pe 一页。所以我设计了4个部分，第一个在中间，第二个在右边，第三个在底部，最后一个在左边。他们都是绝对定位的。还有一个固定的导航。
下一个代码： 1.Html ：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Andrei Terecoasa</title>
<meta name="viewport" content="width=device-width, user-scalable=false;">
<link href='http://fonts.googleapis.com/css?family=Raleway:400,200,500,300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="first">
<a name="home"></a>
<h1 id="hi">Hi!</h1>
<h2 id="who">I am <span id="name">Andrei <span id="who2">Terecoasa</span></span></h2>
<p id="what">and i am a front-end developer! <span id="d">:D</span></p>
</div>
<div id="blog">
<a name="blog"></a>
<article>
<h1 class="title">Salut</h1>
<p class="desc">primul articol</p>
</article>
</div>
<nav>
<ul>
<li><a href="#home">home</a></li>
<li><a href="#blog">blog</a></li>
<li><a href="#">contact</a></li>
<li><a href="#">about</a></li>
</ul>
</nav>
</body>
</html>
2.CSS：
/*
*/
html,
body {
min-height: 100%;
height:100%;
}
body {
font-family: 'Raleway', sans-serif;
overflow: hidden;
}
#first {
background: #2ecc71;
text-align: center;
color:#ecf0f1;
min-height:100%;
padding: 70px;
width:100%;
position: absolute;
top:0%;
left:0%;
}
#hi {
font-size:6em;
line-height: 100px;
margin:20px;
}
#who {
margin:20px;
font-size: 2.5em;
}
#name {
color:#2c3e50;
}
#what {
font-size: 1.3em;
margin:30px;
}
nav {
position: fixed;
bottom:0px;
background: #ecf0f1;
width:100%;
text-align: center;
}
nav ul li {
display: inline-block;
}
nav ul li a {
font-size:1.2em;
display:block;
padding:10px;
text-decoration: none;
color:#8e44ad;
}
#blog {
position: absolute;
left:100%;
top:0;
width:100%;
background: #3498db;
min-height:100%;
padding: 70px;
width:100%;
}
/**
* Media queries for responsive design.
*
* These follow after primary styles so they will successfully override.
*/
@media all and (orientation:portrait) {
html, body {width:100%;max-width: 100%;margin:0;padding:0;}
}
@media all and (orientation:landscape) {
}
@media screen and (max-width:900px) {
}
@media screen and (max-width: 500px) {
}
@media screen and (max-device-width: 480px) {
/* Uncomment if you don't want iOS and WinMobile to mobile-optimize the text for you: j.mp/textsizeadjust */
/* html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } */
}
这里的问题是通过锚点导航不起作用..这是正确的方法还是您可以提出更好的方法？
此外，小提琴包括小提琴