1. “T”结构布局形式。所谓“T”结构,就是指页面顶部为横条网站标志+广告条,下方左面为主菜单,右面显示内容的布局,整体效果类似英文字母“T”,所以称之为“T,形布局。这是网页设计中用得最广泛的一种布局方式。这种布局的优点是页面结构清晰,主次分明,是初学者最容易上手的布局方法。缺点是规矩呆板,如果不注意细节色彩,很容易让人”看之无味“

  2.  ”口“型布局。这是一个象形的说法,就是页面一般上下各有一个广告条,左面是主菜单,右面放友情链接等,中间是主要内容。这种布局的优点是充分利用版面,信息量大。缺点是页面拥挤,不够灵活

  3. 对称对比布局。顾名思义,采取左右或者上下对称的布局,一半深色一半浅色,一般用于设计型站点。优点是视觉冲击力强,缺点是很难将两部分有机地结合起来

  4. POP布局。POP引自广告术语,就是指页面布局像一张宣传海报,以一张精美图片作为页面的设计中心。常用于时尚类站点。优点显而易见:漂亮吸引人。缺点就是速度慢。作为版面布局,还是值得借鉴的。

  5. 国型布局。国型布局也称为同型布局,是一些大型网站喜欢使用的布局类型。最上面是网站的标题以及横幅广告条,接下来是网站的主要内寄,左右分列一些小条内容,中问是主要部分,与左右一起罗列到底,最下方是网站的一些基本信息、联系方式、版权声明等。这种布局通常用于主页的设计,其主要优点是页面容纳内容很多,信息量大。
  6. 标题正文型布局。这种布局的最上方是标题或广告等内容,下面是正文。通常文章页面或注册页面采用此种布局,其特点是简洁明快,干扰信息少,较为正规。

DIV+CSS架构网站的7种版面布局形式的更多相关文章

  1. DIV+CSS布局网站基本框架

    html代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

  2. 【使用DIV+CSS重写网站首页案例】步骤分析与代码实现

    使用DIV+CSS重写网站首页案例 步骤分析: 第一步:先定义一个大的 div(整个页面),然后嵌套 8 个小的 div(共八行): 第二步:(第一行)在第一个 div 里面嵌套 3 个小的 div: ...

  3. 使用DIV+CSS布局网站的优点和缺陷

    随着WEB2.0标准化设计理念的普及,国内很多大型门户网站已经纷纷采用DIV+CSS制作方法,从实际应用情况来看,此种方法绝对好于表格制作页面的方法. 如今大部分网站仍然采用表格嵌套内容的方式来制作网 ...

  4. 【使用DIV+CSS重写网站首页案例】CSS引入方式

    CSS引入方式(3种) *就近原则:行内引入可以覆盖内部引入的效果 内部引入: *  type="text/css"      为默认可以不写 例子: <!DOCTYPE h ...

  5. 【使用DIV+CSS重写网站首页案例】CSS选择器

    使用表格<table></table>对网站首页进行布局有缺陷,不能拖动版块,不灵活. DIV Div是一个html的标签,单独使用没有意义,必须结合CSS使用: 是一个块级元 ...

  6. 【使用DIV+CSS重写网站首页案例】CSS浮动

    CSS浮动: 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边缘为止 由于浮动框不在文件的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样. 选择器之 float属性 ...

  7. 【使用DIV+CSS重写网站首页案例】CSS盒子模型

    CSS盒子模型 取值问题: 默认情况,padding.border.margin都为0: 设定区域内容的width和height,是区域内容框的尺寸: 如果设定padding/border/margi ...

  8. 浏览器对DIV+CSS兼容性问题大总结

    浏览器对DIV+CSS兼容性问题大总结 接触DIV+CSS架构已经快两年了,个人觉得css入门不难,但要学精并非一朝一夕的,现在大部分网络公司都比较主张用div+css来布局,这就面临着一个比较难的问 ...

  9. div+css通用兼容性代码整理

    一.Div+css通用兼容性代码 你可以在css开头加入 *html{padding:0px} <style> *html{padding:0px} /* Clear Fix */ .cl ...

随机推荐

  1. IOS开发基础环境搭建

    一.目的 本文的目的是windows下IOS开发基础环境搭建做了对应的介绍,大家可根据文档步骤进行mac环境部署: 二.安装虚拟机 下载虚拟机安装文件绿色版,点击如下文件安装 获取安装包:       ...

  2. Python中字典和集合

    Python中字典和集合 映射类型: 表示一个任意对象的集合,且可以通过另一个几乎是任意键值的集合进行索引 与序列不同,映射是无序的,通过键进行索引 任何不可变对象都可用作字典的键,如字符串.数字.元 ...

  3. 高级Java程序员的技术进阶之路

      据不完全统计,截至目前(2017.07)为止,中国Java程序员的数量已经超过了100万.而且,随着IT培训业的持续发展和大量的应届毕业生进入社会,Java程序员面临的竞争压力越来越大.那么,作为 ...

  4. Linux之虚拟机网络配置

    一般安装完虚拟机后,VMware会为虚拟机在网络连接配置为“NAT模式(N):用于共享主机的IP地址”. 这种模式下虚拟机会共享主机的网络环境,主机可以访问外网那么虚拟机可以,主机可以(哪怕是拨VPN ...

  5. 如何用webpack实现自动化的前端构建工作流

    什么是自动化的前端构建流? 1. 自动补全css私有前缀,自动转化less\sass为css,自动转化es6\vue\jsx语法为js,自动打包小图片为base64以减少http请求,自动给js,cs ...

  6. Postmessage运用-往飞信添加信息

    1.定位窗口 fHwnd:=FindWindow(nil,'短信中心'); then begin showmessage('请先登录飞信2013短信中心'); exit; end; { applica ...

  7. python cookbook第三版学习笔记十:类和对象(一)

    类和对象: 我们经常会对打印一个对象来得到对象的某些信息. class pair:     def __init__(self,x,y):         self.x=x         self. ...

  8. 二维坐标点排序(JavaScript)

    今天给大家分享下最近web项目中出现的一个技术难点问题--坐标排序: 如下图所示,要求在前端页面上按顺序将下面5个模块的坐标依次保存至数据库 现在已知信息如下: 1.每个模块分别为一个div 2.每个 ...

  9. Android - 关于设备版本号

    设备信息可以在Settings - About 里看到 最近想改机器的build number,找到了 build/core/Makefile 里的定义 # Display parameters sh ...

  10. 数位dp模板 [dp][数位dp]

    现在才想到要学数位dp,我是不是很弱 答案是肯定的 以一道自己瞎掰的题为模板 //题: //输入数字n //从0枚举到n,计算这n+1个数中含有两位数a的数的个数 //如12930含有两位数93 #i ...