不適合給定屏幕寬度的網站

我正在使用Google App Engine開發我的第一個Web應用程序。現在，當核心後端程序正在運行並準備就緒時，我在使用網站的用戶界面方面遇到了一些麻煩。現在，我的網站的寬度超出了我不想要的給定屏幕。不適合給定屏幕寬度的網站

這裏你可以看到網站的真人版：現在

http://deploymentapp.appspot.com/

，該網站仍在開發中，請原諒我的可怕的嘗試在網頁設計現在。

從網站可以看出，整個網站的寬度超出了屏幕寬度。

這裏的HTML代碼：

<html> 
<head> 
<title>Live Quora Feed</title> 
<style type = "text/css"> 
* 
{ 
    margin:0px; 
    padding:0px; 
} 

body 
{ 
    width:100%; 
    background-image: url("http://www.bluelinerny.com/wp-content/uploads/2011/03/quora_illustration_1.jpg"); 
    background-position: top center; 
    background-repeat:no-repeat; 
} 

input.button { 
width:40px; 
position:absolute; 
right:20px; 
bottom:20px; 
background:#09C; 
color:#fff; 
font-family: Tahoma, Geneva, sans-serif; 
height:30px; 
-webkit-border-radius: 15px; 
-moz-border-radius: 15px; 
border-radius: 15px; 
border: 1p solid #999; 
} 
input.button:hover { 
background:#fff; 
color:#09C; 
} 
orm has no structure, no color, and no personality. We can change that with a little bit of code. First, we are going to style the form tag itself. 


form { 
background: -webkit-gradient(linear, bottom, left 175px, from(#CCCCCC), to(#EEEEEE)); 
background: -moz-linear-gradient(bottom, #CCCCCC, #EEEEEE 175px); 
margin:auto; 
position:relative; 
width:550px; 
height:450px; 
font-family: Tahoma, Geneva, sans-serif; 
font-size: 14px; 
font-style: italic; 
line-height: 24px; 
font-weight: bold; 
color: #09C; 
text-decoration: none; 
-webkit-border-radius: 10px; 
-moz-border-radius: 10px; 
border-radius: 10px; 
padding:10px; 
border: 1px solid #999; 
border: inset 1px solid #333; 
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3); 
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3); 
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3); 
} 

input { 
width:375px; 
display:block; 
border: 1px solid #999; 
height: 25px; 
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3); 
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3); 
box-shadow: 0px 0px 8px rgba(0, 0, 0.1, 0.3); 
} 

#form 
{ 
position:relative; 
left:730px; 
top:300px; 
} 
</style> 

</head> 
<body bgcolor = "black"> 
<div id = "form"> 
<form method = "post"> 
<div> 

<label> 
<span>Enter your query</span><input id="name" type="text" name="rssquery" /> 
</label> 
<input type="submit" value="Submit Form" /> 
</div> 
<div class="text"> 
    <p>This is some demonstration text</p> 
    <p>This is some more wonderful text</p> 
    </div> 
</div> 
</form>  
</body> 
</html>

而且，我抄大部分CSS從另一個來源。

如何解決此問題？

來源

2014-01-05 Manas Chaturvedi

你檢查什麼決議，有固定的 – San

你的問題就出在#form。

您的left並不總是適量。

您需要使用％而不是px。

這就是所謂的響應網頁設計。

如果你想讓它不妨礙Quora的標誌，我似乎被改變留給50％

screencapture

來源

2014-01-05 18:20:50

您需要將您的css設置爲響應。
而是在#form使用PX，只需用％這樣的：

#form { 
    margin-top:300px; 

    margin-left:55%; 
}

還有就是具有相同結果的更好的方式。這是浮動右邊的形式，並設置保證金的權利。

#form { 
    float:right; 
    margin-right:15% 

    margin-top:300px; 
}

響應的背後，是更爲那麼這個，如果你想了解更多從這個鏈接開始：http://learn.shayhowe.com/advanced-html-css/responsive-web-design

來源

2014-01-05 18:15:59

不適合給定屏幕寬度的網站

回答

相關問題