Question

每次我尝试放大或缩小一切都不合适：/，或尝试在谷歌浏览器以外的其他浏览器中打开页面，我尝试搜索互联网但我不明白，我是html和CSS的新手。

这是我的html代码和css代码：

＆＃13;

@charset "utf-8";
.header .bckground {
}
.header {
	height: 70px;
	width: auto;
	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;
	float: none;
	margin-top: 10px;
}
.nav {
	height: 620px;
	width: 250px;
	border-radius: 0;
	border: 4px solid #440E62;
	float: none;
	margin-top: 5px;
}
.nav h3 {
	color: #440E62;
	font-size: 36px;
	margin-bottom: auto;
	text-align: center;
	float: none;
	height: 565px;
	width: 163px;
	margin-top: auto;
	padding-top: auto;
	padding-bottom: auto;
}
.nav h2 {
	color: #440E62;
	font-size: 36pt;
}
.footer {
	width: auto;
	height: 70px;
	padding-top: 5px;
	margin-top: 5px;
	border: 5px none #440E62;
	background-color: #440E62;
	clear: both;
	float: none;
	min-width: 960px;
}
.bodyy h5 {
	float: right;
	clear: left;
}
.bodyy {
	width: 780px;
	height: 618px;
	float: right;
	clear: none;
	margin-top: 5px;
	margin-right: 600px;
}
.nav p {
	color: #440E62;
	font-size: 36px;
	text-align: center;
	width: 160px;
	height: 50px;
	background-size: 160px 70px;
	background-position: center center;
	float: none;
	background-origin: padding-box;
	padding-left: 20px;
	position: static;
	padding-right: 20px;
	clear: none;
	top: auto;
	display: list-item;
	padding-top: 30px;
	padding-bottom: 30px;
	margin-left: 40px;
}
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: none;
	clear: none;
	
}
.bodyy .tagname {
	position: absolute;
	top: 500px;
	left: 1270px;
	color: #440E62;
	font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
	font-weight: bold;
	text-decoration: none;
	
}

＆＃13;

<!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>

＆＃13;

Answer 1

问题显然是你的问题。它是如此硬编码的像素到处都是事物最终分崩离析。即使在我的1366 * 768分辨率的笔记本电脑屏幕上，镀铬也无法在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放在许多以像素为单位的项目上。如果你真的想要widhts，请将其设置为百分比。另外，不要使position: absoulte成为一种习惯。它只会长期受伤。 float属性非常有用，必须在设置后清除。

放大或缩小时我的内容不合适

1 个答案: