软件下载 | 资讯教程 | 最近更新 | 下载排行 | 一键转帖 | 发布投稿
您的位置:最火下载站 > Web前端 > 工具与技巧 > 网页水平垂直居中在不同分辨率的实现方法

网页水平垂直居中在不同分辨率的实现方法

  烈火网(LieHuo.Net)教程 在制作网页过程中,通常通过以下方法,来实现网页水平垂直居中:

  <div style=" width:900px; height:600px; position:absolute; top:50%; left:50%; margin-top:-300px; margin-left:-450px;"></div>

  然而,在一些分辨率比较小的电脑,这样的方法,会使网页被截去一部分,比如在800*600的分辨率,虽然现在已经普遍不用800*600的分辨率了,但是在以下条件比较差的地方,还是有人在使用800*600.所以我们在设计过程中,一定要考虑到不同分辨率的问题.那么,如果上面的方法有问题的话,我们可以通过写一段JAVASCIRPT来调用不同的CSS.以下是JAVASCRIPT的代码:

以下为引用的内容:
<!-- function getBrowserWidth(){ if (window.innerWidth){ return window.innerWidth;} else if (document.documentElement && document.documentElement.clientWidth != 0){ return document.documentElement.clientWidth; } else if (document.body){return document.body.clientWidth;} return 0; } //--> <!-- function determineStyle(){ var browserWidth = getBrowserWidth(); var i, a, main; if (browserWidth <= 995){ for(i=0; (a = document.getElementsByTagName("link")[i]); i++) { if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) { a.disabled = true; if(a.getAttribute("title") == "narrow") a.disabled = false; } } } if (browserWidth > 995){ for(i=0; (a = document.getElementsByTagName("link")[i]); i++) { if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) { a.disabled = true; if(a.getAttribute("title") == "wide") a.disabled = false; } } } } //--> <!-- function doOnResize () { determineStyle(); } function doOnLoad () { determineStyle(); if ( getCookie("externalLinks") ) { setLinkAttributes( getCookie("externalLinks") ); } } window.onresize = doOnResize; window.onload = doOnLoad; //-->

  以下是CSS的代码:适用于1024*768及其以上分辨率的:

  width:900px; height:600px; position:absolute; top:50%; left:50%; margin-top:-300px; margin-left:-450px;

  适用于800*600分辨率的:width:900px;(即网页的宽度)

  在html页面分别引入CSS:

  <link id="wide" title="wide" media="screen" href="css/1024.css" rel="stylesheet" type="text/css" />

  <link id="narrow" title="narrow" media="screen" href="css/800.css" rel="alternate stylesheet" type="text/css" />

  这样就可以在高分分辨率下实现水平居中,在低分辨率下,又不会有网页被截掉一部分的问题!

    相关阅读
    栏目导航
    推荐软件