所以这里是代码：
HTML：
<!DOCTYPE html>
<html >
<script src="main.js"></script>
<head>
<link rel="shortcut icon" type="image/png" href="images/favicon.png"/>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>בנה את המחשב שלך בצורה אוטומטית!</title>
<meta name="description" content="Build your PC Generator - Israel.">
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="hint.css">
<script>
window.addEventListener("load", function(){
var slider = document.getElementById("slider");
slider.addEventListener("mousemove", function(){
document.getElementById("output").innerHTML = this.value + "₪";
});
});
</script>
</head>
<body >
<div id="welcome"> <div id="welcome-message-box"> <img src="images/logo.png" id="logo"> <h1 dir="rtl" style="text-align:center; color:#fff;font-weight: 100;">ChooseYourPc.com</h1> <p dir="rtl" style="text-align:center; color:#fff; ">
האתר נוצר על מנת לתת מענה למתחילים אשר רוצים לבנות מחשב משל עצמם. המחירים והחלקים מעודכנים באופן קבוע בהתאם למצב הנוכחי, האתר יהפוך את החיים שלכם לקלים יותר על ידי מתן רשימת חלקים שאיתה תוכלו להתחיל ולאחר מכן לשנות לפי הצרכים והעדפות שלכם. <br><br>
האתר פותר את הבעיה הכי קשה שבה אנו נתקלים כאשר בונים מחשב: לדעת אילו חלקים לבחור ולוודא שכל החלקים מתאימים ב-100%. תהנו ממאגר של מפרטי מחשב מומלצים לכל תקציב באשר הוא, כולם מאוזנים היטב ומהווים תמורה טובה למחיר.
</p> <button class="myButtonwhite" id='btnscrl' onclick="smoothScroll(document.getElementById('content'))" style=" margin-left:39%; position: relative; ">!בואו נתחיל</button></div> <div style="cursor: pointer;" class="arrow bounce" onclick="smoothScroll(document.getElementById('content'))"> </div></div>
<div id="content" style=" max-width: 800px; margin-left:auto;margin-right:auto; position:relative;">
<h1 align='center'> !בנה את מחשב הגיימינג שלך</h1>
<div> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- auto ad -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-9838071461609147"
data-ad-slot="2078936312"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></div>
<div style="border-bottom:1px solid #e6e6e6;"></div>
<h2 align='center'> ?כמה תרצה להוציא</h2>
<p dir="rtl" align='center'>
זה מה שישפיע על ביצועי המחשב שלך, מן הסתם.
<br>
</p>
<p align='center' dir="rtl" style="font-style: italic; "> בדיוק כמו שחשוב להמנע מהוצאות יתר על המחשב, חשוב גם לדאוג שהתקציב לא יהיה נמוך מידי בהתאם לדרישותך, שים לב. <br>
תוכל למצוא מבחני ביצועים של כרטיסי המסך המופיעים במפרטים כדי לראות את הביצועים המשוערים של המפרט שקיבלת.
</p>
<input type="range" id="slider" value="2000" onchange="bla()" step='25' min='2000' max="6000"> <div style="margin-left:100%; border: 0px solid #f5f5f5; height: 37px; width: 60px; border-radius: 0px; background: #6b6b6b; cursor: pointer; -webkit-appearance: none; margin-top: -44px; z-index:'9999';"><div id='output' style="text-align: center; color:white;line-height: 37px;;">2000₪</div></div>
<br>
<h2 align='center' dir="rtl"> תרצה לבצע Overclock על המעבד?</h2>
<div style="border-bottom:1px solid #e6e6e6;"></div>
<p dir="rtl" align='center'>
Overclocking הוא התהליך של כוונון רכיבי המחשב כדי לגרום להם לעבוד קשה יותר. לכל רכיב חומרה שנמצא במחשב שלכם יש מהירות שעון המשמשת כברירת מחדל ובמהירות זו יוצא הרכיב מהמפעל. Overclocking הוא התהליך של הגדלת מהירות השעון של הרכיב מעבר למהירות ברירת המחדל.
<br>
</p>
<p align='center' dir="rtl" style="font-style: italic; "> אל תחשבו שזה הכרחי, לפעמים ניתן לקבל מחשב טוב יותר עבור הכסף שאותו תצטרכו לבזבז על מנת להתאים את המחשב שלכם לOverclocking. תבחרו את האופציה הזאת אך ורק אם אתם יודעים מה אתם עושים ואתם נלהבים מהנושא.
</p>
<div id="choices">
<button class="hint--bottom" data-hint="בקרוב ..." dir="rtl" id='ChoiceButton' >אני לא מעוניין </button>
<button class="hint--bottom" data-hint="בקרוב ..." id='ChoiceButton' dir="rtl">אולי בעתיד</button>
<button class="hint--bottom" data-hint="בקרוב ..." id='ChoiceButton' dir="rtl">אני מעוניין לעשות Overclock</button>
</div>
<h2 align='center' dir="rtl" id="moreoptions">אפשרויות נוספות</h2>
<div style="border-bottom:1px solid #e6e6e6;"></div>
<p dir="rtl" align='center'>
כאן אתם יכולים להתאים אישית מספר דברים נוספים כמו האם להוסיף Windows אם אתם צריכים מערכת הפעלה, או האם לכלול כונן אופטי.
<br>
</p>
<p align='center' dir="rtl" style="font-style: italic; "> שימו לב שכמובן שככל שתבחרו ביותר אופציות כך גם התקציב שילך על המחשב עצמו ירד, ומן הסתם הביצועים לא יהיו זהים.
</p>
<div id="choices2">
<button id='windowsAdd' dir="rtl" value="0" onclick="btnColor(this, 'rgb(107,107,107)');bla()" >הוספת Windows</button>
<button id='dvdburner' dir="rtl" value="0" onclick="btnColor(this, 'rgb(107,107,107)');bla()">הוספת צורב</button>
</div>
<br>
<div class="alert" id="alert" role="alert"></div>
<div style="border-bottom:1px solid #e6e6e6; margin-bottom:20px;"></div>
<div style="text-align:center;margin:auto;">
<button class="myButton" id='btn' onclick="show()" style=" position: relative;">בנה מחשב</button> </div>
<div id = "myDiv" align='center' style="display:none; margin"><img id = "myImage" src = "images/loading.gif"></div>
<br><br><br><br><br><br><br><br><br><br><br>
<p align="middle"> עדכון נתונים אחרון: 15/04/2016</p>
</div>
<div id="footer"> <p id="rights">כל הזכויות שמורות © 2016 BuildYourPc </p> <p id="creator">נוצר על-ידי א י ת י </p></div>
</body>
</html>
<!--
[[[[[[[[[[[[[[[ ]]]]]]]]]]]]]]]
[:::::::::::::: ::::::::::::::]
[:::::::::::::: ::::::::::::::]
[::::::[[[[[[[: :]]]]]]]::::::]
[:::::[ ]:::::]
[:::::[ ]:::::]
[:::::[ ]:::::]
[:::::[ ]:::::]
[:::::[ CODE THE WEB ]:::::]
[:::::[ http://brackets.io ]:::::]
[:::::[ ]:::::]
[:::::[ ]:::::]
[:::::[ ]:::::]
[:::::[ ]:::::]
[::::::[[[[[[[: :]]]]]]]::::::]
[:::::::::::::: ::::::::::::::]
[:::::::::::::: ::::::::::::::]
[[[[[[[[[[[[[[[ ]]]]]]]]]]]]]]]
-->
CSS：
html {
background-color: #fff;
-webkit-font-smoothing: antialiased;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
box-sizing: border-box;
overflow: scroll;
overflow-x: hidden;
}
@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Firefox < 16 */
@-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Internet Explorer */
@-ms-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Opera < 12.1 */
@-o-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
*,
*:before,
*:after {
box-sizing: inherit;
}
::-webkit-scrollbar {
width: 0px; /* remove scrollbar space */
background: transparent; /* optional: just make scrollbar invisible */
}
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 1.5em;
color: #545454;
position: relative;
margin: 0;
padding-bottom: 6rem;
min-height: 100%;
font-family: "Helvetica Neue", Arial, sans-serif;
}
#footer{
max-height: 0%;
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1.5rem;
color: white;
background-color: #333333;
text-align: center;
}
#rights{
position: inherit;
bottom: -6px;
right: 0;
left: 0;
direction: rtl;
}
#creator{
position: inherit;
bottom: -2px;
font-size: 12px;
right: 10px;
direction: rtl;
}
#bottom{
direction: rtl;
word-wrap: break-word;
width: 350px;
}
#startingimage{
background: url("http://cwsmgmt.corsair.com/media/Blogs/how-to-build-a-pc/Motherboard-Selection/mobo.jpg");
background-size: cover;
background-position: center center;
text-align: center;
}
#welcome-message-box{
-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 2s; /* Firefox < 16 */
-ms-animation: fadein 2s; /* Internet Explorer */
-o-animation: fadein 2s; /* Opera < 12.1 */
animation: fadein 2s;
max-width: 600px;
margin-left: auto;
margin-right: auto;
padding: 20px;
border-radius: 10px;
background: rgba(0,0,0,.7);
display: block;
z-index: 2;
}
#welcome {
top: 0; right: 0; bottom: 0; left: 0;
height: 100vh;
width: 100%;
background: url("http://i.imgur.com/fmKShVl.jpg");
background-size: cover;
background-position: center center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: white;
background-attachment: fixed;
position: relative;
}
table a:link {
color: #666;
font-weight: bold;
text-decoration:none;
}
table a:visited {
color: #999999;
font-weight:bold;
text-decoration:none;
}
table a:active,
table a:hover {
color: #bd5a35;
text-decoration:underline;
}
table {
font-family:Arial, Helvetica, sans-serif;
color:#666;
font-size:12px;
text-shadow: 1px 1px 0px #fff;
background:#eaebec;
margin:0px;
border:#eaebec 1px solid;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
/*
-moz-box-shadow: 0 1px 2px #d1d1d1;
-webkit-box-shadow: 0 1px 2px #d1d1d1;
box-shadow: 0 1px 2px #d1d1d1;
*/
}
table span{ text-shadow: 0px 0px 0px 0px #000;}
table th {
padding:21px 25px 22px 25px;
border-top:1px solid #fafafa;
border-bottom:1px solid #e0e0e0;
background: #fafafa;
}
table th:first-child{
text-align: center;
padding-left:20px;
}
table tr:first-child th:first-child{
-moz-border-radius-topleft:3px;
-webkit-border-top-left-radius:3px;
border-top-left-radius:3px;
}
table tr:first-child th:last-child{
-moz-border-radius-topright:3px;
-webkit-border-top-right-radius:3px;
border-top-right-radius:3px;
}
table tr{
text-align: right;
padding-left:20px;
}
table tr td:first-child{
text-align: center;
padding-left:20px;
border-left: 0;
}
table tr td {
padding:18px;
border-top: 1px solid #ffffff;
border-bottom:1px solid #e0e0e0;
border-left: 1px solid #e0e0e0;
background: #fafafa;
}
table tr.even td{
background: #fafafa;
}
table tr:last-child td{
border-bottom:0;
}
table tr:last-child td:first-child{
-moz-border-radius-bottomleft:3px;
-webkit-border-bottom-left-radius:3px;
border-bottom-left-radius:3px;
}
table tr:last-child td:last-child{
-moz-border-radius-bottomright:3px;
-webkit-border-bottom-right-radius:3px;
border-bottom-right-radius:3px;
}
table tr:hover td{
background: #f2f2f2;
cursor: pointer;
}
#spanInfo{
max-width: 310px;
margin-right:22px;
font-weight: lighter;
font-weight:normal;
text-align: right;
direction: rtl;}
.myButton {
background-color:#6b6b6b;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
border:1px solid #6b6b6b;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:13px;
padding: 10px 90px;
text-decoration:none;
}
.myButton:hover {
background-color:#3d3d3d;
}
.myButtonwhite {
background-color:#ffffff;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:10px;
border:1px solid #ffffff;
display:inline-block;
cursor:pointer;
color:#333;
font-family:Arial;
font-size:17px;
padding: 13px 20px;
}
.myButtonwhite:hover {
background-color:#333;
color: white;
border:1px solid #333;
}
/*
.myButton:active {
position:relative;
top:1px;
}
*/
input[type=range] {
-webkit-appearance: none;
width: 100%;
margin: -0.5px 0;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 37px;
cursor: pointer;
-webkit-box-shadow: inset 0px 1px 2px 1px rgba(0,0,0,0.1);
-moz-box-shadow: inset 0px 1px 2px 1px rgba(0,0,0,0.1);
box-shadow: inset 0px 1px 2px 1px rgba(0,0,0,0.1);
background: #f5f5f5;
border-radius: 0px;
border: 0px solid #010101;
}
input[type=range]::-webkit-slider-thumb {
/* box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;*/
border: 0px solid #f5f5f5;
height: 37px;
width: 15px;
border-radius: 0px;
background: #6b6b6b;
cursor: pointer;
-webkit-appearance: none;
margin-top: 0px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #f5f5f5;
}
input[type=range]::-moz-range-track {
width: 100%;
height: 37px;
cursor: pointer;
/* box-shadow: 0.2px 0.2px 0px #000000, 0px 0px 0.2px #0d0d0d;*/
background: #f5f5f5;
border-radius: 0px;
border: 0px solid #010101;
}
input[type=range]::-moz-range-thumb {
/* box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;*/
border: 0px solid #f5f5f5;
height: 36px;
width: 15px;
border-radius: 0px;
background: #6b6b6b;
cursor: pointer;
}
input[type=range]::-ms-track {
width: 100%;
height: 37px;
cursor: pointer;
background: transparent;
border-color: transparent;html {
background-color: #e6e9e9;
background-image: -webkit-linear-gradient(270deg,rgb(230,233,233) 0%,rgb(216,221,221) 100%);
background-image: linear-gradient(270deg,rgb(230,233,233) 0%,rgb(216,221,221) 100%);
-webkit-font-smoothing: antialiased;
}
body {
margin: 0 auto;
padding: 2em 2em 4em;
max-width: 800px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 1.5em;
color: #545454;
}
/*
h1, h2, h3, h4, h5, h6 {
color: #222;
font-weight: 600;
line-height: 1.3em;
}
h2 {
margin-top: 1.3em;
}
a {
color: #0083e8;
}
b, strong {
font-weight: 600;
}
samp {
display: none;
}
img {
-webkit-animation: colorize 2s cubic-bezier(0, 0, .78, .36) 1;
animation: colorize 2s cubic-bezier(0, 0, .78, .36) 1;
background: transparent;
border: 10px solid rgba(0, 0, 0, 0.12);
border-radius: 4px;
display: block;
margin: 1.3em auto;
max-width: 95%;
}
@-webkit-keyframes colorize {
0% {
-webkit-filter: grayscale(100%);
}
100% {
-webkit-filter: grayscale(0%);
}
}
@keyframes colorize {
0% {
filter: grayscale(100%);
}
100% {
filter: grayscale(0%);
}
}
*/
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #e8e8e8;
border: 0px solid #010101;
border-radius: 0px;
/* box-shadow: 0.2px 0.2px 0px #000000, 0px 0px 0.2px #0d0d0d;*/
}
input[type=range]::-ms-fill-upper {
background: #f5f5f5;
border: 0px solid #010101;
border-radius: 0px;
/* box-shadow: 0.2px 0.2px 0px #000000, 0px 0px 0.2px #0d0d0d;*/
}
input[type=range]::-ms-thumb {
/* box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;*/
border: 0px solid #f5f5f5;
width: 15px;
border-radius: 0px;
background: #6b6b6b;
cursor: pointer;
height: 36px;
}
input[type=range]:focus::-ms-fill-lower {
background: #f5f5f5;
}
input[type=range]:focus::-ms-fill-upper {
background: #ffffff;
}
}
span {display: none;position: absolute; font-weight: normal;}
a span {display: none; position: relative; color: #000; background: #fff; width: 350px; height: auto;font-weight: normal;}
a {position: relative;font-weight: normal;}
a:hover span {position:absolute;bottom:-70; display: block;z-index: 9999; -webkit-box-shadow: 0px 5px 14px -1px rgba(0,0,0,0.25); -moz-box-shadow: 0px 5px 14px -1px rgba(0,0,0,0.25); box-shadow: 0px 5px 14px -1px rgba(0,0,0,0.25); display: block;text-align:center;font-weight: normal; right:0; }
a:hover span:after{
content: "";
position: absolute;
width: 0;
height: 0;
margin-left: -0.5em;
top:0.5%;
right: 5%;
box-sizing: border-box;
border: 7px solid black;
border-color: transparent transparent #ffffff #ffffff;
transform-origin: 0 0;
transform: rotate(135deg);
-webkit-box-shadow: -3px 3px 5px 0 rgba(0, 0, 0, 0.08);
-moz-box-shadow: -3px 3px 5px 0 rgba(0, 0, 0, 0.08);
box-shadow: -3px 3px 5px 0 rgba(0, 0, 0, 0.08);
}
@-moz-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-moz-transform: translateY(0);
transform: translateY(0);
}
40% {
-moz-transform: translateY(-30px);
transform: translateY(-30px);
}
60% {
-moz-transform: translateY(-15px);
transform: translateY(-15px);
}
}
@-webkit-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
60% {
-webkit-transform: translateY(-15px);
transform: translateY(-15px);
}
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-webkit-transform: translateY(0);
transform: translateY(0);
}
40% {
-moz-transform: translateY(-30px);
-ms-transform: translateY(-30px);
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
60% {
-moz-transform: translateY(-15px);
-ms-transform: translateY(-15px);
-webkit-transform: translateY(-15px);
transform: translateY(-15px);
}
}
.arrow {
position: absolute;
bottom: 0;
right: 49.25%;
width: 35px;
height: 35px;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yOTMuNzUxLDQ1NS44NjhjLTIwLjE4MSwyMC4xNzktNTMuMTY1LDE5LjkxMy03My42NzMtMC41OTVsMCwwYy0yMC41MDgtMjAuNTA4LTIwLjc3My01My40OTMtMC41OTQtNzMuNjcyICBsMTg5Ljk5OS0xOTBjMjAuMTc4LTIwLjE3OCw1My4xNjQtMTkuOTEzLDczLjY3MiwwLjU5NWwwLDBjMjAuNTA4LDIwLjUwOSwyMC43NzIsNTMuNDkyLDAuNTk1LDczLjY3MUwyOTMuNzUxLDQ1NS44Njh6Ii8+DQo8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMjIwLjI0OSw0NTUuODY4YzIwLjE4LDIwLjE3OSw1My4xNjQsMTkuOTEzLDczLjY3Mi0wLjU5NWwwLDBjMjAuNTA5LTIwLjUwOCwyMC43NzQtNTMuNDkzLDAuNTk2LTczLjY3MiAgbC0xOTAtMTkwYy0yMC4xNzgtMjAuMTc4LTUzLjE2NC0xOS45MTMtNzMuNjcxLDAuNTk1bDAsMGMtMjAuNTA4LDIwLjUwOS0yMC43NzIsNTMuNDkyLTAuNTk1LDczLjY3MUwyMjAuMjQ5LDQ1NS44Njh6Ii8+DQo8L3N2Zz4=);
background-size: contain;
}
.bounce {
-moz-animation: bounce 3s infinite;
-webkit-animation: bounce 3s infinite;
animation: bounce 3s infinite;
}
#choices{
max-width: 800px ;
position: relative;
text-align:center;margin:auto;
}
#choices2{
max-width: 800px ;
position: relative;
text-align:center;margin:auto;
}
#ChoiceButton {
background-color:#6b6b6b;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
border:1px solid #6b6b6b;
display:inline-block;
cursor:pointer;
color:#A2A2A2;
font-family:Arial;
font-size:13px;
padding: 10px 20px;
text-decoration:none;
}
#windowsAdd {
background-color:#6b6b6b;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
border:1px solid #6b6b6b;
display:inline-block;
cursor:pointer;
color:white;
font-family:Arial;
font-size:13px;
padding: 10px 20px;
text-decoration:none;
}
#dvdburner {
background-color:#6b6b6b;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
border:1px solid #6b6b6b;
display:inline-block;
cursor:pointer;
color:white;
font-family:Arial;
font-size:13px;
padding: 10px 20px;
text-decoration:none;
}
#dvdburner:hover{
background-color:#3d3d3d;
}
#windowsAdd:hover{
background-color:#3d3d3d;
}
#ChoiceButton:hover {
background-color:#3d3d3d;
}
button:focus {outline:0 !important;}
#popup{
background:#F8F8F8;
border: 5px solid #DFDFDF;
color: #717171;
font-size: 13px;
height: 30px;
letter-spacing: 1px;
line-height: 30px;
position: relative;
text-align: center;
text-transform: uppercase;
top: -80px;
left:-30px;
display:none;
}
#popup:after{
content:'';
position:absolute;
bottom:-10px;
z-index: 5;
border-bottom:5px solid #dfdfdf;
border-right:5px solid #dfdfdf;
background:#f8f8f8;
left:50%;
margin-left:-10px;
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
}
#btn1:hover #popup{
display:block;
}
#logo{
display: block;
margin-left: auto;
margin-right: auto;
}
.alert{
background-color:
rgb(252, 248, 227);
border-bottom-color:
rgb(138, 109, 59);
border-bottom-left-radius:
4px;
border-bottom-right-radius:
4px;
border-bottom-style:
none;
border-bottom-width:
0px;
border-image-outset:
0px;
border-image-repeat:
stretch;
border-image-slice:
100%;
border-image-source:
none;
border-image-width:
1;
border-left-color:
rgb(138, 109, 59);
border-left-style:
none;
border-left-width:
0px;
border-right-color:
rgb(138, 109, 59);
border-right-style:
none;
border-right-width:
0px;
border-top-color:
rgb(138, 109, 59);
border-top-left-radius:
4px;
border-top-right-radius:
4px;
border-top-style:
none;
border-top-width:
0px;
box-sizing:
border-box;
color:
rgb(138, 109, 59);
display:
block;
font-family:
'Source Sans Pro', Calibri, Candara, Arial, sans-serif;
font-size:
15px;
height:
51px;
line-height:
21.4286px;
margin-bottom:
20px;
padding-bottom:
15px;
padding-left:
15px;
padding-right:
15px;
padding-top:
15px;
text-align:
center;
text-shadow:
none;
width: 800px;
position: relative;
left:0;
right:0;
margin-bottom: -20px;
margin-top: -5px;
height: auto;
display: none;
border:1px solid #F7E5C6;
direction: rtl;
}
iOS 8 CLLocationManagerDelegate methods are never called
如果从chrome输入此jsfiddle，滑块旁边的灰色div将与滑块处于同一高度。但是如果你从Firefox进入，div的位置会略高一些。我真的不知道造成这个问题的原因，谢谢你的帮助！
答案 0 :(得分：0)
每当尝试设计样式时，我总是建议尝试使用％标记而不是像素，因为不同的设备或浏览器可以以不同的方式显示内容;
<div id="content" style=" max-width: 800px; margin-left:auto;margin-right:auto; position:relative;">
更改为
<div id="content" style=" max-width: 50%; margin-left:auto;margin-right:auto; position:relative;">
如果你想要一个空白区域，只需创建另一个允许的空格。
希望有所帮助。