2017-12-27 543 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,你应该改变它,然后根据需要设置它。