zoukankan      html  css  js  c++  java
  • 如何让网页版面更适合浏览者呢?这里有技巧

    刚做好网页的朋友们经常收到网友们的反馈,说自己的网页排版乱得一塌糊涂,或者被拉伸,或者被压缩,要不就是不能完整显示在屏幕内。这是为什么呢?因为通常初学者朋友都按照自己的屏幕分辨率对网页进行设计,但是却没有考虑到网友们可能使用了别的屏幕分辨率,以至于看起来版面混乱。
      目前,网友们上网通常会采用800×600、1024×768两种分辨率,由于网页不是用来给自己看的,所以我们必须让自己的网页能够兼顾这两种情况,让不同分辨率设置的网友都能够看到一个排版美观正确的网页。下面就介绍几种常用的方法,特别说明一下除非你的网站是艺术类的,有特别需求,通常我们都会首先照顾分辨率设置为800×600的大众化标准。
      一、 自然拉伸
      如果你的网站结构没有用到大量的图形来衔接,主要靠表格来定结构,那么你就可以使用该方法。非常适用于主要靠表格、文字来表达信息的简单的网页页面。
    制作表格时,只要你把表格的宽度属性定义为100% ,表格就会根据分辨率的不同自行调整宽度。
      二、 固定居中
      自然拉伸法的好处自不必说,可以总是充满整个屏幕,但是弱点也很明显:一来如果网页版面复杂,各图形元素之间有精确的的定位关系,一旦拉开或者压缩就会彻底变形;二来即使版面不太复杂,文字行数亦不好控制。有时候分辨率一旦变化,要么太密,要么太挤,就失去了作者设计版面的意图了。所以目前各大网站普遍采用的方法是固定居中法!
    该方法的制作方法很简单。在制作最大的表格时,把表格属性的宽度像素定义为一个固定数值,并且让表格居中即可。以后制作的表格,就会限定在这个表格之内,永远都不会超出800×600分辨率的屏幕,网页的大小相当于固定死了。当浏览者使用1024×768的分辨率浏览网页时,屏幕两边就会留下白边,看起来觉得比较自然。
      三、 兵分两路
      如果你的网页不经常更新,而且对页面效果极其在意,那好,你就设计两个页面,分别对应800×600和1024×768两种分辨率。把这两个首页文件分别命名为index800.htm和index1024.htm 。然后在空白的索引页index.htm中加入以下代码到</head>前面:
    <script language=”javascript”>
    if (window.screen){
    var w=screen.width;
    url_800=”index800.htm”;
    url_1024=”index1024.htm”
    //请根据你的文件命名修改
    if (w<835){
    self.location.replace(url_800);
    }//加入判断条件,还可以用“&”加入多个判断条件
    if (w>=835){
    self.location.replace(url_1024);
    }
    }
    </script>
      这样,当访问者打开你的索引页时,系统就会判断访问者的屏幕分辨率,然后转到相应的首页。
  • 相关阅读:
    1539. Kth Missing Positive Number (E)
    0082. Remove Duplicates from Sorted List II (M)
    0526. Beautiful Arrangement (M)
    解决mac电脑耳机/外放突然无声音
    利用蒙特卡洛方法实现21点问题的最优解(内含python源码)
    浅析机器视觉在医疗影像处理中的应用
    基于最近邻法手写数字识别(内附python源码)
    最新版 | 2020李沐《动手学深度学习》中文版pdf重磅开源!
    干货收藏!639页《深度学习:Deep Learning》图文并茂课程PPT
    22课时、19大主题,CS 231n进阶版课程视频上线!
  • 原文地址:https://www.cnblogs.com/zhuor/p/221544.html
Copyright © 2011-2022 走看看