设计网页的自适应问题_设计自适应网站页面时应注意哪些事项

1、DIV+CSS 设计的页面，DIV高度自适应问题，页面大致代码如下。

1楼的，有本事你把把他修复好。没本事，还来这骂人。没让你回答怎么着。以后别内上网络知道，你这是容在侮辱所有参与网络知道的人。
根据你的问题，很明显是div不能自动适用高度。通俗的将，就是外层div不能包含内层的元素。
先说说为什么会出现这个现象？
因为内层div全设置了浮动，也就是float属性，元素一旦浮动，就不会占用元素空间。就会出现，外层div不能包含内层元素的现象
解决方法：
方法1：
在内层元素的最后面加入一个元素，并且设置这个元素不浮动，强制使外层元素包裹内层元素如<div
style="clear:both;float:none"></div>
方法2：设置外层元素css属性overfloat为hidden或者auto，zoom设置为1，设置zoom是为了兼容ie6
方法3：设置外层元素高度为一个固定值（不建议这么做，不过这是最完美的解决方法）
方法4：通过css的content属性，这个有点复杂，我就不说了，反正很少人用这个
最后，在问一句，1楼的你是人吗？
还有一条，把所有不参与浮动的外层元素，加上clear:both;，强制清除浮动

2、网页设计中，使用自适应宽度有什么缺点吗

网站都是用960px，那是因为这些页面很大可能不是设计师自己设计的，只是偷懒套用模板而已。
如果你是初学者建议先用TABLE布局，简单明了，但缺点就是太死板，没DIV+CSS灵活。
自适应宽度对于简单的页面没什么大问题，而且省事，但对于复杂的页面就不行。
就拿img标签来说吧，如果你不定义宽和高，那你图片的大小就无法控制，图片多大就在页面显示多大，如果图片很大，那你还得用图像制作软件把图片改小在放入IMG控件，那多麻烦。如果你自定义的话<img width="500px" height="500px"/>，就会自动把你的图片大小调整到你自定义的宽和高500*500，这样方便多了，不过不建议你把小图调大，这样图片的像素会变模糊，但大图调小是绝对可以的。对于其它的控件也是一个道理，我是不建议自适应宽和高，因为到时候你如果发觉布局不对了，就很麻烦，有的改了，事先自定义好，方便以后的维护同时可以有效的控制单元格的位置。
不建议在设计页面的时候使用自适应的宽和高，这种写法绝对是懒人的写法，而且只适合比较简单的页面。

3、DIV+CSS 网页设计自适应问题

这样写，我用了两种办法都实现了，一个是你说的，一个是我自己写的。
别用浮动，
设置左绝对定位 0 0，宽200 比如。
然后右 margin-left:200px; 如果有间距那个就把200扩大比如205.
设置宽度100%
,然后再右边的层里再套表格即可实现自动伸展。

代码给你经过测试OK
<!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>
</head>

<body>
<div>
<div style=" position:absolute; left:0; top:0;width:200px; background:#009966; height:600px;"></div>
<div style=" margin-left:205px; background:#FF3366; height:600px;"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
</table>
</div>
</div>
</body>
</html>

再给你一套你那样写法的代码
<!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">

</style>

</head>

<body>
<div id="sidebar1"></div>
<div id="mainContent">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
</table>
</div>
</body>
</html>

4、自适应网页设计和响应式网页设计有什么区别

通俗的说，自适应网页设计也是响应式网页设计，响应式网页设计也是自适应网页设计。但是真正的细分起来，自适应只是响应式的一个子集，指网页中整体大图的自适应或者banner的自适应。

响应式设计可以一个网站兼容多个不同终端

响应式网页设计优势：流体网格的网站适合响应式网页设计。

1、灵活性强，可以适应不同分辨率的设备

2、方便快捷的解决多设备显示适应问题

自适应网页设计优势：固定断点的网站适合自适应网页设计。

1、实施起来代价更低，测试更容易

2、自适应布局可以让设计更加可控，因为它只需要考虑几种状态就可以了

虽然响应式/自适应网页设计会带来兼容各种设备工作量大、代码累赘、加载时间长的缺点，但它们能“一次设计，普遍适用”，可以根据屏幕分辨率自适应以及自动缩放图片、自动调整布局，它们不只是技术的实现，更多的是对于设计的全新思维模式。

5、网页设计请问做网页的时候有什么方法让网页自适应，排版又不会随着窗口大小的变动而错乱？

自适应不能全部适应所有的浏览器的。所以一般使用JS先判断是什么浏览器再调用相应的CSS来完成。

6、网页自适应跟平面设计有什么关系

这个网页自适应主要针对与适应不同屏幕分辨率，平面设计是做与平面印刷或者现在的互联网相关的图形界面也慢慢的变成了平面设计中的一个分支，你要做到网页自适应要了解什么图形在在什么情况下可以一像素平铺

7、网页设计中，如何让页面自适应手机端？

一般来说，通过CSS3，可以直接对不同分辨率下的样式进行定义，比如如下的代码。
/* PC或中大型笔记本设备 desktop */ @media all and (min-width: 1201px) { .title-desktop{ display: block !important; } .container { width: 1100px; } } /* 中小型笔记本或大平板 laptop */ @media all and (min-width: 980px) and (max-width: 1200px) { .title-laptop{ display: block !important; } .container { width: 920px; } }
但是上面的方法，可能不会兼容老版本ie。
所以也可以通过js，识别当前页面的分辨率，来给出样式，这种比较好也比较复杂，代码量很多但是一般没有兼容问题。

