2014-11-23 42 views
0

每次我尝试放大或缩小所有不合适的位置:/或尝试在另一个浏览器中打开网页,而不是Chrome浏览器时,我尝试搜索互联网,但是我没有理解和我是新的HTML和CSS。我的内容在放大或缩小时不合适

这里是我的html代码和CSS代码:

@charset "utf-8"; 
 
.header .bckground { 
 
} 
 
.header { 
 
\t height: 70px; 
 
\t width: auto; 
 
\t background-color: #440e62; 
 
\t min-width: 960px; 
 
} 
 
.header h1 { 
 
\t color: #FFFFFF; 
 
\t text-align: center; 
 
\t font-size: 30pt; 
 
\t padding-bottom: 10px; 
 
\t padding-top: 7px; 
 
\t font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif; 
 
\t margin-bottom: 5px; 
 
\t float: none; 
 
\t margin-top: 10px; 
 
} 
 
.nav { 
 
\t height: 620px; 
 
\t width: 250px; 
 
\t border-radius: 0; 
 
\t border: 4px solid #440E62; 
 
\t float: none; 
 
\t margin-top: 5px; 
 
} 
 
.nav h3 { 
 
\t color: #440E62; 
 
\t font-size: 36px; 
 
\t margin-bottom: auto; 
 
\t text-align: center; 
 
\t float: none; 
 
\t height: 565px; 
 
\t width: 163px; 
 
\t margin-top: auto; 
 
\t padding-top: auto; 
 
\t padding-bottom: auto; 
 
} 
 
.nav h2 { 
 
\t color: #440E62; 
 
\t font-size: 36pt; 
 
} 
 
.footer { 
 
\t width: auto; 
 
\t height: 70px; 
 
\t padding-top: 5px; 
 
\t margin-top: 5px; 
 
\t border: 5px none #440E62; 
 
\t background-color: #440E62; 
 
\t clear: both; 
 
\t float: none; 
 
\t min-width: 960px; 
 
} 
 
.bodyy h5 { 
 
\t float: right; 
 
\t clear: left; 
 
} 
 
.bodyy { 
 
\t width: 780px; 
 
\t height: 618px; 
 
\t float: right; 
 
\t clear: none; 
 
\t margin-top: 5px; 
 
\t margin-right: 600px; 
 
} 
 
.nav p { 
 
\t color: #440E62; 
 
\t font-size: 36px; 
 
\t text-align: center; 
 
\t width: 160px; 
 
\t height: 50px; 
 
\t background-size: 160px 70px; 
 
\t background-position: center center; 
 
\t float: none; 
 
\t background-origin: padding-box; 
 
\t padding-left: 20px; 
 
\t position: static; 
 
\t padding-right: 20px; 
 
\t clear: none; 
 
\t top: auto; 
 
\t display: list-item; 
 
\t padding-top: 30px; 
 
\t padding-bottom: 30px; 
 
\t margin-left: 40px; 
 
} 
 
body { 
 
\t min-height: 100px; 
 
} 
 
.bodyy p { 
 
\t font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif; 
 
\t font-size: 24px; 
 
\t text-align: left; 
 
\t font-style: normal; 
 
\t font-weight: lighter; 
 
} 
 
.bodyy img { 
 
\t float: none; 
 
\t clear: none; 
 
\t 
 
} 
 
