`

关于页面动态布局实现方案(一)

 
阅读更多

 1.关于Web页面动态布局的简单声明

(1)此处介绍的动态布局类似于QQ空间或者Google首页的自定义页面

(2)每个用户可以定制自己的页面,可以自由选择布局方式,自由选择模块

 

2.关于布局和模块的声明

(1)布局是服务端定制的,比如左分栏布局、右分栏布局、通栏布局等

(2)模块也是服务端定制的,用户只能从这些模块中选择,比如QQ空间里面的日志模块、视频模块等

(3)布局和模块的样式可以开放给第三方开发者,但是布局和模块的功能不能开放                             

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 


 

通过以上图示说明,可知用户定制页面的过程:先选择布局,然后在布局里面添加模块

可以看出来,布局包含模块,但并非所有模块都能随意添加到某种布局中

比如:轮播广告模块,就不能添加到“左分栏”的左侧。很显然,宽度没法适应 

以下通过图示说明用户定制的某个页面

 

3.其他说明

(1)页面用户其实也可以创建多个,这根布局与模块的关系一个道理

(2)布局和模块,可以作为类似于“字典”信息一样维护到后台 

  • 大小: 16.7 KB
  • 大小: 23.3 KB
  • 大小: 17 KB
分享到:
评论

相关推荐

    JAVA WEB JSF 很好的设计参考方案 页面布局方案

    在探讨JAVA WEB JSF的设计参考方案以及页面布局策略时,我们深入分析了使用JSF进行高效页面设计的方法,尤其关注了两种主流布局方案:利用JSP的`include`功能和集成Tiles框架。这两种方法旨在解决Web应用中页面设计...

    40种网页布局源代码

    "40种网页布局源代码"是一个集合,提供了40个不同的CSS布局方案,对于初学者来说,这是一个非常宝贵的资源,可以帮助他们理解并掌握CSS在网页布局中的应用。 CSS(层叠样式表)是一种样式语言,用于定义HTML或XML...

    js中flexible.js实现淘宝弹性布局方案.docx

    在前端开发中,面对不同设备的屏幕尺寸和像素密度,淘宝提出了一种名为“flexible”的布局方案,主要通过灵活的单位(如rem)和JavaScript库flexible.js来实现响应式布局。这种方法能够确保网页在不同设备上呈现出...

    js实现动态UI的布局

    在JavaScript中实现动态UI布局是一项常见的任务,尤其在现代网页应用和前端开发中。动态UI布局允许用户界面根据数据变化、屏幕尺寸或者用户交互实时更新其结构和样式。本篇文章将深入探讨如何利用JavaScript实现这一...

    div页面框架布局

    总结来说,"div页面框架布局"是一个关于HTML div元素和EasyUI布局组件的技术主题,涉及了网页布局的基本概念、EasyUI的使用方法以及跨浏览器兼容性的处理。通过对这个主题的深入理解和实践,开发者可以构建出既美观...

    PC、移动端自适应等比缩放布局方案

    本文将详细介绍一种适用于PC端大屏监控及移动端布局的解决方案——REM与VW布局相结合的方式。 #### 布局历史概述 - **静态布局**:早期网页设计中普遍采用的方法,使用固定单位如`px`来指定元素的大小与位置,但在...

    用流式布局实现一个JD.zip

    在“用流式布局实现一个JD.zip”项目中,我们可能涉及到以下关键知识点: 1. **流式布局的概念**:流式布局是一种动态调整元素宽度和位置的布局模式,它不依赖固定的像素值,而是采用百分比或者其他相对单位(如vw...

    页面布局,实现footer永远在底部

    在网页设计中,保持页脚始终位于页面底部是一项常见的需求,尤其在内容量不固定或者内容较少时,确保页脚不会因为页面内容不足而上移,这样可以提供更好的用户体验。本话题将深入探讨如何通过HTML和CSS技术实现...

    [CSS]不用hack的css动态布局方案,兼容主流浏览器

    在CSS世界中,实现动态布局是一项挑战,尤其是在需要兼容各种主流浏览器的情况下。传统的CSS布局方法往往需要使用一些“hack”技巧来解决浏览器之间的差异,但这些技巧可能导致代码维护困难,可读性差,且不易于扩展...

    优秀的页面布局图片

    本文将深入探讨“页面设计”这一主题,特别关注国内主流网页和应用的设计布局,如QQ邮箱、谷歌页面以及360页面。 首先,页面布局是指在网页或应用中对各种元素(如文本、图像、按钮等)进行有组织的安排,以创建...

    Android 瀑布流 布局实现

    瀑布流布局,又称为瀑布流式布局或者无限滚动布局,是一种常见的移动应用和网页设计布局方式,尤其在图片展示和电商应用中非常流行。它的特点在于,内容以多列的形式呈现,每一列中的元素高度不一,使得整体视觉效果...

    等高响应布局实现

    等高响应布局是一种网页设计技术,它旨在确保页面上的元素,如图片或内容块,能够根据屏幕尺寸自动调整高度,保持一致的视觉效果,无论在桌面还是移动设备上浏览。这种布局方式尤其适用于展示类网站,例如摄影展览,...

    CSS3自适应浏览器页面框架布局代码

    总的来说,这个“CSS3自适应浏览器页面框架布局代码”资源提供了一个简单但实用的起点,帮助开发者快速构建适应各种设备的网页布局。通过学习和应用这些技术,开发者可以创造出既美观又具有高度适应性的现代网页。...

    Tangram-天猫导购页面动态化方案与实践.pdf

    Tangram 是一款天猫导购页面动态化方案,旨在提供一个灵活、高效、可扩展的页面动态化解决方案。该方案的核心思想是将页面分拆成多个组件,每个组件都是一个独立的业务单元,可以独立开发、测试和维护。组件之间通过...

    天猫导购页面动态化方案与实践

    天猫导购页面的动态化方案是关于如何在网页设计中运用动态元素来吸引用户,提高用户体验,并且实现更加灵活的内容管理。动态化方案涉及到的技术能够根据用户的浏览习惯、购买行为等数据动态调整页面布局和内容展示。...

    各种常见布局CSS实现知名网站布局分析相关阅读推荐

    在网页设计领域,CSS(Cascading Style Sheets)起着至关重要的作用,它负责定义页面的样式和布局。本文将深入探讨各种常见的CSS布局技术,并分析知名网站如何利用这些技术来构建他们的页面布局。同时,也会推荐一些...

    生成基本的CSS网格代码来进行动态布局

    总之,CSS Grid为现代网页布局提供了强大的解决方案。结合JavaScript,我们可以根据用户需求或动态条件生成和调整网格布局,从而创建出适应性强且易于维护的网页设计。通过学习和熟练掌握CSS Grid,开发者能够更好地...

    Yoga是一个实现Flexbox的跨平台布局引擎

    Flexbox布局是一种先进的网页和应用布局模式,旨在解决传统的基于流式、网格或定位的布局方式在复杂布局时遇到的问题。Flexbox允许元素在一个容器中灵活地调整大小和位置,以适应各种屏幕尺寸和方向。Yoga的出现,将...

    可伸缩布局方案.zip

    这个“可伸缩布局方案.zip”压缩包似乎包含了一个关于实现这种布局方法的资源集合,主要涉及到JavaScript技术。下面将详细讨论相关知识点。 首先,我们来看“可伸缩布局”这个概念。在现代网页设计中,可伸缩布局是...

    css + div网页布局终极解决方案

    【CSS + Div 网页布局终极解决方案】 ...总之,CSS + Div 的网页布局提供了一种强大的工具,能够实现灵活多变的页面设计。通过深入理解和实践,设计师可以更好地掌控网页的布局,创造出符合需求的优秀用户体验。

Global site tag (gtag.js) - Google Analytics