现在我已经完成了网站的设计，我正在尝试优化 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 & 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>