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>