CSS代码结构反馈/优化

Question

现在我已经完成了我的网站设计，我正在尝试优化css代码（使用了stackoverflow用户，论坛，我自己的代码等提供的代码片段）。我已经尝试过清理它，但我确信还有一些改进空间。非常感谢您的反馈！非常感谢

CSS：

html, body, #contact-us {
    height: 100%;
}
body {
    font: 12px 'Open Sans', "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 400;
    color: #000;
    margin: 0 auto;
    padding: 0;
    -webkit-text-size-adjust: none;
}
.clearfix {
    display: inline-block;
}
* html .clearfix {
    height: 1%;
}
.clearfix {
    display: block;
}
p {
    font: 12px 'Open Sans', "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 400;
    color: #000;
}
h1 {
    font: 24px 'Open Sans', "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 300;
    letter-spacing:1px;
    color: #0A4672;
}
h2 {
    font: 22px 'Open Sans', "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 500;
    letter-spacing:1px;
    color: #467FD9;
}
span.team-function {
    font: 12px 'Open Sans', "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    color: #467FD9;
}
span.activity-title {
    font: 22px 'Open Sans', "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 300;
    letter-spacing:1px;
    text-transform:uppercase;
    color: #467FD9;
}
p.activity-footnote {
    font: 10px 'Open Sans', "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 400;
    text-align: left;
    color: #000;
}
/* Positionning the logo on top left side */
#logo {
    position: fixed;
    float: left;
    top: 20px;
    left: 2%;
    font: 28px 'Open Sans', "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 400;
    z-index:1000;
}
/* End Logo */

/* Horizontal Menu, aligned on the right side */
#nav {
    right: 2%;
    list-style: none;
    position: fixed;
    top: 30px;
    z-index: 1000;
}
#nav > li {
    display: inline-block;
    float: left;
    zoom: 1;
    margin-left: 5px;
    margin-right: 5px;
}
#nav a {
    font: 12px 'Open Sans', "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 600;
    letter-spacing: 1px;
    float: left;
    top: 30px;
    padding-left: 15px;
    padding-right: 15px;
    display: inline-block;
    font-size: 11px;
    text-decoration: none;
    height: 24px;
    color: #666;
    line-height: 24px;
    text-align: center;
    -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    text-transform: uppercase;
    background: white;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    filter: alpha(opacity=80);
    opacity: 0.8;
}
#nav a:hover {
    background: #dedede;
}
#nav .current a {
    background: #666;
    color: #ededed;
}
/* End Menu */


/* Page Presentation */
#presentation {
    height: 1300px;
    background: #afc9ff;
    background: url(../images/bg-24.jpg) no-repeat center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
}
#presentation-container {
    width:810px;
    padding-top: 15%;
    margin-left: auto;
    margin-right: auto;
}
.presentation-highlights {
    text-align: justify;
    margin-top:20px;
    margin-right:7px;
    float:left;
    padding:10px;
    font: 12px 'Open Sans', "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 400;
    width: 230px;
    Height:90px;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)";
    filter: alpha(opacity=95);
    opacity: 0.85; /* For IE8 and earlier */
    border: 1px dotted #666;
    background: #fff;
}
/* End Page presentation */


