请选择 进入手机版 | 继续访问电脑版
设为首页收藏本站

酷网页

  • 亲,你好欢迎来到本论坛感谢您的支持!
  • 大猪

    119

    主题

    1

    听众

    229

    积分

    • 钻石: 363 颗
    • 贡献: 1053 次
    • 金币: 4641 个
  • TA的每日心情
    开心
    2018-8-9 03:47
  • 签到天数: 191 天

    [LV.7]常住居民III

    发表于 2017-5-4 10:38:16 | 显示全部楼层 |阅读模式

    马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

    您需要 登录 才可以下载或查看,没有帐号?立即注册

    x

    酷网页最近写网页的时候,经常碰到一个普遍的问题,经过我的查阅和尝试,终于解决了这一问题,这里有两种方法提供给大家,如果博友还有更好的方法,欢迎补充。

    一.使用min-width属性:

    我们先看看下面这段代码(html):

    1. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    2. <head>
    3. <title>无标题文档</title>
    4. <meta charset="utf-8" />
    5. <style type="text/css">
    6. body {margin: 0px;padding:0px;}
    7.      .top {width: 100%; height: 60px;background: green;}
    8.      .nav {width: 1000px;height: 60px;border: 2px solid red;margin: 0 auto;}
    9.      .nav p {width: 1000px;height: 60px; text-align: center;}
    10.      </style>
    11.    </head>
    12.    <body>
    13.        <div class="top">
    14.            <div class="nav"><p>这是导航区域</p></div>
    15.        </div>
    16.    </body>
    17. </html>
    复制代码

    浏览器全屏时显示如下(显示正常):

    如果有人问nav区域设置高度同样为60px;为什么红色的边框超出了高度,那是因为边框设置了2px,所以总高度多了4个像素,所以超出了范围。要想要不超出,所以需要在nav区域的高度上减去4个像素。

    c95b133f14d369bfab70ef386f39a36c.jpg

                                                                       图1   浏览器窗口全屏显示


    当我们把浏览器窗口变小时,我们会发现,这时候就会有问题出现了,如下图:

    6a7750f38bfb4a3a3eec9c1f0dcc023f.jpg

                                                         图2 浏览器变小,显示错误

    为什么会出现这样错位的问题呢?我们来分析一下。首先要知道,top区域宽度100%,是相对于浏览器来说的。就上图而言,这里有个等式:红色边框宽度(nav) = 绿色区域(top)+空白区域。当浏览器窗口变小,而且浏览器的宽度小于nav区域的1000px时,当我们把下面的滚动条拉到最右边时,发现出了错。那我们应该怎么来修改这个错误,就用到了min-width属性,意思是最小宽度。

    把此属性加到top区域里面: .top {min-width: 1000px; width: 100%; height: 60px;background: green;},其他代码不变。在运行一下,如下图所示:

    7c07bf1978c905e59a2c18ceac7e46bf.jpg

                                                图3 加了min-width ,浏览器变小,显示正常

    从上图可以看出,滚动条拉倒最右边,也出现了正确的情况。绿色填充到了nav区域。所以问题得到了解决。为什么问题会得到解决呢?

    答:top区域加了min-width属性,设置为1000px,意思是top区域的最小宽度为1000px,所以当浏览器窗口变小到小于1000时,top的宽度为1000px,而nav的宽度也是1000px,所以就刚好完全显示,不会出错了。


    二.现在我们讲解第二种方法,用图片填充整个背景。

    代码如下:

    1. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    2.   <head>
    3.     <title>无标题文档</title>
    4.      <meta charset="utf-8" />
    5.      <style type="text/css">
    6.      body {margin: 0px;padding:0px;background:url(4.jpg) repeat;}/*使用图片填充整个body*/
    7.      .nav {width: 1000px;height: 60px;border: 2px solid red;margin: 0 auto;}
    8.      .nav p {width: 1000px;height: 60px; text-align: center;}
    9.      </style>
    10.    </head>
    11.    <body>
    12.        <div class="top">
    13.            <div class="nav"><p>这是导航区域</p></div>
    14.        </div>
    15.    </body>
    16. </html>
    复制代码

    使用图片重复填充整个body之后,再添加导航区域nav居中显示,浏览器窗口变小的时候显示如下:

    e59cf9d62da1977224148c3f4eb6bc91.jpg

                                                 图4 使用图片填充body,显示正常。  

    从上图我们发现,滚动条拉倒右边,还是显示正常,也就是问题已经得到了解决。

    但是有同学可能会问,如果选择这种方法,背景不是我想要的效果怎么样?

    答:做项目的时候,都是给一张psd图片,你用ps从网页上面直到最下面切一张包含整个body颜色的小图,用来填充body就好了。以后创建的div再设置背景色会覆盖掉body色,所以完全没有影响。

    这是本人自己想到的两种方法,个人觉得第二种还比较方便。如果还有其他的方法,欢迎大家补充!

    酷族打造网络最大的设计平台
    回复

    使用道具 举报

    大猪

    119

    主题

    1

    听众

    229

    积分

    • 钻石: 363 颗
    • 贡献: 1053 次
    • 金币: 4641 个
  • TA的每日心情
    开心
    2018-8-9 03:47
  • 签到天数: 191 天

    [LV.7]常住居民III

     楼主| 发表于 2018-8-9 03:47:37 | 显示全部楼层
    自己回复看看
    酷族打造网络最大的设计平台
    回复 支持 反对

    使用道具 举报

    快速回复

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    关闭

    酷族设计团队官方推荐上一条 /3 下一条

    Powered by Discuz! X3.3 Design by CoolDesign! Team QQ:18293230

    © 2010-2017 Comsenz Inc. GMT+8, 2018-10-20 11:10 , Processed in 0.187784 second(s), 36 queries .    

    快速回复 返回顶部 返回列表