网页美工设计入门详解 > 第三节网页制作流程

登录

老师：为什么我做的 DW拆分显示正常 F12的时候就乱了呢

yuanxi52028 · 发表于 2015-9-14 10:52:13

这个应该是兼容问题引起的，DW与浏览器本身也是有区别的，最终要以浏览器浏览的效果为准。

在有些情况DW所显的宽高与浏览器的不一样就会引起页面会不一样。float浮动差一个像素都会引起页面变形的。

建议你能把页面的所有代码贴出来看看，好找找具体原因。

rui0326 · 发表于 2015-9-14 11:27:36

yuanxi52028 发表于 2015-9-14 10:52
这个应该是兼容问题引起的，DW与浏览器本身也是有区别的，最终要以浏览器浏览的效果为准。

在有些情况DW所 ...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
body {
font-family: Verdana, Geneva, sans-serif;
margin-top: 0px;
margin-right: auto;
margin-bottom: auto;
margin-left: 0px;
}
#box-1 {
float: left;
height: 55px;
width: 914px;
}
#box-2 {
float: left;
height: 59px;
width: 914px;
}
#box-3 {
float: left;
height: 100px;
width: 914px;
}
#box-4 {
float: left;
height: 748px;
width: 174px;
}
#box-5 {
float: left;
height: 317px;
width: 234px;
}
#box-6 {
float: left;
height: 317px;
width: 506px;
}
#box-7 {
float: left;
height: 431px;
width: 740px;
}

}
#box-8 {
float: left;
height: 414px;
width: 174px;
}
#box-9 {
}
#box-9 {
float: left;
height: 414px;
width: 740px;
}
#box-11 {
float: left;
height: 590px;
width: 174px;
}
#box-13 {
float: left;
height: 590px;
width: 740px;
}
#box-14 {
float: left;
height: 127px;
width: 914px;
}
#box-15 {
float: left;
height: 265px;
width: 914px;
}
#box-16 {
float: left;
height: 119px;
width: 914px;
}
</style>
</head>

<body>
<div id="box-1"></div>
<img src="images/11_02.gif" width="912" height="56" alt="标题" />
<div id="box-2"></div>
<img src="images/11_05.gif" width="911" height="59" alt="导航" />
<div id="box-3"><img src="images/11_11.gif" width="911" height="99" alt="广告搜索" /></div>
<div id="box-4"><img src="images/11_17_17.gif" width="174" height="731" alt="产品分类" /></div>
<div id="box-5"><img src="images/11_20.gif" width="233" height="303" alt="广告区" /></div>
<div id="box-6"><img src="images/11_23.gif" width="438" height="301" alt="新品区" /></div>
<div id="box-7"><img src="images/11_29.gif" width="681" height="427" alt="特供区" /></div>
<div id="box-8"><img src="images/11_36_32_33.gif" width="174" height="412" alt="功能推荐广告" /></div>
<div id="box-9"><img src="images/11_35.gif" width="682" height="379" alt="推荐畅销" /></div>
<div id="box-11"><img src="images/11_52_45.gif" width="174" height="594" alt="友情链接" /></div>
<div id="box-13"><img src="images/11_47.gif" width="682" height="538" alt="人气产品" /></div>
<div id="box-14"><img src="images/11_57.gif" width="938" height="125" alt="页脚广告" /></div>
<div id="box-15"><img src="images/11_62.gif" width="939" height="266" alt="售后" /></div>
<div id="box-16"><img src="images/11_66.gif" width="942" height="118" alt="版权" /></div>

</body>
</html>

rui0326 · 发表于 2015-9-14 11:29:36

yuanxi52028 发表于 2015-9-14 10:52
这个应该是兼容问题引起的，DW与浏览器本身也是有区别的，最终要以浏览器浏览的效果为准。

在有些情况DW所 ...

我又检查了一下还是没有找到问题

麻烦老师帮忙看下吧多谢

zhouyang · 发表于 2015-9-14 17:38:22

你的DIV宽是只有914px 屏幕宽有1440px以上吧
而你的box-3 和box-4之和都没有超过1440px，所以box-4就会沿着box-3浮动的

在body内容最外面写个DIV
<div style="width:914px; height:auto; overflow:hidden; margin:0px auto;">
你现在的内容
</div>

然后高也有这个问题
如 box-9 box-11
box-11比box-9高，所以box-13浮动会以box-11为准，现在效果就是box-9与box-13中间差一截.

rui0326 · 发表于 2015-9-15 09:29:37

多谢我再试试

yuanxi52028 · 发表于 2015-9-15 11:00:14

个人建议你从一些企业站或者小点的专题开始练习。
商城、门户类的网站相对还是要复杂一些。
学习都是从浅入深的，简单的解决不好，复杂的遇到的问题就多多了。

rui0326 · 发表于 2015-9-15 11:45:29

[作业] 网页美工设计入门详解 > 第三节网页制作流程

本帖子中包含更多资源

共7个回复最后回复于 2015-9-15 11:45

	B Color Image Link Quote Code Smilies 高级模式您需要登录后才可以回帖登录 \| 立即注册本版积分规则回帖后跳转到最后一页

[作业] 网页美工设计入门详解 > 第三节 网页制作流程

本帖子中包含更多资源

共7个回复 最后回复于 2015-9-15 11:45

[作业] 网页美工设计入门详解 > 第三节网页制作流程

共7个回复最后回复于 2015-9-15 11:45