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. 【summary】JQuery 相关css、ajax、数据操作函数或方法

    总结一下JQuery常用的函数方法,更加系统的整理一下. JQuery遍历的一些函数: 函数 描述 .add() 将元素添加到匹配元素的集合中. .andSelf() 把堆栈中之前的元素集添加到当前集 ...

  2. 2238"回文字串"报告

    题目描述: 回文串,就是从前往后和从后往前看都是一样的字符串.那么现在给你一个字符串,请你找出该字符串中,长度最大的一个回文子串. 输入描述: 有且仅有一个仅包含小写字母的字符串,保证其长度不超过50 ...

  3. Bootstrap选项卡

    前面的话 选项卡Tabs是Web中一种非常常用的功能.用户点击对菜单项,能切换出对应的内容.本文将详细介绍Bootstrap选项卡 基本用法 Bootstrap框架中的选项卡主要有两部分内容组成: 1 ...

  4. 快速学习springMVC框架原理

    一.通过导图的方法快速去理解springmvc的原理 二.架构流程. 1. 用户发送请求至前端控制器DispatcherServlet 2. DispatcherServlet收到请求调用Handle ...

  5. Codeforces Round #371 (Div. 2) 转换数字

    C. Sonya and Queries time limit per test 1 second memory limit per test 256 megabytes input standard ...

  6. 虚拟硬盘格式vdi、vhd、vmdk相互转换

    Windows7的引导程序能够引导vhd格式的虚拟硬盘,而VirtualBox创建的虚拟硬盘文件是vdi格式的,怎么办呢? 以前要借助其他软件才能实现,但是VirtualBox早就悄悄为我们带来了一个 ...

  7. Python Django之路与您同行

    大家好,我是TT,互联网测试行业多年,没有牛逼的背景,也没有什么可炫耀的,唯独比他人更努力,在职场打拼.遇到过的坑,走过的弯路,愿意与大家分享,分享自己的经验,少走弯路.首发于个人公众号[测试架构师] ...

  8. Ubuntu tty中文字符乱码

    默认的tty只能显示一个字节,我们可以用setfont命令去改tty字体,但仅仅局限在一个字节内,不支持UTF-8多字节,所以我们就没办法使用汉字.但是我们可以使用FbTerm啊!FbTerm是支持中 ...

  9. 把int型非负数转换为英文

    数字转换为英文 输入为int型非负数,最大值为2^31 - 1 = 2 147 483 647 输出为String英文,最大输出为Two Billion One Hundred Forty Seven ...

  10. hdu_1506:Largest Rectangle in a Histogram 【单调栈】

    题目链接 对栈的一种灵活运用吧算是,希望我的注释写的足够清晰.. #include<bits/stdc++.h> using namespace std; typedef long lon ...