/* Page Equipe */
#team {
    height: 1300px;
    padding-top: 150px;
    background: #8aba56;
    background: url(../images/bg-23.jpg) no-repeat center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
}
#team-container {
    width:960px;
    background-color:#FFFFFF;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=83)";
    filter: alpha(opacity=83);
    opacity: 0.83; /* For IE8 and earlier */
    margin-left: auto;
    margin-right: auto;
    background: #fff;
    border: 1px dotted #666;
}
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
#team-left {
    color:#000;
    padding-left:20px;
    padding-top:20px;
    width: 20%;
    float: left;
    position: relative;
}
#team-right {
    font:12px 'Open Sans', "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight:400;
    padding-left:25px;
    padding-top:24px;
    padding-bottom:20px;
    color:#000;
    width: 70%;
    float: left;
    position: relative;
    text-align:justify;
}
.image-center {
    text-align: center;
    display: block;
    margin: 0 auto;
    padding-top: 30px;
    padding-right: -15px;
}
/* Page Plan d'Activité */
#activity {
    height: 1300px;
    background: #8aba56;
    padding-top: 150px;
    background: url(../images/bg-22.jpg) no-repeat center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
}
#activity-container {
    width: 640px;
    font:12px 'Open Sans', "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight:400;
    text-align:justify;
    background-color: #FFFFFF;
    font: 12px 'Open Sans', "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    color:#000;
    font-weight: 400;
    padding:25px;
    margin-left: auto;
    margin-right: auto;
    border: 1px dotted #666;
    background: #fff url(../images/norway-map.png) no-repeat right center;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=93)";
    filter: alpha(opacity=93);
    opacity: 0.93; /* For IE8 and earlier */
}
/* End Page Activity */

/* Page Source */
#source {
    height: 1300px;
    background: #8aba56;
    padding-top: 150px;
    background: url(../images/bg-28.jpg) no-repeat center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
}
#source-container {
    width: 800px;
    margin-left: auto;
    margin-right: auto;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=93)";
    filter: alpha(opacity=93);
    opacity: 0.93; /* For IE8 and earlier */
}
.source-title-box {
    color: #000;
    background: #fff;
    width: 230px;
    position: relative;
    margin-top:10px;
    border: 1px dotted #666;
}
.source-title-box a {
    color:#467FD9;
    display:block;
    text-decoration:none;
    padding: 15px;
}
.source-title-box a:hover {
    background-color:#467FD9;
    color:#FFFFFF;
}
#source-region, #source-oursource {
    font:12px 'Open Sans', "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight:400;
    text-align:justify;
    background: #fff;
    color: #000;
    padding:15px 20px 20px 20px;
    display:block;
    width: 510px;
    float: right;
    position: relative;
    border: 1px dotted #666;
    line-height:1px;
}
#source-oursource {
    display:none;
}
#source-oursource p {
    margin-bottom:5px;
}
#source-region p {
    margin-bottom:5px;
    padding-right:10px;
}
/* Page Medias */
#medias {
    height: 1300px;
    background: #8aba56;
    padding-top: 150px;
    background: url(../images/bg-18.jpg) no-repeat center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
}
#medias-container {
    width: 800px;
    margin-left: auto;
    margin-right: auto;
}
#medias-title-box {
    color: #000;
    background: #fff;
    padding: 15px;
    width: 200px;
    float: left;
    position: relative;
    border: 1px dotted #666;
}
#medias-table-header {
    background: #fff;
    color: #000;
    width: 490px;
    float: right;
    position: relative;
    border: 1px dotted #666;
}
#medias-table-header-type, #medias-table-header-desc, #medias-table-header-lang {
    font: 22px 'Open Sans', "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 200;
    padding: 15px;
    background: #fff;
    color: #000;
    width: 50px;
    float: left;
    position: relative;
}
#medias-table-header-desc {
    width: 200px;
}
#medias-table-header-lang {
    width: 85px;
}
.medias-table-content {
    margin-top: 10px;
    background: #fff;
    color: #000;
    width: 490px;
    float: right;
    position: relative;
    border: 1px dotted #666;
}
.medias-table-content-type, .medias-table-content-desc, .medias-table-content-lang {
    padding:10px 15px 10px 15px;
    background: #fff;
    text-align:center;
    color: #000;
    width: 50px;
    float: left;
    position: relative;
}
.medias-table-content-desc {
    font: 14px 'Open Sans', "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 200;
    padding:10px 15px 10px 15px;
    width: 200px;
    text-align:left;
    Vertical-align:middle;
}
.medias-table-content-desc a {
    text-decoration:none;
    color:#000;
    Vertical-align:middle;
}
.medias-table-content-desc a:hover {
    color:#0A4672;
    text-decoration:underline;
}
.medias-table-content-lang {
    width: 85px;
}
/* end page medias */

