不适合给定屏幕宽度的网站

我正在使用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

不适合给定屏幕宽度的网站

回答

相关问题