网页宽度不一样

abc_hulala · 发表于 15-4-2016 01:27 PM

请教各位前辈，我的两个静态网页使用相同的 CSS 但出来的宽度却不一样
不知道为什么 product page 会比较宽，而 index 只是文字而已，没问题，所以 index 是标准页面

请教我的代码有任何问题吗？谢谢

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TITLE</title>
<style type="text/css">
body {
text-align: center;
background-color: #CCCCCC;
margin: 10px 0;
padding: 0;
}
#container {
background-color: #FFFFFF;
width: 1000px;
margin: 0 auto;
padding: 20px;
text-align: left;
}
#nav {
margin: 15px 0;
border-top: 1px #CCCCCC solid;
border-bottom: 1px #CCCCCC solid;
}
#nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#nav li {
float: left;
}
#nav li a {
display: block;
color: #666666;
font-size: 16px;
font-weight: bold;
text-align: center;
padding: 10px 20px;
text-decoration: none;
}
#nav li a:hover {
color: #333333;
}
#main {
margin: 0;
padding: 10px 70px;
text-align: center;
}
#main p {
text-align: left;
}
.cat ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.cat li a {
float: left;
color: #666666;
text-decoration: none;
width: 146px;
padding: 10px 0;
border: 1px #999999 solid;
}
#main ul img {
display: block;
width: 120px;
height: 140px;
}
.details {
margin-bottom: 30px;
}
.productimg img {
width: auto;
height: 300px;
}
.desc {
text-align: left;
margin-top: 10px;
}
#footer {
text-align: center;
margin-top: 15px;
padding: 5px;
}
#footer p {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<a href=""><img src="logo.png" width="536" height="80" /></a>
</div>
<div id="nav">
<ul>
<li><a href="">HOME</a></li>
<li><a href="">ABOUT</a></li>
<li><a href="">CONTACT</a></li>
</ul>
</div>
<div id="main">
<h2>TITLE</h2>
<p>Content</p>
</div>
<div id="footer">
<p>Copyright © XXX. All right reserved.</p>
</div>
</div>
</body>
</html>

复制代码

product.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TITLE</title>
<link rel="stylesheet" href="style.css">
<style type="text/css">
body {
text-align: center;
background-color: #CCCCCC;
margin: 10px 0;
padding: 0;
}
#container {
background-color: #FFFFFF;
width: 1000px;
margin: 0 auto;
padding: 20px;
text-align: left;
}
#nav {
margin: 15px 0;
border-top: 1px #CCCCCC solid;
border-bottom: 1px #CCCCCC solid;
}
#nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#nav li {
float: left;
}
#nav li a {
display: block;
color: #666666;
font-size: 16px;
font-weight: bold;
text-align: center;
padding: 10px 20px;
text-decoration: none;
}
#nav li a:hover {
color: #333333;
}
#main {
margin: 0;
padding: 10px 70px;
text-align: center;
}
#main p {
text-align: left;
}
.cat ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.cat li a {
float: left;
color: #666666;
text-decoration: none;
width: 146px;
padding: 10px 0;
border: 1px #999999 solid;
}
#main ul img {
display: block;
width: 120px;
height: 140px;
}
.details {
margin-bottom: 30px;
}
.productimg img {
width: auto;
height: 300px;
}
.desc {
text-align: left;
margin-top: 10px;
}
#footer {
text-align: center;
margin-top: 15px;
padding: 5px;
}
#footer p {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<a href=""><img src="logo.png" width="536" height="80" /></a>
</div>
<div id="nav">
<ul>
<li><a href="">HOME</a></li>
<li><a href="">ABOUT</a></li>
<li><a href="">CONTACT</a></li>
</ul>
</div>
<div id="main">
<h2>TITLE</h2>
<div class="details">
<div class="productimg"><img src="xxx.jpg" /></div>
<div class="desc"><p>Description</p></div>
</div>
</div>
<div id="footer">
<p>Copyright © XXX. All right reserved.</p>
</div>
</div>
</body>
</html>

复制代码

rudian92 · 发表于 15-4-2016 02:59 PM

我在上着班，晚上下班后回家帮你一下

internetguy · 发表于 15-4-2016 10:27 PM

print screen 你的问题比较容易明白。谢谢。。。

abc_hulala · 发表于 16-4-2016 03:30 PM

目测大概相差 5-10px 左右

Index

Product

internetguy · 发表于 16-4-2016 06:33 PM

用你的代码，在我这没有问题哦。
是不是你的product image 大了10 px ?

abc_hulala · 发表于 16-4-2016 08:13 PM

internetguy 发表于 16-4-2016 06:33 PM
用你的代码，在我这没有问题哦。
是不是你的product image 大了10 px ?

你好

请问你是复制了放在同一页面吗？可以尝试分开两个文件浏览看看是否有不一样？
我的页面有设置固定大小，应该不会改变才对，而图片也设置了 width=auto，把图片拿掉就变正常了

其实我的图片下面也有加入 table，删除图片剩下 table 也会变宽
图片 table 都拿掉就正常了，很奇怪

internetguy · 发表于 16-4-2016 10:13 PM

abc_hulala 发表于 16-4-2016 08:13 PM
你好

请问你是复制了放在同一页面吗？可以尝试分开两个文件浏览看看是否有不一样？
我的页面有设置固定大小，应该不会改变才对，而图片也设置了 width=auto，把图片拿掉就变正常了

其实我的图片下面也有加入 table，删除图片剩下 table 也会变宽
图片 table 都拿掉就正常了，很奇怪

我看来应该是index file 是没有是 SCROLLING,
而你的 product page 是有scrolling, 页面比较长，
所以你感觉网页宽度不一样。

你可以把你可index 页面弄长一点看看。。。

abc_hulala · 发表于 17-4-2016 01:48 PM

internetguy 发表于 16-4-2016 10:13 PM
我看来应该是index file 是没有是 SCROLLING,
而你的 product page 是有scrolling, 页面比较长，
所以你感觉网页宽度不一样。
你可以把你可index 页面弄长一点看看。。。

一言惊醒梦中人

果然是 scrolling bar 的关系，真丢脸

感谢你

internetguy · 发表于 17-4-2016 02:47 PM

abc_hulala 发表于 17-4-2016 01:48 PM
一言惊醒梦中人
果然是 scrolling bar 的关系，真丢脸

感谢你

大家一起学习和研究研究。。

		自动登录	找回密码
密码			注册

网页宽度不一样

评分

所属分类: 电脑手机

浏览过的版块