/* Page Contact */
#contact-us {
    background: #8aba56;
    padding: 0;
    position: relative;
    background: url(../images/bg-26.jpg) no-repeat center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
}
#contact-box {
    text-align:center;
    font: 12px 'Open Sans', "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 400;
    width: 300px;
    Height:120px;
    padding:15px;
    /*margin-left: auto;
    margin-right: auto;*/
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)";
    filter: alpha(opacity=95);
    opacity: 0.85; /* For IE8 and earlier */
    border: 1px dotted #666;
    background: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -80px;
    margin-left: -150px;
}
#contact-box p {
    font: 12px 'Open Sans', "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 400;
    color: #000;
    letter-spacing:2px;
    margin-bottom:3px;
}
#contact-box h2 {
    font: 22px 'Open Sans', "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 500;
    letter-spacing:2px;
    color: #467FD9;
}
.highlightit img {
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
    -moz-opacity: 1;
    opacity: 1;
}
.highlightit:hover img {
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
    -moz-opacity: 0.7;
    opacity: 0.7;
}
/* Section Footer with social icons on the left and address and flags on the right */
#footer {
    position: fixed;
    bottom: 0;
    color: #333;
    left: 0;
    z-index: 999;
    width: 96%;
    text-align: right;
    padding: 30px 2%;
    vertical-align: bottom;
}
#social {
    position: absolute;
    vertical-align: middle;
    left: 2%;
    color: #333;
}
.txtcentered {
    width: 300px;
    height: 200px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -100px 0 0 -150px;
}
.fb_iframe_widget, iframe.twitter-share-button {
    display: inline-block;
    vertical-align: middle;
}
span.languageselector {
    display: inline-block;
    height: 20px; /* same height as #social div */
    line-height: 20px; /* same as line-height */
}
/*contact form*/
#inline {
    display: none;
    width: 600px;
}
.txt {
    display: inline-block;
    color: #676767;
    width: 420px;
    font-family: Arial, Tahoma, sans-serif;
    margin-bottom: 10px;
    border: 1px dotted #ccc;
    padding: 5px 9px;
    font-size: 1.2em;
    line-height: 1.4em;
}
.txtarea {
    display: block;
    -webkit-resize: none;
    -moz-resize: none;
    -webkit-resize: none;
    -moz-resize: none;
    resize: none;
    color: #676767;
    font-family: Arial, Tahoma, sans-serif;
    margin-bottom: 10px;
    width: 500px;
    height: 150px;
    border: 1px dotted #ccc;
    padding: 5px 9px;
    font-size: 1.2em;
    line-height: 1.4em;
}
.txt:focus, .txtarea:focus {
    border-style: solid;
    border-color: #bababa;
    color: #444;
}
input.error, textarea.error {
    border-color: #973d3d;
    border-style: solid;
    background: #f0bebe;
    color: #a35959;
}
input.error:focus, textarea.error:focus {
    border-color: #973d3d;
    color: #a35959;
}
#send {
    color: #dee5f0;
    display: block;
    cursor: pointer;
    padding: 5px 11px;
    font-size: 1.2em;
    border: solid 1px #224983;
    border-radius: 5px;
    background: #1e4c99;
    background: -webkit-gradient(linear, left top, left bottom, from(#2f52b7), to(#0e3a7d));
    background: -webkit-linear-gradient(top, #2f52b7, #0e3a7d);
    background: -moz-linear-gradient(top, #2f52b7, #0e3a7d);
    background: -o-linear-gradient(top, #2f52b7, #0e3a7d);
    background: -ms-linear-gradient(top, #2f52b7, #0e3a7d);
    background: linear-gradient(top, #2f52b7, #0e3a7d);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2f52b7', endColorstr='#0e3a7d');
}
#send:hover {
    background: #183d80;
    background: -webkit-gradient(linear, left top, left bottom, from(#284f9d), to(#0c2b6b));
    background: -webkit-linear-gradient(top, #284f9d, #0c2b6b);
    background: -moz-linear-gradient(top, #284f9d, #0c2b6b);
    background: -o-linear-gradient(top, #284f9d, #0c2b6b);
    background: -ms-linear-gradient(top, #284f9d, #0c2b6b);
    background: linear-gradient(top, #284f9d, #0c2b6b);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#284f9d', endColorstr='#0c2b6b');
}
#send:active {
    color: #8c9dc0;
    background: -webkit-gradient(linear, left top, left bottom, from(#0e387d), to(#2f55b7));
    background: -webkit-linear-gradient(top, #0e387d, #2f55b7);
    background: -moz-linear-gradient(top, #0e387d, #2f55b7);
    background: -o-linear-gradient(top, #0e387d, #2f55b7);
    background: -ms-linear-gradient(top, #0e387d, #2f55b7);
    background: linear-gradient(top, #0e387d, #2f55b7);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0e387d', endColorstr='#2f55b7');
}

HTML

<!DOCTYPE html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta name="description" content="."/>
<link href="../css/reset.css" rel="stylesheet" type="text/css" />
<link href="../css/style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" media="all" href="../fancybox/jquery.fancybox.css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:700,600,500,400,300' rel='stylesheet' type='text/css' />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" /></script>
<script src="../js/jquery.queryloader2.js" type="text/javascript" /></script>
<script type="text/javascript" src="../js/scripts.js" /></script>
<script type="text/javascript" src="../fancybox/jquery.fancybox.js?v=2.0.6" /></script>
</head>
<body>
<!--[if lte IE 6]><script src="../js/ie6/warning.js"></script><script>window.onload=function(){e("js/ie6/")}</script><![endif]-->
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/fr_FR/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div id="logo"><img src="../images/logo-khklhll-white.png" alt="" title="" /></div>
<ul id="nav">
  <li class="current"><a href="#presentation">Accueil</a></li>
  <li><a href="#activity">L'Entreprise</a></li>
  <li><a href="#team">L'équipe</a></li>
  <li><a href="#source">Notre Eau</a></li>
  <li><a href="#medias">Presse</a></li>
  <li><a href="#contact-us">Contact</a></li>
</ul>
<div id="presentation">
  <div id="presentation-container">
    <h1>S.</h1>
    <h1>No</h1>
    <div class="presentation-highlights">
      <p><b>Eau </b></p>
      <p>S.</p>
    </div>
    <div class="presentation-highlights">
      <p><b>Ee</b></p>
      <p>Sle.</p>
    </div>
    <div class="presentation-highlights">
      <p><b>Ds</b></p>
      <p>Sts.</p>
    </div>
  </div>
</div>
<!--END page1-->
<div id="activity">
  <div id="activity-container">
    <p><span class="activity-title">khklhll, naturlig mineralvann, ren natur</span></p>
    <br />
    <p>khklhll AS was2011.</p>
    <br />
    <p>A lot otors.</p>
    <br />
    <p>khklhll AS ha).</p>
    <br />
    <p>Ouryear.</p>
    <br />
    <p>Our pr12.</p>
    <br />
    <p class="activity-footnote"><i>* Legislation ers.</i></p>
  </div>
</div>
<!--END page2-->
<div id="team">
  <div id="team-container" class="clearfix">
    <div id="team-left"><span class="activity-title">Meet the team</span><br />
      <img src="../images/team-members-khklhll-vann.png" class="image-center" alt="khklhll AS Team Members" /></div>
    <div id="team-right">
      <p><b>Moou</b> - <span class="team-function">Founder and Chief Executing Officer</span></p>
      <p>25 years’ exptry.</p>
      <br />
      <p><b>Ond</b> - <span class="team-function">Adviser and Board Member</span></p>
      <p>Economistantile sector.</p>
      <br />
      <p><b>Hen</b> - <span class="team-function">Adviser and Board Member</span></p>
      <p>Bacheojects.</p>
      <br />
      <p><b>Pede</b> - <span class="team-function">Landowners</span></p>
      <p>Peter an terrain.</p>
      <br>
      <p><b>Babou</b> - <span class="team-function">Financial Advisor</span></p>
      <p>MBA fro a Six Sigma black belt.</p>
      <br />
      <p><b>Heleck </b> - <span class="team-function">Representative in Germany</span></p>
      <p>Several design.</p>
    </div>
  </div>
</div>
<!--END page3-->
<div id="source">
  <div id="source-container">
    <div id="source-region" class="textzone">
      <p><span class="activity-title">Interacting ure</span></p>
      <img src="../images/khklhll-map.png" style="float:right; margin-left:15px;" alt="fzeez - Internature">
      <p>fzeez i.</p>
      <p>The m lakes.</p>
      <p>fzeez is agual.</p>
      <p>The Eim.</p>
      <br>
    </div>
    <div id="source-oursource" class="textzone">
      <p><span class="activity-title">Pure, rce</span></p>
      <p>Our minerillage of fzeez.</p>
      <p>The wiates.</p>
      <p>The w8.</p>
      <br>
      <img src="../images/khklhll-water-properties-fr.png" alt="khklhll Water rties" title="khklhll Waterties" /> </div>
    <div class="source-title-box"><span class="activity-title"><a href="#" data-region="source-region">The region</a></span></div>
    <div class="source-title-box"><span class="activity-title"><a href="#" data-region="source-oursource">The source</a></span></div>
    <img src="../images/clickhere.png"> </div>
  ​ </div>
<!--END page4-->
<div id="medias">
  <div id="medias-container">
    <div id="medias-title-box"><span class="activity-title">PRESS &amp; MEDIAS</span><br />
    </div>
    <div id="medias-table-header">
      <div id="medias-table-header-type">TYPE</div>
      <div id="medias-table-header-desc">DESCRIPTION</div>
      <div id="medias-table-header-lang">LANGUAGE</div>
    </div>
    <div class="medias-table-content">
      <div class="medias-table-content-type"><img src="../images/article.png" alt="Article" title="Article" /></div>
      <div class="medias-table-content-desc"><a href="../resources/sna0418.pdf" target="_blank">Bli med Apr. 2012</a></div>
      <div class="medias-table-content-lang"><img src="../images/no.png" alt="Norway" /></div>
    </div>
    <div class="medias-table-content">
      <div class="medias-table-content-type"><img src="../images/article.png" alt="Article" title="Article"/></div>
      <div class="medias-table-content-desc"><a href="../resources/tron0403.pdf" target="_blank">Visa 03 Apr. 2012</a></div>
      <div class="medias-table-content-lang"><img src="../images/no.png" alt="Norway" /></div>
    </div>
    <div class="medias-table-content">
      <div class="medias-table-content-type"><img src="../images/article.png" alt="Article" title="Article"/></div>
      <div class="medias-table-content-desc"><a href="http://www.adre684431.ece" target="_blank">Sa.no Aug. 2011</a></div>
      <div class="medias-table-content-lang"><img src="../images/no.png" alt="Norway" /></div>
    </div>
  </div>
</div>
<!--END page5-->
<div id="contact-us">
  <div id="contact-box">
    <p><h2>khklhll AS</h2></p>
    <p>7760 fzeez | Norway</p>
    <p>+47 99 75</p>
    <a href="#inline" class="modalbox highlightit"><img src="../images/mail.png" alt="Send us an e-mail" /></a><br />
  </div>
</div>
<!--END page6-->
<div id="footer">
  <div id="social">
    <div class="fb-like" data-href="http://www.khklhllvann.com" data-send="false" data-layout="button_count" data-width="106" data-show-faces="false" data-font="verdana"></div>
    <a href="https://twitter.com/share" class="twitter-share-button" data-lang="msa">Tweet</a> 
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> 
  </div>
  <a href="../index.php?lang=fr"><img src="../images/fr.png" alt="Version Française" title="khklhll en version Française"/></a> <a href="../index.php?lang=no"><img src="../images/no.png" alt="khklhll på norsk" title="khklhll på norsk" /></a> <a href="../index.php?lang=de"><img src="../images/de.png" alt="Deutsch" /></a> <a href="../index.php?lang=en"><img src="../images/uk.png" alt="khklhll in English" title="khklhll in English" /></a> </div>

<!-- hidden inline form -->
<div id="inline">
  <h2>SEND US A MESSAGE</h2>
  <Br />
  <form id="contact" action="#" method="post" name="contact">
    <input id="name" class="txt" type="name" name="name" placeholder="Name"/>
    <br />
    <input id="email" class="txt" type="email" name="email" placeholder="E-mail address"/>
    <br />
    <textarea id="msg" class="txtarea" name="msg" placeholder="Type your message here..."></textarea>
    <button id="send">Send E-mail</button>
  </form>
  <br />
</div>
<script src="../js/jquery.scrollTo.js"></script> 
<script src="../js/jquery.nav.js"></script> 
<script>
$(document).ready(function() {
  $('#nav').onePageNav();
});
</script>
</body>
</html>

Answer 1

删除了很多重复的字体继承

短编码#FFFFFF至#fff

短编码填充，边距

增加了对Opera＆amp; amp ;;的支持background-size

上的IE10

修正了一些错误的

CSS：

html, body, #contact-us {height: 100%;}
body {font: 12px 'Open Sans', "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;font-weight: 400;color: #000;margin: 0 auto;padding: 0;-webkit-text-size-adjust: none;}
/*.clearfix {display: inline-block;}*/
.clearfix {display: block;}
.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
* html .clearfix {height: 1%;zoom:1;}
p {color: #000;}
h1 {font-weight: 300;letter-spacing:1px;color: #0A4672;}
h2 {font-weight: 500;letter-spacing:1px;color: #467FD9;}
span.team-function {color: #467FD9;}
span.activity-title {font-size: 22px;font-weight: 300;letter-spacing:1px;text-transform:uppercase;color: #467FD9;}
p.activity-footnote {font-size: 10px;text-align: left;color: #000;}
/* Positionning the logo on top left side */
#logo {position: fixed;float: left;top: 20px;left: 2%;font-size: 28px;font-weight: 400;z-index:1000;}
/* End Logo */
/* Horizontal Menu, aligned on the right side */
#nav {right: 2%;list-style: none;position: fixed;top: 30px;z-index: 1000;}
#nav > li {display: inline-block;float: left;zoom: 1;margin: 0 5px;}
#nav a {font-size: 12px;font-weight: 600;letter-spacing: 1px;float: left;top: 30px;padding: 0 15px;display: inline-block;font-size: 11px;text-decoration: none;height: 24px;color: #666;line-height: 24px;text-align: center;-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);box-shadow: 1px 1px 2px rgba(0,0,0,0.2);text-transform: uppercase;background: white;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";filter: alpha(opacity=80);opacity: 0.8;}
#nav a:hover {background: #dedede;}
#nav .current a {background: #666;color: #ededed;}
/* End Menu */
/* Page Presentation */
#presentation {height: 1300px;background: #afc9ff;background: url(../images/bg-24.jpg) no-repeat center fixed;-webkit-background-size: cover;-moz-background-size: cover;-ms-background-size: cover;-o-background-size: cover;background-size: cover;}
#presentation-container {width:810px;padding-top: 15%;margin: 0 auto;}
.presentation-highlights {text-align: justify;margin-top:20px;margin-right:7px;float:left;padding:10px;font-size: 12px;width: 230px;height:90px;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)";filter: alpha(opacity=95);opacity: 0.85; /* For IE8 and earlier */border: 1px dotted #666;background: #fff;}
/* End Page presentation */
/* Page Equipe */
#team {height: 1300px;padding-top: 150px;background: #8aba56 url(../images/bg-23.jpg) no-repeat center fixed;-webkit-background-size: cover;-moz-background-size: cover;-ms-background-size: cover;-o-background-size: cover;background-size: cover;}
#team-container {width:960px;background-color:#fff;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=83)";filter: alpha(opacity=83);opacity: 0.83;margin: 0 auto;background: #fff;border: 1px dotted #666;}
#team-left {color:#000;padding:20px 0 0 20px;width: 20%;float: left;position: relative;}
#team-right {font-size: 12px;padding:24px 0 20px 25px;color:#000;width: 70%;float: left;position: relative;text-align:justify;}
.image-center {text-align: center;display: block;margin: 0 auto;padding-top: 30px -15px 0 0;}
/* Page Plan d'Activité */
#activity {height: 1300px;background: #8aba56;padding-top: 150px;background: url(../images/bg-22.jpg) no-repeat center fixed;-webkit-background-size: cover;-moz-background-size: cover;-ms-background-size: cover;-o-background-size: cover;background-size: cover;}
#activity-container {width: 640px;font-size: 12px;text-align:justify;background-color: #fff;color:#000;padding:25px;margin: 0 auto;border: 1px dotted #666;background: #fff url(../images/norway-map.png) no-repeat right center;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=93)";filter: alpha(opacity=93);opacity: 0.93;}
/* End Page Activity */
/* Page Source */
#source {height: 1300px;background: #8aba56;padding-top: 150px;background: url(../images/bg-28.jpg) no-repeat center fixed;-webkit-background-size: cover;-moz-background-size: cover;-ms-background-size: cover;-o-background-size: cover;background-size: cover;}
#source-container {width: 800px;margin:0 auto;;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=93)";filter: alpha(opacity=93);opacity: 0.93;}
.source-title-box {color: #000;background: #fff;width: 230px;position: relative;margin-top:10px;border: 1px dotted #666;}
.source-title-box a {color:#467FD9;display:block;text-decoration:none;padding: 15px;}
.source-title-box a:hover {background-color:#467FD9;color:#fff;}
#source-region, #source-oursource {font-size: 12px;text-align:justify;background: #fff;color: #000;padding:15px 20px 20px 20px;display:block;width: 510px;float: right;position: relative;border: 1px dotted #666;line-height:1px;}
#source-oursource {display:none;}
#source-oursource p {margin-bottom:5px;}
#source-region p {margin-bottom:5px;padding-right:10px;}
/* Page Medias */
#medias {height: 1300px;background: #8aba56;padding-top: 150px;background: url(../images/bg-18.jpg) no-repeat center fixed;-webkit-background-size: cover;-moz-background-size: cover;-ms-background-size: cover;-o-background-size: cover;background-size: cover;}
#medias-container {width: 800px;margin: 0 auto;}
#medias-title-box {color: #000;background: #fff;padding: 15px;width: 200px;float: left;position: relative;border: 1px dotted #666;}
#medias-table-header {background: #fff;color: #000;width: 490px;float: right;position: relative;border: 1px dotted #666;}
#medias-table-header-type, #medias-table-header-desc, #medias-table-header-lang {font-size: 22px;font-weight: 200;padding: 15px;background: #fff;color: #000;width: 50px;float: left;position: relative;}
#medias-table-header-desc {width: 200px;}
#medias-table-header-lang {width: 85px;}
.medias-table-content {margin-top: 10px;background: #fff;color: #000;width: 490px;float: right;position: relative;border: 1px dotted #666;}
.medias-table-content-type, .medias-table-content-desc, .medias-table-content-lang {padding:10px 15px 10px 15px;background: #fff;text-align:center;color: #000;width: 50px;float: left;position: relative;}
.medias-table-content-desc {font-size: 14px;font-weight: 200;padding:10px 15px 10px 15px;width: 200px;text-align:left;vertical-align:middle;}
.medias-table-content-desc a {text-decoration:none;color:#000;vertical-align:middle;}
.medias-table-content-desc a:hover {color:#0A4672;text-decoration:underline;}
.medias-table-content-lang {width: 85px;}
/* end page medias */
/* Page Contact */
#contact-us {background: #8aba56;padding: 0;position: relative;background: url(../images/bg-26.jpg) no-repeat center fixed;-webkit-background-size: cover;-moz-background-size: cover;-ms-background-size: cover;-o-background-size: cover;background-size: cover;}
#contact-box {text-align:center;font-size: 12px;width: 300px;height:120px;padding:15px;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)";filter: alpha(opacity=95);opacity: 0.85;border: 1px dotted #666;background: #fff;position: absolute;top: 50%;left: 50%;margin-top: -80px 0 0 -150px;}
#contact-box p {font-size: 12px;color: #000;letter-spacing:2px;margin-bottom:3px;}
#contact-box h2 {font-size: 22px;font-weight: 500;letter-spacing:2px;color: #467FD9;}
.highlightit img {filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);opacity: 1;}
.highlightit:hover img {filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);opacity: 0.7;}
/* Section Footer with social icons on the left and address and flags on the right */
#footer {position: fixed;bottom: 0;color: #333;left: 0;z-index: 999;width: 96%;text-align: right;padding: 30px 2%;vertical-align: bottom;}
#social {position: absolute;vertical-align: middle;left: 2%;color: #333;}
.txtcentered {width: 300px;height: 200px;position: absolute;left: 50%;top: 50%;margin: -100px 0 0 -150px;}
.fb_iframe_widget, iframe.twitter-share-button {display: inline-block;vertical-align: middle;}
.languageselector {display: inline-block;height: 20px;line-height: 20px;}
/*contact form*/
#inline {display: none;width: 600px;}
.txt {display: inline-block;color: #676767;width: 420px;font-family: Arial, Tahoma, sans-serif;margin-bottom: 10px;border: 1px dotted #ccc;padding: 5px 9px;font-size: 1.2em;line-height: 1.4em;}
.txtarea {display: block;-webkit-resize: none;-moz-resize: none;resize: none;color: #676767;font-family: Arial, Tahoma, sans-serif;margin-bottom: 10px;width: 500px;height: 150px;border: 1px dotted #ccc;padding: 5px 9px;font-size: 1.2em;line-height: 1.4em;}
.txt:focus, .txtarea:focus {border-style: solid;border-color: #bababa;color: #444;}
input.error, textarea.error {border-color: #973d3d;border-style: solid;background: #f0bebe;color: #a35959;}
input.error:focus, textarea.error:focus {border-color: #973d3d;color: #a35959;}
#send {color: #dee5f0;display: block;cursor: pointer;padding: 5px 11px;font-size: 1.2em;border: solid 1px #224983;border-radius: 5px;background: #1e4c99;background: -webkit-gradient(linear, left top, left bottom, from(#2f52b7), to(#0e3a7d));background: -webkit-linear-gradient(top, #2f52b7, #0e3a7d);background: -moz-linear-gradient(top, #2f52b7, #0e3a7d);background: -o-linear-gradient(top, #2f52b7, #0e3a7d);background: -ms-linear-gradient(top, #2f52b7, #0e3a7d);background: linear-gradient(top, #2f52b7, #0e3a7d);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2f52b7', endColorstr='#0e3a7d');}
#send:hover {background: #183d80;background: -webkit-gradient(linear, left top, left bottom, from(#284f9d), to(#0c2b6b));background: -webkit-linear-gradient(top, #284f9d, #0c2b6b);background: -moz-linear-gradient(top, #284f9d, #0c2b6b);background: -o-linear-gradient(top, #284f9d, #0c2b6b);background: -ms-linear-gradient(top, #284f9d, #0c2b6b);background: linear-gradient(top, #284f9d, #0c2b6b);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#284f9d', endColorstr='#0c2b6b');}
#send:active {color: #8c9dc0;background: -webkit-gradient(linear, left top, left bottom, from(#0e387d), to(#2f55b7));background: -webkit-linear-gradient(top, #0e387d, #2f55b7);background: -moz-linear-gradient(top, #0e387d, #2f55b7);background: -o-linear-gradient(top, #0e387d, #2f55b7);background: -ms-linear-gradient(top, #0e387d, #2f55b7);background: linear-gradient(top, #0e387d, #2f55b7);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0e387d', endColorstr='#2f55b7');}

改进HTML：

<meta charset="utf-8">
<meta name="description" content=".">
<link href="../css/reset.css" rel="stylesheet">
<link href="../css/style.css" rel="stylesheet">
<script src="../js/scripts.js" /></script>