2017-12-27 539 views
-2

我已經開始學習CSS和HTML,因此我對這些語言很陌生。我已經學會了零件如何工作,例如元數據屬性"width=device-width,height=device-height,initial-scale=1",它允許根據設備調整屏幕大小。如何讓我的網站縮小像這個網站?

然後我開始在我的網站的工作,但是我對面,我需要幫助的問題就來了:

的問題是,我試圖把我的網頁內容到一個div,然後試圖通過樣式它所以效果會像這樣的網站:https://www.merlincycles.com/2

然而,當我這樣做,並縮小網頁的內容(標題,標誌,表格等)也移動到邊緣但是我想要做的是創建一個類似於提供的網站的效果,以便當用戶縮小網站變小,但內容保持不變。請嘗試縮小提供的網站以瞭解想法。

* { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
body { 
 
    background-color: #f0f0f0; 
 
    font: 100%/160% verdana, arial, helvetica, sans-serif; 
 
    padding: 0em 0em 0em; 
 
} 
 

 
#container { 
 
    padding-right: 10em; 
 
    padding-left: 10em; 
 
} 
 

 
#header { 
 
    padding: 0.75em 1em; 
 
    background-color: black; 
 
    text-align: center; 
 
    color: #fff; 
 
} 
 

 
#header a { 
 
    float: left; 
 
    color: #fff; 
 
    text-decoration: none; 
 
} 
 

 
#header a:hover { 
 
    color: #fcab15; 
 
} 
 

 
#header div:first-of-type { 
 
    float: right; 
 
} 
 

 
#header div:last-of-type { 
 
    display: inline-block; 
 
} 
 

 
#header div:last-of-type span { 
 
    margin-left: 0.5em; 
 
    color: #fcab15; 
 
} 
 

 
#form-container { 
 
    padding: 0.75em 1em 3em; 
 
    background-color: #065671; 
 
    text-align: center; 
 
} 
 

 
#form-container img { 
 
    float: left; 
 
    margin-top: -0.75em; 
 
    position: relative; 
 
} 
 

 
#form-container form { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    margin-top: 2em; 
 
    margin-right: 20em; 
 
} 
 

 
#form-container form input[type="text"] { 
 
    line-height: 2.5em; 
 
    font-size: 1em; 
 
} 
 

 
#form-container form input[type="submit"] { 
 
    /*Controls submit box*/ 
 
    border-color: #008000; 
 
    border-style: outset; 
 
    background-color: #008000; 
 
    line-height: 2.5em; 
 
    font-size: 1em; 
 
} 
 

 
@media (max-width:50em) { 
 
    #header a, 
 
    #header div:first-of-type, 
 
    #header div:last-of-type { 
 
    float: none; 
 
    display: block; 
 
    } 
 
} 
 

 
@media (max-width:30.5em) { 
 
    #form-container img { 
 
    display: block; 
 
    margin: none; 
 
    } 
 
    #form-container label { 
 
    display: block; 
 
    margin: 0.5em 0; 
 
    } 
 
} 
 

 
@media (min-width:90.5em) { 
 
    #header a, 
 
    #header div:first-of-type, 
 
    #header div:last-of-type { 
 
    float: none; 
 
    display: block; 
 
    } 
 
}
<div id="container"> 
 
    <div id="header"> 
 
    <a href="index.html"> Sign in/Register</a> 
 
    <div>Need Help? : 02080207651</div> 
 
    <div>FREE International shipping on<span>Selected Items</span></div> 
 
    <!-- #header --> 
 
    </div> 
 
    <div id="form-container"> 
 
    <img src="image/logo.png" alt="logo"> 
 
    <form action="#"> 
 
     <input type="text" id="textbox" name="textbox" required placeholder="Search 
 
    Bike King..."> 
 
     <input type="submit" value="Search"> 
 
    </form> 
 
    <!-- #form-container --> 
 
    </div> 
 
</div>

+0

你在問怎麼做_響應式網頁設計_這是一個太寬泛的話題來解決這裏。我還假設你什麼時候說「縮放」_你實際上是指_「調整瀏覽器窗口大小。」_ – hungerstar

回答

0

據我所知,你不希望與頁面一起縮放內容。如果我是正確的,而不是這樣的:

#container { 
    padding-right: 10em; 
    padding-left: 10em; 
} 

編輯它看起來像這樣:

#container { 
    width: 980px; 
    margin: 0 auto; 
} 

* { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
body { 
 
    background-color: #f0f0f0; 
 
    font: 100%/160% verdana, arial, helvetica, sans-serif; 
 
    padding: 0em 0em 0em; 
 
} 
 

 
#container { 
 
    width:980px; 
 
    margin: 0 auto; 
 
} 
 

 
#header { 
 
    padding: 0.75em 1em; 
 
    background-color: black; 
 
    text-align: center; 
 
    color: #fff; 
 
} 
 

 
#header a { 
 
    float: left; 
 
    color: #fff; 
 
    text-decoration: none; 
 
} 
 

 
#header a:hover { 
 
    color: #fcab15; 
 
} 
 

 
#header div:first-of-type { 
 
    float: right; 
 
} 
 

 
#header div:last-of-type { 
 
    display: inline-block; 
 
} 
 

 
#header div:last-of-type span { 
 
    margin-left: 0.5em; 
 
    color: #fcab15; 
 
} 
 

 
#form-container { 
 
    padding: 0.75em 1em 3em; 
 
    background-color: #065671; 
 
    text-align: center; 
 
} 
 

 
#form-container img { 
 
    float: left; 
 
    margin-top: -0.75em; 
 
    position: relative; 
 
} 
 

 
#form-container form { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    margin-top: 2em; 
 
    margin-right: 20em; 
 
} 
 

 
#form-container form input[type="text"] { 
 
    line-height: 2.5em; 
 
    font-size: 1em; 
 
} 
 

 
#form-container form input[type="submit"] { 
 
    /*Controls submit box*/ 
 
    border-color: #008000; 
 
    border-style: outset; 
 
    background-color: #008000; 
 
    line-height: 2.5em; 
 
    font-size: 1em; 
 
} 
 

 
@media (max-width:50em) { 
 
    #header a, 
 
    #header div:first-of-type, 
 
    #header div:last-of-type { 
 
    float: none; 
 
    display: block; 
 
    } 
 
} 
 

 
@media (max-width:30.5em) { 
 
    #form-container img { 
 
    display: block; 
 
    margin: none; 
 
    } 
 
    #form-container label { 
 
    display: block; 
 
    margin: 0.5em 0; 
 
    } 
 
} 
 

 
@media (min-width:90.5em) { 
 
    #header a, 
 
    #header div:first-of-type, 
 
    #header div:last-of-type { 
 
    float: none; 
 
    display: block; 
 
    } 
 
}
<div id="container"> 
 
    <div id="header"> 
 
    <a href="index.html"> Sign in/Register</a> 
 
    <div>Need Help? : 02080207651</div> 
 
    <div>FREE International shipping on<span>Selected Items</span></div> 
 
    <!-- #header --> 
 
    </div> 
 
    <div id="form-container"> 
 
    <img src="image/logo.png" alt="logo"> 
 
    <form action="#"> 
 
     <input type="text" id="textbox" name="textbox" required placeholder="Search 
 
    Bike King..."> 
 
     <input type="submit" value="Search"> 
 
    </form> 
 
    <!-- #form-container --> 
 
    </div> 
 
</div>

當然,你可以改變的寬度。我只將這個例子設置爲980px,你應該改變它,然後根據需要設置它。