.bodyy .tagname { 
 
\t position: absolute; 
 
\t top: 500px; 
 
\t left: 1270px; 
 
\t color: #440E62; 
 
\t font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif; 
 
\t font-weight: bold; 
 
\t text-decoration: none; 
 
\t 
 
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
 
<html> 
 
<head> 
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
 
<title>Untitled Document</title> 
 
<link href="p.css" rel="stylesheet" type="text/css"> 
 
</head> 
 

 
<body> 
 
<div> 
 
<div class="header"> 
 
    <h1 align="justify">Pirates Asu</h1> 
 
</div> 
 
<div class="bodyy"> 
 
<h1>IT committee</h1> 
 
<p>The IT committe is the strongest committee in pirates ASU , they have the best members and they are going to rock this year</p> 
 
<img STYLE="position:absolute; TOP:100px; LEFT:1200px; WIDTH:400px; HEIGHT:400px" src="10603764_10203982859144113_8753444382621391138_n.jpg" width="480" height="480" alt=""/> 
 
<p class="tagname">IT Head : Kareem Ahmad</p> 
 
</div> 
 

 
<div class="nav"> 
 
    <p>Home</p> 
 
    <p>Commitees</p> 
 
    <p>About us</p> 
 
    <p>Timeline</p> 
 
</div> 
 
<div class="footer"> 
 
</div> 
 
</div> 
 
</body> 
 
</html>

回答

0

的问题显然是你的CSS。它是如此硬编码的像素,无处不在,事情最终分崩离析。 即使在我的笔记本电脑屏幕上,分辨率为1366 * 768,Chrome也无法在100%变焦时正常打开。我不得不缩小到75%才能看到它。

PS:最终会发布一些CSS编辑


HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>Untitled Document</title> 
<link href="p.css" rel="stylesheet" type="text/css"> 
</head> 

<body> 
    <div> 

     <div class="header"> 
      <h1 align="justify">Pirates Asu</h1> 
     </div> 

     <div class="nav"> 
      <p>Home</p> 
      <p>Commitees</p> 
      <p>About us</p> 
      <p>Timeline</p> 
     </div> 

     <div class="bodyy"> 
      <h1>IT committee</h1> 
      <p>The IT committe is the strongest committee in pirates ASU , they have the best members and they are going to rock this year</p> 
      <img STYLE="" src="10603764_10203982859144113_8753444382621391138_n.jpg" width="480" height="480" alt=""/> 
      <p class="tagname">IT Head : Kareem Ahmad</p> 
     </div> 

     <p style="clear: both;"></p> 

     <div class="footer"> 
     </div> 
    </div> 
</body> 
</html> 


CSS

@charset "utf-8"; 
.header .bckground { 
} 
*{margin: 0;padding: 0;} 

.header { 
    height: 70px; 
    background-color: #440e62; 
    min-width: 960px; 
} 
.header h1 { 
    color: #FFFFFF; 
    text-align: center; 
    font-size: 30pt; 
    padding-bottom: 10px; 
    padding-top: 7px; 
    font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif; 
    margin-bottom: 5px; 
    margin-top: 10px; 
} 
.nav { 
    height: 100%; 
    border: 4px solid #440E62; 
    float: left; 
} 
.nav h3 { 
    color: #440E62; 
    font-size: 36px; 
    text-align: center; 
} 
.nav h2 { 
    color: #440E62; 
    font-size: 36pt; 
} 
.footer { 
    height: 70px; 
    border: 5px none #440E62; 
    background-color: #440E62; 
    min-width: 960px; 
} 
.bodyy h5 { 
} 
.bodyy { 
    margin-top: 5px; 
} 
.nav p { 
    background-origin: padding-box; 
    background-position: center center; 
    background-size: 160px 70px; 
    color: #440E62; 
    display: list-item; 
    font-size: 36px; 
    height: 50px; 
    margin-left: 40px; 
    padding-bottom: 30px; 
    padding-left: 20px; 
    padding-right: 20px; 
    padding-top: 30px; 
    position: static; 
    text-align: center; 
    top: auto; 
    width: 160px; 
} 
body { 
    min-height: 100px; 
} 
.bodyy p { 
    font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif; 
    font-size: 24px; 
    text-align: left; 
    font-style: normal; 
    font-weight: lighter; 
} 
.bodyy img { 
    float: right; 
} 
.bodyy .tagname { 
    float:right; 
    color: #440E62; 
    font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif; 
    font-weight: bold; 
    text-decoration: none; 
} 


虽然这仍然不是很好,但它仍然解决了这个问题。问题在于,您已将 width放置在像素中的许多项目上。如果你真的想要widget,请将它设置为百分比。另外,不要让 position: absoulte成为一种常见习惯。它只会长期受伤。 float属性非常有用,必须在设置后清除。

相关问题