网站首页制作，怎么使页面符合浏览器窗口大小？并且不同分辨率自动适应？
2个回答
展开全部
如何让网页顺应不同区分率 处置思绪： 在不同区分率下看到的网页版面格式有很大差异，甚至有可能错位。招致这种差异的缘由，主要是由于网页中用了相对定位的层，并且页面形式设置为居中，这样在区分率改动时就会招致错位。因此我们可以经过区分用户的区分率，然后让页面或排版做出相应变化。 方法一：做为不同的区分率做不同的页，然后做个指点页，获取到客户端屏幕的区分率后转向到相应页 详细方法： 1。 先捕捉用户的区分率。 水平区分率：screen。width 垂直区分率：screen。height 2。再用页面跳转的方法转到相应页。 location。replace(screen。width+"。htm") 或许： location。replace(screen。height+"。htm") 3。完整代码。 <script language="JavaScript"> <!-- location。replace(screen。width+"。htm"); 。。--> <。script> 技巧：screen。width 也可以改成 screen。availWidth。 提示： l language="JavaScript" 指定脚本所用言语为 JavaScript,大局部阅读器的默许客户端脚本言语就是 JavaScript，所以也可以省略不写。 l <!-- 和 。。--> 两个标识的作用是通知不支持 JavaScript 阅读器疏忽两标识间的一切 JavaScript 代码，一般状况下可以省略不写。 l JavaScript 语句与 C 言语一样用分号”;”完毕，但也可以省略不写，每一新行表示开端一条新语句。 l screen。width+"。htm" 在停止字符串衔接后失掉诸如 800。htm，1024。htm 之类的文件名。 l 可以在把完整代码存成独自一页作为指点页。 试一试：读者可以试着用assign方法完成页面跳转。 方法二：依据文档显现区域宽度重新调整层的定位。 详细方法： 1。 获取文档显现区域的宽度。 document。body。offsetWidth 2。区分对象能否为层。 function isLayer(obj){ with(obj。currentStyle) return (position=="absolute"&&left!="") } 3。完整代码。 <script language="JavaScript"> <!-- function isLayer(obj){ 。。区分对象能否为层的函数 。*不用 style 而用 currentStyle 的缘由是由于有些层不是直接在标签内写 CSS 的，这时用 style 取不到值*。 with(obj。currentStyle) 。。前往布尔值true或false return (position=="absolute"&&left!="") } 。。800为800X600区分率下窗口最大化时document。body。offsetWidth的值 var iWidth=800 window。onload=function init(){ 。。婚配页面中一切标签名为DIV元素，以数组方式前往对象 var divs=document。getElementsByTagName("DIV") for(var i=0;i<divs。length;i++)。。遍历一切DIV标签 if(isLayer(divs[i]))。。区分对象能否为层，是则调整它的 X 坐标 divs[i]。runtimeStyle。posLeft=parseInt(divs[i]。currentStyle。left)+(document。body。offsetWidth-iWidth)。2 iWidth=document。body。offsetWidth 。。保管以后文档显现区域的宽度 } 。。--> <。script> <body onresize="init()"> <div id=demo style="position:absolute;left:50px;top:100px;width:200px;height:200px;border:1px solid #000">Layer1<。div> <div id=demo1 style="position:absolute;left:250px;top:50px;width:200px;height:200px;border:1px solid #000">Layer2<。div> 留意： l 必需确保一切层的标签为 DIV。 l 顺序中的 demo 和 demo1 两个层只是测试用的，在实践就用时可以删掉。 技巧：假设一切层都是直接在标签内的定义的，可以把 currentStyle 和runtimeStyle 改成 style。 提示： l JavaScript 的单行注释是以一对正斜杠”。。”开端，多行注释以一个正斜杠加一个星号的组合(。*)开端,并以其逆向次第 (*。)完毕。 l window。onload 表示在页面加载完成后触发。 l onresize="init()" 表示在窗口大小改动时触发名为 init 的函数。 剖析：屏幕区分率先是影响到文档显现区域宽度(document。body。offsetWIdth)大小，然后文档显现区域宽度大小进一步影响到层的X轴定位和页面形式居中局部的相对位置，所以只需依据文档显现区域宽度大小来重新调整层的X轴坐标就行了。 特地提示 Javascript脚本的代码准绳上是恳求放在代码的 <head> 与 <。head> 间，但放到其它标签窗口内也可以一般运转，方法二中代码运转后效果如图 3。1 和 3。2 所示： 图 3。1 窗口最大化时层的 图 3。2 窗口减少后的层的位置 特地说明 方法一中用到了 location 对象的 replace 和 assign 方法来加载目的文档。 1。 location对象的replace方法是将指定的文档交流以后文档。 2。 location对象的assign方法是装入新的HTML文档。 方法二中用了 currentStyle、runtimeStyle 和 style 三个对象来捕捉目的对象的样式设置。 1。 currentStyle对象代表在全局样式表、内嵌样式和 HTML 标签属性中指定的对象格式和样式。 2。 runtimeStyle对象代表居于全局样式表、内嵌样式和 HTML 标签属性指定的格式和样式之上的对象的格式和样式。 3。 style对象代表给定元素一切可能的内嵌样式的以后设置
2011-10-24 6:39:20
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
如何让网页适应不同分辨率
解决思路：
在不同分辨率下看到的网页版面格式有很大差别，甚至有可能错位。导致这种差别的原因，主要是因为网页中用了绝对定位的层，并且页面内容设置为居中，这样在分辨率改变时就会导致错位。因此我们可以通过判断用户的分辨率，然后让页面或排版做出相应变化。
方法一：做为不同的分辨率做不同的页，然后做个引导页，获取到客户端屏幕的分辨率后转向到相应页
具体步骤：
1. 先捕获用户的分辨率。
水平分辨率：screen.width
垂直分辨率：screen.height
2.再用页面跳转的方法转到相应页。
location.replace(screen.width ".htm")
或者：
location.replace(screen.height ".htm")
3.完整代码。
解决思路：
在不同分辨率下看到的网页版面格式有很大差别，甚至有可能错位。导致这种差别的原因，主要是因为网页中用了绝对定位的层，并且页面内容设置为居中，这样在分辨率改变时就会导致错位。因此我们可以通过判断用户的分辨率，然后让页面或排版做出相应变化。
方法一：做为不同的分辨率做不同的页，然后做个引导页，获取到客户端屏幕的分辨率后转向到相应页
具体步骤：
1. 先捕获用户的分辨率。
水平分辨率：screen.width
垂直分辨率：screen.height
2.再用页面跳转的方法转到相应页。
location.replace(screen.width ".htm")
或者：
location.replace(screen.height ".htm")
3.完整代码。
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
