精华内容
下载资源
问答
  • 关于网页布局

    2016-11-17 22:18:12
    关于css3网页布局的一些总结说明,包括标准文档流,绝对定位和浮动定位方式。

    最近在做一些关于网页布局的任务,关于网页布局和样式等方面的知识,一直没有一些系统的资料将所有使用场景全部囊括,这方面的知识总是需要不断的实践和积累的,所以突然想要做一些总结,以便应对之后可能出现的情况。现在将关于网页布局的一些知识进行说明。

    网页布局总共有三种定位方式,分别为标准文档流,绝对定位、浮动定位方式。

    当然在此之前,须知CSS3的最基本的概念。盒子模型:外边距(margin),边框(border),内边距(padding),盒子中的内容(content)。这是设置样式必须了解的。

    自动居中:设置width的值(–px或–%均可),然后设置margin设置为0 auto。注意:设置了自动居中不要设置position:fixed。可以设置这个body处于居中的样式。

    下面就3种定位机制分别说明:

    • 1、标准文档流:满足输出内容按照从上到下、从左到右的顺序进行输出显示,当元素为行级元素时在上一元素后显示,当为块级元素时另起一行并占据一行。
    • 2、浮动定位(float):浮动float属性有left、right、none。浮动模块之间的间距通过设置margin值来设置。在设置浮动属性后可能对其他元素有影响(如在mainbody中设置left和right,可能使mainbody和footer产生影响,使布局混乱。)在此时需要清除浮动产生的影响,设置overflow:hidden;即可消除。
    • 3、绝对定位(position):又可分为3中定位方式,分别为静态定位(static)、绝对定位(fixed和absolute)、相对定位(relative)。下面将对其进行一一说明。 (1)静态定位(static):默认的定位方式,出现在正常流中,不受left,right,bottom和top的影响。 (2)绝对定位: a)固定定位fixed:相对于浏览器窗口为偏移标准,设置left和top等值。当滚动条滚动时,位置固定,不移动,其他元素可从下方穿过。应用在如网页广告始终位置不变出现在一定位置。 b)绝对定位absolute:当有使用绝对定位的祖先元素时,根据最近的绝对定位祖先元素偏移,当没有时根据进行偏移。设置left和top等值。当设置了绝对定位而没有设置宽度时,元素宽度自适应。 (3)相对定位(relative):仍处于文档流当中,相对于自身原位置进行偏移,设置top和left等值。
    展开全文
  • 西安网站建设关于网页常用布局做一下方案介绍 希望能帮到大家 http://xa.netconst.com/ 网页基本布局方式: (1)流式布局 Fluid 流布局与固定宽度布局基本不同点 就在于对网站尺寸的侧量单位不同。固定宽度布局使用...

    更新时间 :2019-12-17 字体大小 : 小中大
    西安网站建设关于网页常用布局做一下方案介绍 希望能帮到大家 http://xa.netconst.com/

    网页基本布局方式:

    (1)流式布局 Fluid

    流布局与固定宽度布局基本不同点 就在于对网站尺寸的侧量单位不同。固定宽度布局使用的是像素,但是流布局使用的是百分比,这位网页提供了很强的可塑性和流动性。换句话说,通过设置百分比,我们不需要考虑设备尺寸或者屏幕宽度大小了,可以为每种情形找到一种可行的方案,应为你的设计尺寸将适应所有的设备尺寸。流布局与媒体查询和优化样式技术密切相关。

    (2)固定布局 Fixed

    在固定布局中,网页的宽度是必须指定为一个像素值,一般为960px。过去,开发人员发现960px是最适合作为网格布局的宽度,因为960可以整除3,4,5,6,8,10,12和15。在今天,在web开发中还是比较普遍使用固定宽度布局的,因为这种布局具有很强的稳定性与可控性。但是同时也有一些劣势,固定宽度必须考虑网站是否可以适用于不同的屏幕宽度。

    (3)弹性布局 Elastic

    弹性布局跟流布局很像,主要不同是大小单位。弹性布局的大小单位不是像素或者百分比,而是em或者rem,避免了根据px局部在高分辨率下几乎无法辨识的缺点,又相对于%百分比更加灵活,同时可以支持浏览器的字体大小调整和缩放等的正常显示,需要一段时间适应而且不易从其他布局转换过来。

    (4)伸缩 Flex box

    使用css3 Flex系列属性进行相对布局。对于富媒体和复杂排版的支持非常大,但是存在兼容性问题。

    (5)响应式

    使用@media媒体查询给不同尺寸和介质的设备切换不同的样式。优秀的响应范围设计可以给适配范围内的设备做好的体验。

    西安网站建设 网站建设 网站开发 网站设计 网站制作 企业官网建设

    展开全文
  • 第1章 脸面问题——关于网页布局

    千次阅读 2009-12-03 23:17:00
    -----------------以下内容与正文无关-----------------本来想一开始就写基本网页布局的,但突然...----------------------下面开始正文-------------------- 第1章 脸面问题——关于网页布局 对于一个像MapGuide这样

    -----------------以下内容与正文无关-----------------

    本来想一开始就写基本网页布局的,但突然觉得有必要先介绍一下什么是网页布局和网页布局的相关知识,所以才临时加入了这一章。

    ----------------------下面开始正文--------------------

     

     

    第1章 脸面问题——关于网页布局

        对于一个像MapGuide这样的地图引擎来说,允许使用者对界面进行自由定制是很重要的。这是因为:

    1.   不同的客户对于功能的要求不同。有的人可能只需要浏览地图,那么地图只需要提供简单的平移缩放功能,对于这些用户来说,就已经足够了;有的用户可能还需要了解诸如某块区域有多大这样的跟尺寸相关的信息,那么他们就需要“测量”功能。总的来说,需要的功能越多,界面元素也就越复杂。
    2.   不同的客户使用习惯不同。有的人经常使用众多不同的功能,这样他就很可能习惯把所有常用功能都放置在工具栏中,以便寻找;有的人只需要浏览地图,那么他们就很可能希望所有的功能都放置在右键菜单中,这样可以让放置地图的空间最大,而且界面简洁。

        MapGuide的网页布局正好解决了这个问题。所谓“网页布局”,其实就是一个对于网页中所使用的界面元素如何排列的定义。用户可以自由选择在界面中放置哪些功能,元素是放在工具栏中,还是放置在右键菜单中。网页布局打破了功能和界面之间的耦合。通过使用“网页布局”这一概念,负责定制界面的人员(通常是网站管理人员)可以自由地按照自己的想法(其实还是有一些限制的)安排各个功能所处的位置,而功能开发人员可以不必关心布局问题,从而专注于功能的开发上。

    1.1 淡妆浓抹总相宜——MapGuide的两种网页布局

        MapGuide提供了两种网页布局,一种称为基本网页布局(Basic Web Layout),另一种称为灵活网页布局(Flexible Web Layout)。对于最终用户来说,除了界面不太一样之外,这两种布局并没有太大的不同。任何一张MapGuide的地图,都既可以放置在基本网页布局中,也可以放置在灵活网页布局中。甚至通过配置,可以让灵活网页布局看起来跟基本网页布局一样(但是反过来不行)。然而,对于功能开发人员来说,这两种网页布局所采用的代码(不管是服务器端代码,还是页面脚本),除了都使用了MapGuide网页服务器扩展API之外,可以说是基于两套完全不同的框架。因此,在任何一种布局中开发的功能,是不能直接应用在另一种布局上面的。

        图1-1和图1-2示意的是同一张MapGuide示例地图在不同网页布局下的界面。比较这两张图,细心的读者不难发现,同样的一张地图,灵活网页布局不仅提供更多的功能,如有圆、多边形等各种不同的选择要素的方式,被称之为“鹰眼”的概览地图(Overview Map)等,而且也更为美观。其实更好的用户体验仅仅是灵活网页布局的众多优势中的一部分。对于利用MapGuide进行二次开发的人员来说,由于灵活网页布局所用的页面脚本代码模块化程度更高,大部分代码都使用的是面向对象的编程风格,因此它具有更好的灵活性和扩展性,可以方便的修改现有功能或者添加新的功能。这也是为什么在开发新的MapGuide程序时,Autodesk推荐用户使用灵活网页布局的原因。

    图1-1 基本网页布局示例

    图1-1 基本网页布局示例

    图1-2 灵活网页布局示例

    图1-2 灵活网页布局示例

        那么,是不是基本网页布局就一无是处了呢?其实不然,基本网页布局也有它自己的优势。通过下表1-1的比较,我们不难发现,尽管基本网页布局提供的功能简单,但也因此使得基本网页布局中网页的代码较少,这就使得浏览器加载基本网页布局起来要远快于灵活网页布局,而且基本网页布局对于浏览器所在的客户机的计算能力要求也相对较低。另外,由于网页中代码较少,所以网页在网络上传递时,对于网络负载的压力就不会太大。所以,如果用户对于功能的要求不是很复杂,客户机也可能较为陈旧,网络带宽也较低,但却对网页的响应速度有很高要求(比如一个政府部门想要在主页上放置一个地图以便公众查询,公众的客户机就可能很旧,网速也可能较慢)。那么,基本网页布局也许更为适合这样的项目。

    布局方式

    比较项目

    基本网页布局

    灵活网页布局

    界面与功能

       

    默认提供的功能

    较少

    较多

    是否支持布局定制

    不支持

    支持

    是否支持样式定制(如界面颜色、字体等)

    不支持

    支持

    性能

       

    页面加载时间

    较少

    较多

    网络负载

    较低

    较高

    客户机性能要求

    较低

    较高

    浏览器与服务器交互次数

    较少

    较多

    第三方开发

       

    网页脚本代码结构

    封装成函数,模块化程度较低

    封装成类,模块化程度较高

    自带脚本库代码量

    较少

    较多

    可以使用的API数量

    较少

    较多

    适合项目

    对性能要求较高的项目

    对功能有较多要求的项目

    表1-1 基本网页布局和灵活网页布局的比较

    1.2 扒开现象看本质——网页布局的存储

        网页布局这个概念听起来是蛮玄的。只需要对网页布局这个东西修修改改配置一下就能让界面发生翻天覆地的变化。那么网页布局究竟是什么呢?其实网页布局就是一个存储在服务器上的一个基于XML格式的配置文件。对于一个基本网页布局,其后缀是WebLayout;而对于一个灵活网页布局,其后缀是ApplicationDefinition。

        也许您很想知道究竟网页布局这个配置文件是什么样子。幸运的是,MapGuide给我们提供了一个机制,能够让我们看到服务器端所储存的文件内容。

        MapGuide有一个用来快速访问地图代理(MapAgent)的页面。我们会在后面的篇幅中详细介绍这一功能,而且会经常利用这一功能访问一些服务器的信息。目前您可以先把它看作是一个获取服务器信息的页面。如果您安装的是MapGuide开源版,该页面的位置是"http://<MachineName>/mapguide/mapagent/index.html " ,其中您需要用安装服务器的机器名称或者IP地址来替换其中的<MachineName>(如果是在本机访问,您可以使用“localhost”)。如果您安装的是MapGuide企业版,该页面的位置是"http://<MachineName>/mapguide<VersionNumber>/mapagent/index.html ",其中您除了要替换<MachineName>外,还需要用MapGuide的版本(如2010)来替换掉其中的<VersionNumber>。

        首先,用您的浏览器您将看到如图1-3这样的页面:

    图1-3 地图代理页面

    图1-3 地图代理页面

        然后,让我们点击左方下面红框内示意的超链接(GetResourceContent),这时你就能看到如图1-4所示的获取资源内容的页面。

    图1-4 获取资源内容页面

    图1-4 获取资源内容页面

        在红框标识出的位置填入您所要访问的网页布局在服务器上的资源标识(比如本例中我们填入的是“Library://Samples/Sheboygan/Layouts/Sheboygan.WebLayout”),点击“Submit按钮”,在弹出的登录框中输入管理员用户名的密码(默认的管理员用户名为“Administrator”,密码是“admin”),您就能够在新页面中看到该资源的内容信息。

        鉴于一个网页布局定义文件较大,我们这里就不一一列举各部分的含义了,而且我们也不建议用户直接编辑该文件。如果您想知道该定义文件需要满足什么样的规则,在MapGuide安装目录下有一个文件夹,包含有所有MapGuide资源文件的XML模式文件。如果您安装的是MapGuide开源版,这个文件夹默认位于“C:/Program Files/OSGeo/MapGuide/Server/Schema ”;如果您安装的是MapGuide企业版,这个文件夹默认位于“C:/Program Files/Autodesk/MapGuide<VersionNumber>/Server/Schema ”。其中的WebLayout-1.0.0.xsd就是基础网页布局的XML模式;而ApplicationDefinition-1.0.0.xsd就是灵活网页布局的XML模式。

    展开全文
  • 瀑布流布局 瀑布流布局常用于对不同高度的图片元素按照高度进行绝对定位,保持每列图片的高度大致相同的高度。 瀑布流布局原理:瀑布流布局中元素的宽和间距保持一致,但是高度不同。 程序需要再等待图片元素加载...

    瀑布流布局

    瀑布流布局常用于对不同高度的图片元素按照高度进行绝对定位,保持每列图片的高度大致相同的高度。

    瀑布流布局原理:瀑布流布局中元素的宽和间距保持一致,但是高度不同。
    程序需要再等待图片元素加载完成以后开始对元素进行绝对定位。首行元素的定位的top,left值从0,0开始。每列元素的left = (index%col) * width + index * space,其中index指元素是第几列,col是布局的总列数,width是每列的宽度,space是每列的间距。每行元素的top = item[index - col].top + item[index - col].height + space,对应元素的top值等于上面元素的top值加上上面元素的高度再加上行间距。

    瀑布流布局样图

    //css设置
    .container {
    	position: relative;
    }
    
    .container-item {
    	position: absolute;
    }
    
      function waterFall(container, col, space, dataArr) {
      //container是父盒子,col为展示的列数,space为元素间距,dataArr为src数据来源
        var leftValList = []; //记录每列的left定位值
        var topValList = []; //记录对应列的top值
        var leftVal = 0;
        var topVal = 0;
        var totalW = $(container).width();
        var eachW = Math.floor((totalW-space)/col); //每列的宽度
        var len = dataArr.length;
        var loadNum = 0; //图片加载计数器
    
        var addString = '';
        for(var i = 0; i < len; i++){
            addString = "<div class='container-item' data-index="+ i +"><img/></div>"
            $(container).append(addString);
            
            var Imgindex = parseInt($('.container-item').eq(i).attr('data-index'));
            $('.container-item').children().eq(i).attr('src', dataArr[Imgindex]['src']);
            $('.container-item').children().eq(i).unbind('load').on('load', function(){
              loadNum++;//图片加载完后,计数器加一
              if(loadNum >= len){ //当所有元素加载完成后,进行绝对定位的设置
                $('.dis-item img').each(function(index){
                  if(index < col){ //当index在第一行的时候,设置初始的值
                    leftVal = index * eachW + index * space; //left值计算公式
                    leftValList[index] = leftVal;
                    topValList[index] = $(this).height();
                    $(this).parent().css({
                      'top': topVal + 'px',
                      'left': leftVal + 'px'
                    })
                  }else {
                    leftVal = leftValList[(index)%(col)]; //第一列以下的元素可以直接取对应列的left值
                    topVal = topValList[index%col] + space;
                    console.log(topVal);
                    $(this).parent().css({
                      'top': topVal + 'px',
                      'left': leftVal + 'px'
                    })
                    topValList[index%col] += $(this).height();
                  }
                });
              }
              
            })
        }
      }
    
    展开全文
  • 其实在前端的布局过程中经常会碰到同一个样式可以有很多种实现方法的。 在初期的时候也非常纠结于跟着视频教程里面的来写,后来发现也不一定。 但是在写了几个小的静态网页,经过自己总结之后得到以下几个小tip: ...
  • 这是我写的练习, 1.发现当浏览器宽度比较小的时候都正常,当浏览器完全打开的时候nav错位。 2.把 类nav的overflow :hidden 关闭 搜索栏错位 对于第一个问题完全没头绪,猜测与float和width有关 ...
  • 2、padding和margin的区别:简单来说padding就是一个盒子内的内容距离盒子边框的距离,margin是盒子本身距离其他盒子之间的距离。border是盒子本身的边框。 3、下划线:text-decoration:underline属性,...
  • 一个完整的网页,是标准流、浮动、定位一起完成布局的,三者都有自己专门的用法。 标准流 可以让盒子上下排列喝着左右排列,垂直的块级盒子显示就用标准流布局。 浮动 可以让多个块级元素一行显示或者左右对齐盒子...
  • 2.图片高度未知,这个布局比较难实现。一般我是用js做的。 水平居中:同上,在图片的css中加 dispaly:block;margin:0 auto; 垂直居中:用js算出(div的高度-图片的高度)/2,得到margin-top值赋给它。   ...
  • 我们在网页布局中常用到margin: 0px; padding: 0px; 但是在大型的网站布局中通常不这样写通常是按下面这种方式。 ul, li, ol, dl, dt, dd, div, p, span, h1, h2, h3, h4, h5, h6, a { padding: 0px; margin: 0...
  • 如何安全的布局文字压线居中,横线带修饰符时又该如何操作。
  • ![图片说明](https://img-ask.csdn.net/upload/201508/06/1438827463_541030.png) 网页上只能显示屏幕大小的区域,其他区域显示为空白,这是怎么回事,css写错了啊
  • 矛盾出来了,像我们这些小作坊,基本都是设计布局一人搞定。甚至还有加后台程序的。假设设计的时候考虑布局了,我们都有这个能力进行调整。但像大公司,分工严格的情况下,如果设计师不懂css不会布局。或者理解有误...
  • 网页布局心得

    2012-09-03 09:03:06
    关于网页布局心得( www.dayday28.com) 做的事情重复的次数多了,总会发现那么点乐趣和自己的一点心得和见解。 下面我就分享下我在网页布局中是如何避免一些不必要的麻烦。 1.除了父级元素定义宽度外,...
  • 我想请问大家,现在的html+css布局主要是用什么呢,是盒模型还是定位啊?
  • 网页布局之Div vs Table

    2014-07-09 09:55:46
    关于网页布局,大体上可以分为两种,一种是使用table布局,另一种使用div布局,很多人说现在主流的网页布局是div+css。那么div和table布局究竟有那些联系和区别呢?我们又该如何进行网页布局呢?   下面对这两种...
  • 问题描述:例如:我有一个div 800*800 ;height:800px;"> ;height:200px;float:left">第一个DIV ;height:400px;float:left">第二个DIV ...--问题:我要怎么样让第三四个DIV紧挨到第一个DIV下,而不是以前面DIV的最高...
  • 其实,要想控制好层的绝对定位,只要理解CSS中关于定位(position)的定义,一切就会变得轻松简单。CSS中关于定位(position)是这样定义的:定位(position)允许用户精确定义元素框出现的相对位置,可以相对于它...
  • 【摘 要】本文介绍关于网页布局的主题文章,例如:如何消除任意缩放浏览器窗口对网页的影响,让网页居中,网页分辨率问题,定义固定大小的文字,让网页适应不同的浏览器。  第一种方法:做一个网页解决问题(长...
  • 网页布局之Div vs Table (1)

    千次阅读 热门讨论 2012-03-13 10:56:42
    关于网页布局,大体上可以分为两种,一种是使用table布局,另一种使用div布局,很多人说现在主流的网页布局是div+css。那么div和table布局究竟有那些联系和区别呢?我们又该如何进行网页布局呢? 下面对这两种网页...
  • 现在总结下关于网页布局及样式的一些个人浅见。 好了,废话不多说,开写。 ================================================== 1、HTML标签: HTML是超文本标记语言,顾名思义是以标记的形式布局网
  • 关于网页设计的布局常用的设计布局分为:•1. “国”字型布局•2. “T”字型布局•3. 标题正文型布局•4. 左右框架布局•5. 变化布局1.“国”字型布局规律:左上部和中上部为【最佳视域】 网站logo,商品名,主题等...
  • 一、用class_name方式写类名。 以前喜欢用class-name写,不过好像两样也没什么差别。但我比较反对用className写类名,因为始终对浏览器大小写敏感的问题抱有怀疑态度。但是id我会写成驼峰式,理由见下一条。...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,156
精华内容 462
关键字:

关于网页布局