zoukankan      html  css  js  c++  java
  • 关于全屏布局

    关于全屏布局(header)那点事:
    之所以前面括号里面写了个header,但全屏并不局限于它。
    接下来让我们,讨论一下关于全屏布局的那点事-----首先全拼的话就要考虑到不能固定宽高度了,这里拿header做例子。
    所有我们只考虑不固定宽度就好了。
    首先:分为两种  第一种:给一个很大的固定尺寸的图片背景
                               第二种:无上限的背景颜色
     
    第二种方法:我们不用考虑太多 直接   100%;   height:300px;  background:red;  这样子就可以建立一个全屏的 颜色为
    红色的背景的布局了。
     
    第一种方法:这个就要看需求了,截止目前 24寸显示器 还不是很普遍,视乎也是最大的用户用的尺寸。所以很多布局最大做到1900PX,
    但今天看了一下,天猫的(他们用的是1600px):说这么多,实际上就是让我们统计大概的了解一下,目前适应用户屏幕大小做出
    相应需求。 这里面  我们和第一种方法的用法几乎没有太大区别
    100%; height:300px; backrgound:url(../images/**.jpg) no-repeat;  这样子, 屏幕就只会根据用户的屏幕显示大小,来相应的显示背景图片的大小了。
     
    当然个人建议:自动适应就好了,反正我们用的是 居中  margin:0 auto; 
     
    但我们更多见到的布局是这样子的:
    因为我们的网站都是有宽度限制的,所有通常的做法是要限制住(目前个人感觉没有这个必要,但既然要讲这里那就扯扯吧)
    那么我们的做法就是在全屏布局的里面在加入一个div,这个div是宽度定死的,别且也加一个 margin:0 atuo; 
    (这里多讲一下,很多都加一个min-width这个其实真没有什么必要,应为IE6 根本就不识别这个【唯一有用的就是告诉用户,小子我这个不能太小,最小也得是1000px宽的。】)
    那么这个时候,通常是喜欢给外围的加一个相对定位:这里是对第二个div加相对定位。第二个里面的元素加绝对定位。
    其实有的时候我想为什么一定都这么写呢?就算你不加相对定位,也不会跑别的地方的,你之前已经有的 margin:0 atuo;
    当然加定位还是有好处的,至少定位方便很多。  IE6下对 边距的敏感度很强,所有有的时候用定位,远比边距来的额实在。
    通过分享,结交好友~ 如本文对您有益,请给予关注。转载请注明出处!-- 小数
  • 相关阅读:
    使用工具进行计算机取证
    SpringBoot整合Swagger2
    Filebeat安装部署
    Mac OS X上使用Wireshark抓包
    maven集成命令-U -B -P -e -X
    轻量级Mysql Sharding中间件——Shark
    Spring MVC的WebMvcConfigurerAdapter用法收集(零配置,无XML配置)
    Unity2D音游案例-节奏大师教程+源码+素材
    4款五星级的3D模型资源包
    CandyCrush 糖果传奇源码+素材+教程
  • 原文地址:https://www.cnblogs.com/mcat/p/3867276.html
Copyright © 2011-2022 走看看