8、如何进行自适应网页设计

做网站让页面自适应大小方法代码如下：

一、电脑站设置网站自适应方法

全屏宽度主要在于CSS代码中，将width为100%，而不是一个固定的像素值，代码如下。

手机网设置网自适应方法：

在网页头部加上这样一条meta标签：<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />

解释：

9、如何设计网页宽度自适应屏幕，图片也自适应大小，但不能超出它的原始大小。

这位网友你好，想要网页宽度自适应，你需要把网页元素宽度设置为百分比，还要在网页头部加上代码：

图片自适应，且不超过原始大小，需要设置最大宽度，代码如下：

img{
width:100%;
max-width:100%;
}

10、设计自适应网站页面时应注意哪些事项

1、页面内容要新颖

网页内容的选择要不落俗套，要重点突出一个“新”字，这个原则要求我们在设计网站内容时不能照抄别人的内容，要结合自身的实际情况创作出一个独一无二的网站。放眼望去，网上的许多个人主页简直就是"杂货店"，内容包罗万象,题材千篇一律，人人都是"软件下载",个个都有"网络导航"，从头到尾找不出一丝“鲜”意。所以，我们在设计网页时，要把功夫下在选材上。选材要尽量做到“少”而“精”,又必须突出“新”，如能坚持天天更新的话,我相信这样的网页一定会受到大家的欢迎。

2、网页命名要简洁

由于一个网站不可能就是由一个网页组成，它有许多子页面，为了能使这些页面有效地被连接起来，用户最后能给这些页面起一些有代表性的而且简洁易记的网页名称。这样既会有助于你以后方便管理网页，在向搜索引擎提交你的网页时更容易被别人索引到。在给网页命名时，最好使用自己常用的或符合页面内容的小写英文字母，这直接关系到页面上的连接。

3、要及时更新网页

网页制作好后，不能说万事大吉了，其实事后的工作量更大。因为网页制作是一时的，而维护更新的工作是每天都要做的。要及时把网页上已经作废的连接应该立即删除掉，比如用户无意中点击了页面中的一个连接，在苦苦的等待之后，换来的是无法访问的结果，那么他们会对你的网页大失所望，可能以后再也不会光顾你的网页了。若不能及时更新，也最好在主页上发布信息，告诉前来访问的朋友，因有特殊情况需要离开一段时间，未能及时更新主页，希望各位见谅，这样就能给人一种对别人负责的感觉，同时能得到网友的信任。

4、注意视觉效果

设计Web页面时，一定要用640×480和800×600的分辨率来分别观察。许多浏览器使用640×480的分辨率，尽管在800×600高分辨率下一些Web页面看上去很具吸引力，但在640×480的模式下可能会黯然失色。作一点小小的努力，设计一个在不同分辨率下都能正常显示的网页

5、随时注意网站升级

时刻注意网站的运行状况。性能很好的主机随着访问人数的增加，可能会运行缓慢。但是，如果你不想失去访问者的话，一定要仔细计划好你的升级计划。

6、网页内容要易读

网站设计最重要的诀窍，恐怕就是你的网页要易读。这就意味着,你必须花点心思来规划文字与背景颜色的搭配方案。注意不要使背景的颜色冲淡了文字的视觉效果，别用花里胡哨的色彩组合，让人看起来你的网页来很费劲。一般来说，浅色背景下的深色文字为佳。这个要点要求你最好别把文字的规格设得太小、也不能太大。文字太小，人家读起来难受；文字太大，或者文字视觉效果变化频繁，像是冲着人大喊大叫，看起来不舒服。另外，最好让文本左对齐，而不是居中。按当代中文的阅读习惯，文本大都居左的。当然，标题一般应该居中，因为这符合读者的阅读习惯。

7、善用表格来布局

不要把一个网站的内容象作报告似的一二三四地罗列出来，要注意多用表格把网站内容的层次性和空间性突出显示出来，使人一眼就能看出你的网站重点突出，结构分明。

8、少用特殊字体

虽然你可以在你的HTML中使用特殊的字体，但是，你不可能预测你的访问者在他们的计算机上将看到什么。在你的计算机里看起来相当好的页面，在另一个不同的平台上看起来可能非常糟糕。一些网站设计员喜欢使用来定义特性，这虽然允许你使用特殊的字体，但是仍需要一些变通的方法，以免你所选择的字体在访问者的计算机上不能显示。级联风格表CSS有助于解决这些问题，但是只有最新版的浏览器才支持CSS。

9、多学习和使用HTML

为了成功地设计网站，你必须理解HTML是如何工作的。大多数的网站设计者建议网络新手应从有关HTML的书中去寻找答案，用Notepad制作网页。因为用HTML设计网站，可以控制设计的整个过程。但是，如果你仅仅是网站设计的新手，你应该寻找一个允许修改HTML的软件包。HomeSite4是一个很好的Web设计工具。在设计过程中，HomeSite4能帮助你学习HTML。它还允许你切换到所见即所得的模式，以便你在把网站发送到Web之前，预览你的网站。

10、尽量少用Java程序不要使用大幅面的Java程序,能够用javascript替代效果的则尽量不要使用java.因为目前来讲java的运行速度实在慢的让人无法忍受，往往使浏览者没有耐心等页面全部显示出来，这样你的精心设计便毫无效果啦。

导航:首页 > 万维百科 > 设计网页的自适应问题

设计网页的自适应问题

与设计网页的自适应问题相关的知识