我的网站有问题 网站运作正常
但是当我转到此页面时 http://sandergouman.nl/#AboutMe
然后按下hier downloaden，当你下载文件时获得chrome栏，网站变得更大 网站变得更大
但我不知道问题是什么代码 我在这里有我的index.html：
<!--
Astral by HTML5 UP
html5up.net | @n33co
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>HomePage</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]-->
<script src="js/jquery.min.js"></script>
<script src="js/skel.min.js"></script>
<script src="js/init.js"></script>
<noscript>
<link rel="stylesheet" href="css/skel.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/style-desktop.css" />
<link rel="stylesheet" href="css/style-noscript.css" />
</noscript>
<link rel="shortcut icon" type="image/png" href="games/racegame/foto/fotozonder.PNG">
<!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->
</head>
<body>
<!-- Wrapper-->
<div id="wrapper">
<!-- Nav -->
<nav id="nav">
<a href="#me" class="icon fa-home active"style=color:red><span>Home</span></a>
<a href="#work" class="icon fa-folder" style=color:red><span>Werk</span></a>
<a href="#contact" class="icon fa-envelope"style=color:blue><span>Contact</span></a>
<a href="#AboutMe" class=" icon fa-question-circle"style=color:blue><span>Over Mij</span></a>
</nav>
<!-- Main -->
<div id="main">
<!-- Me -->
<article id="me" class="panel">
<header>
<h1>Sander Gouman</h1>
<p><font color="SVG">Welkom op mijn website.<br> Hier kunt u delen van mijn werk zien.</font></p>
</header>
</article>
<!-- over mij -->
<article id="AboutMe" class="panel">
<header>
<h1>Sander Gouman</h1>
</header>
<p><font color="SVG">Ik ben Sander Gouman en ik woon in Amersfoort.<br>Ik ben 2e jaars student gamedeveloper aan het Grafisch Lyceum in Utrecht.<br> Ik werk met het programma Unity. Hierin zijn alle spellen op deze website gemaakt.<br> U kunt een pdf van mijn CV <a href="CV_Sander_Gouman.pdf" download>hier downloaden.</a></font></p>
<ul id="skill">
<li><span class="bar unity"></span><h3>Unity C#</h3>
<li><span class="bar html-css"></span><h3>Html // Css</h3>
<li><span class="bar testing"></span><h3>3D</h3>
</li>
</ul>
</article>
<!-- Work -->
<article id="work" class="panel">
<header>
<h2>Werk</h2>
</header>
<p>
</p>
<div class="row">
<div class="4u">
<div class="container">
<div class="test revealUpFull">
<img src="games/racegame/foto/fotozonder.PNG" width="260" height="195" />
<span class="title"><a href="game1.html">Racegame<br /><i class="icon fa-clock-o"></i> 8 Weken<br><i class="icon fa-calendar"></i> 29-1-2015</a></span>
</div>
</div>
</div>
<div class="4u">
<div class="container">
<div class="test revealUpFull">
<img src="games/top_down_shooter/foto/fotozonder.png" width="260" height="195" />
<span class="title"><a href="game3.html">Top down shooter<br /><i class="icon fa-clock-o"></i> 3 Weken<br><i class="icon fa-calendar"></i> 8-11-2014</a></span>
</div>
</div>
</div>
<div class="4u">
<div class="container">
<div class="test revealUpFull">
<img src="games/fps_shooter/foto/fotozonder.PNG" width="260" height="195" />
<span class="title"><a href="game2.html">Fps shooter<br /><i class="icon fa-clock-o"></i> 8 Weken<br><i class="icon fa-calendar"></i> 11-5-2014</a></span>
</div>
</div>
</div>
</div>
</article>
<!-- Contact -->
<article id="contact" class="panel">
<header>
<h2>Contact Me</h2>
</header>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2445.617108940998!2d5.3693015999999965!3d52.19583220000001!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47c646d54f5f74b3%3A0x24f74fcdc9277232!2sRabouwgaarde%2C+3824+Amersfoort!5e0!3m2!1snl!2snl!4v1426155136287" width="400" height="300" frameborder="0" style="border:0" align="right"></iframe>
<P STYLE="text-align: left;">Bedankt voor het bekijken van mijn website. Wilt u contact met mij opnemen vul dan het contactformulier hier beneden in.</P>
<form name="contactform" method="post" action="send_form_email.php">
<div>
<div class="row">
<div class="6u">
<input type="text" name="first_name" placeholder="Name" />
</div>
<div class="6u">
<input type="text" name="email" placeholder="Your Email" />
</div>
</div>
<div class="row">
<div class="12u">
<input type="text" name="subject" placeholder="Subject" />
</div>
</div>
<div class="row">
<div class="12u">
<textarea name="message" placeholder="Message" rows="8"></textarea>
</div>
</div>
<div class="row">
<div class="12u">
<input type="submit" value="Submit" />
</div>
</div>
</div>
</form>
</article>
</div>
<!-- Footer -->
<div id="footer">
<ul class="copyright">
<li>© Sander Gouman All rights reserved.
</ul>
</div>
</div>
</body>
</html>
和我的style.css：
@charset 'UTF-8';
@import url('http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,300italic,400italic');
@import url('font-awesome.min.css');
/*
Astral by HTML5 UP
html5up.net | @n33co
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/
/*********************************************************************************/
/* Basic */
/*********************************************************************************/
body
{
background-image: url('images/overlay.png'), url('images/bg.jpg');
background-repeat: repeat, no-repeat;
background-size: auto, 100% 100%;
}
body.is-loading *
{
-moz-transition: none !important;
-webkit-transition: none !important;
-o-transition: none !important;
-ms-transition: none !important;
transition: none !important;
-moz-animation: none !important;
-webkit-animation: none !important;
-o-animation: none !important;
-ms-animation: none !important;
animation: none !important;
}
body,input,textarea,select
{
font-family: 'Source Sans Pro', sans-serif;
font-weight: 400;
color: SVG; /*#777777;*/
}
strong, b
{
font-weight: 400;
color: #363636;
}
h1, h2, h3, h4,h5, h6
{
font-weight: 400;
color: #363636;
}
blockquote
{
border-left: solid 0.5em #ddd;
padding: 1em 0 1em 2em;
font-style: italic;
}
em, i
{
font-style: italic;
}
hr
{
border: 0;
border-top: solid 1px #ddd;
padding: 1.5em 0 0 0;
margin: 1.75em 0 0 0;
}
sub
{
position: relative;
top: 0.5em;
font-size: 0.8em;
}
sup
{
position: relative;
top: -0.5em;
font-size: 0.8em;
}
br.clear
{
clear: both;
}
p, ul, ol, dl, table, blockquote, form
{
margin-bottom: 2em;
}
/* Table */
table
{
width: 100%;
}
table.default
{
}
table.default tbody tr
{
border-bottom: solid 1px #f4f4f4;
}
table.default td
{
padding: 0.5em 1em 0.5em 1em;
}
table.default th
{
text-align: left;
font-weight: 400;
padding: 0.5em 1em 0.5em 1em;
}
table.default thead
{
border-bottom: solid 2px #f4f4f4;
}
/* Form */
form
{
}
form label
{
display: block;
font-weight: 400;
color: #363636;
margin: 0 0 1em 0;
}
form input[type="text"],
form input[type="email"],
form input[type="password"],
form select,
form textarea
{
-webkit-appearance: none;
border: 0;
background: #FFFFFF;
padding: 0.75em;
width: 100%;
-moz-transition: background-color .25s ease-in-out;
-webkit-transition: background-color .25s ease-in-out;
-o-transition: background-color .25s ease-in-out;
-ms-transition: background-color .25s ease-in-out;
transition: background-color .25s ease-in-out;
}
form input[type="text"],
form input[type="email"],
form input[type="password"],
form select
{
line-height: 1.35em;
}
form input[type="text"]:focus,
form input[type="email"]:focus,
form input[type="password"]:focus,
form select:focus,
form textarea:focus
{
background: #f8f8f8;
}
form ::-webkit-input-placeholder
{
color: #999;
}
form :-moz-placeholder
{
color: #999;
}
form ::-moz-placeholder
{
color: #999;
}
form :-ms-input-placeholder
{
color: #999;
}
/* Section/Article */
section,
article
{
margin-bottom: 3em;
}
section > :last-child,
article > :last-child
{
margin-bottom: 0;
}
section:last-child,
article:last-child
{
margin-bottom: 0;
}
header
{
}
header > p
{
color: #aaa;
}
/* Image */
.codeboxspace
{
min-width:1000px;
max-width:1400px;
width:95%;
display:none;
}
#codebox
{
font-family: "Courier 10 Pitch", Courier, monospace;
font-size: 90%;
line-height: 140%;
white-space: pre;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -o-pre-wrap;
background: #E0E0E0;
display: block;
padding: 0.5em 1em;
border: 1px solid #bebab0;
text-align:left;
color:black;
height : 100%;
width:920px;
}
.image
{
display: inline-block;
}
.image img
{
display: block;
width: 100%;
}
.image.fit
{
display: block;
width: 100%;
}
.image.featured
{
display: block;
width: 100%;
margin: 0 0 2em 0;
}
.image.left
{
float: left;
margin: 0 2em 2em 0;
}
.image.centered
{
display: block;
margin: 0 0 2em 0;
}
.image.centered img
{
margin: 0 auto;
width: auto;
}
/* Button */
input[type="button"],
input[type="submit"],
input[type="reset"],
.button
{
-webkit-appearance: none;
display: inline-block;
background-color: #222222;
color: #FFFFFF;
border: 0;
cursor: pointer;
outline: 0;
-moz-transition: background-color .25s ease-in-out;
-webkit-transition: background-color .25s ease-in-out;
-o-transition: background-color .25s ease-in-out;
-ms-transition: background-color .25s ease-in-out;
transition: background-color .25s ease-in-out;
}
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
.button:hover
{
background-color: #333333;
}
input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active,
.button:active
{
background-color: #444444;
}
input[type="button"].alt,
input[type="submit"].alt,
input[type="reset"].alt,
.button.alt
{
background-color: #777777;
}
input[type="button"].alt:hover,
input[type="submit"].alt:hover,
input[type="reset"].alt:hover,
.button.alt:hover
{
background-color: #888888;
}
input[type="button"].alt:active,
input[type="submit"].alt:active,
input[type="reset"].alt:active,
.button.alt:active
{
background-color: #999999;
}
/* List */
ul.default
{
list-style: disc;
padding-left: 1em;
}
ul.default li
{
padding-left: 0.5em;
}
ul.actions
{
}
ul.actions li
{
display: inline-block;
margin-left: 0.5em;
}
ul.actions li:first-child
{
margin-left: 0;
}
ol.default
{
list-style: decimal;
padding-left: 1.25em;
}
ol.default li
{
padding-left: 0.25em;
}
/*********************************************************************************/
/* Icons */
/*********************************************************************************/
.icon {
position: relative;
text-decoration: none;
}
.icon:before {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-transform: none !important;
}
.icon > .label {
display: none;
}
/*********************************************************************************/
/* Nav */
/*********************************************************************************/
#nav
{
}
#nav a
{
position: relative;
display: inline-block;
color: #FFFFFF;
width: 1em;
height: 1em;
line-height: 0.9em;
}
#nav a.icon:before
{
padding-right: 0;
}
/*********************************************************************************/
/* Panels */
/*********************************************************************************/
#main
{
position: relative;
overflow: hidden;
}
.panel
{
position: relative;
}
/* Me */
#me
{
}
#me .pic
{
position: relative;
display: block;
}
#me .pic:before
{
content: '';
position: absolute;
top: 0;
left: 0;
background: url('images/overlay.png');
width: 100%;
height: 100%;
z-index: 1;
}
/*********************************************************************************/
/* Footer */
/*********************************************************************************/
#footer
{
color: #ccc;
color: rgba(255,255,255,0.45);
}
#footer a
{
color: #ddd;
color: rgba(255,255,255,0.65);
-moz-transition: color .25s ease-in-out;
-webkit-transition: color .25s ease-in-out;
-o-transition: color .25s ease-in-out;
-ms-transition: color .25s ease-in-out;
transition: color .25s ease-in-out;
}
#footer a:hover
{
color: rgba(255,255,255,1.0);
}
#footer .copyright
{
}
#footer .copyright li
{
display: inline-block;
}
#footer .copyright li:before
{
display: inline;
content: '\2022';
opacity: 0.5;
padding: 0 0.75em 0 0.75em;
}
#footer .copyright li:first-child:before
{
display: none;
}
#skill {
list-style: none;
font: 12px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
width: 296px;
margin: 50px auto 0;
position: relative;
line-height: 2em;
padding: 30px 0;
}
#skill li {
margin-bottom:50px;
background:#e9e5e2;
background-image: -webkit-gradient(linear, left top, left bottom, from(#e1ddd9), to(#e9e5e2));
background-image: -webkit-linear-gradient(top, #e1ddd9, #e9e5e2);
background-image: -moz-linear-gradient(top, #e1ddd9, #e9e5e2);
background-image: -ms-linear-gradient(top, #e1ddd9, #e9e5e2);
background-image: -o-linear-gradient(top, #e1ddd9, #e9e5e2);
background-image: linear-gradient(top, #e1ddd9, #e9e5e2);
height:20px;
border-radius:10px;
-moz-box-shadow: 0 1px 0px #bebbb9 inset, 0 1px 0 #fcfcfc;
-webkit-box-shadow: 0 1px 0px #bebbb9 inset, 0 1px 0 #fcfcfc;
box-shadow: 0 1px 0px #bebbb9 inset, 0 1px 0 #fcfcfc;
}
#skill li h3 {
position:relative;
top:-25px;
}
.bar {
height:18px;
margin:1px 2px;
position:absolute;
border-radius:10px;
-moz-box-shadow: 0 1px 0px #fcfcfc inset, 0 1px 0 #bebbb9;
-webkit-box-shadow: 0 1px 0px #fcfcfc inset, 0 1px 0 #bebbb9;
box-shadow: 0 1px 0px #fcfcfc inset, 0 1px 0 #bebbb9;
}
.unity {
width:80%;
-moz-animation:unity 2s ease-out;
-webkit-animation:unity 2s ease-out;
background-color: #FF0000;
background-image: -webkit-gradient(linear, left top, left bottom, from(#FF0000), to(#FF0000));
background-image: -webkit-linear-gradient(top, #FF0000, #FF0000);
background-image: -moz-linear-gradient(top, #FF0000, #FF0000);
background-image: -ms-linear-gradient(top, #FF0000, #FF0000);
background-image: -o-linear-gradient(top, #FF0000, #FF0000);
background-image: linear-gradient(top, #FF0000, #FF0000);
}
.html-css {
width:50%;
-moz-animation:html-css 2s ease-out;
-webkit-animation:html-css 2s ease-out;
background-color: #FF8000;
background-image: -webkit-gradient(linear, left top, left bottom, from(#FF8000), to(#FF8000));
background-image: -webkit-linear-gradient(top, #FF8000, #FF8000);
background-image: -moz-linear-gradient(top, #FF8000, #FF8000);
background-image: -ms-linear-gradient(top, #FF8000, #FF8000);
background-image: -o-linear-gradient(top, #FF8000, #FF8000);
background-image: linear-gradient(top, #FF8000, #FF8000);
}
.testing {
width:20%;
-moz-animation:testing 2s ease-out;
-webkit-animation:testing 2s ease-out;
background-color: #192AFF;
background-image: -webkit-gradient(linear, left top, left bottom, from(#192AFF), to(#192AFF));
background-image: -webkit-linear-gradient(top, #192AFF, #192AFF);
background-image: -moz-linear-gradient(top, #192AFF, #192AFF);
background-image: -ms-linear-gradient(top, #192AFF, #192AFF);
background-image: -o-linear-gradient(top, #192AFF, #192AFF);
background-image: linear-gradient(top, #192AFF, #192AFF);
}
@-moz-keyframes unity {0% { width:0px;} 100%{ width:100%;} }
@-moz-keyframes html-css { 0% { width:0px;} 100%{ width:100%;} }
@-moz-keyframes testing { 0% { width:0px;} 100%{ width:100%;} }
@-webkit-keyframes unity { 0% { width:0px;} 100%{ width:80%;} }
@-webkit-keyframes html-css { 0% { width:0px;} 100%{ width:50%;} }
@-webkit-keyframes testing { 0% { width:0px;} 100%{ width:20%;} }
div.container {
margin: 50px auto;
width: 675px;
}
div.test {
position: relative;
overflow: hidden;
width: 260px;
height: 195px;
display: inline-block;
margin-right: 15px;
margin-bottom: 15px;
box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.3);
}
test {
position: absolute;
left: 0;
top: 0;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
}
span.title {
width: 260px;
height: 20px;
position: absolute;
background: rgba(30, 30, 30, 0.9);
text-align: center;
padding: 5px 0 4px;
font-size: 14px;
color: white;
font-family:"Lucida Sans", "Trebuchet MS", Arial, sans-serif;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
}
div.test.revealUpFull span {
height: 195px;
width: 260px;
bottom: -150px;
display: block;
}
div.test.revealUpFull span a {
text-decoration: none;
display: block;
height: 100%;
width: 100%;
color: white;
}
div.test.revealUpFull:hover img {
top: -150px;
}
div.test.revealUpFull:hover span {
bottom: 0px;
}
如果您需要更多文件，请告诉我 如果你需要查看文件，你也可以检查我网站上的来源
希望有人可以帮助我