DIV+CSS架构网站的7种版面布局形式
“T”结构布局形式。所谓“T”结构,就是指页面顶部为横条网站标志+广告条,下方左面为主菜单,右面显示内容的布局,整体效果类似英文字母“T”,所以称之为“T,形布局。这是网页设计中用得最广泛的一种布局方式。这种布局的优点是页面结构清晰,主次分明,是初学者最容易上手的布局方法。缺点是规矩呆板,如果不注意细节色彩,很容易让人”看之无味“
”口“型布局。这是一个象形的说法,就是页面一般上下各有一个广告条,左面是主菜单,右面放友情链接等,中间是主要内容。这种布局的优点是充分利用版面,信息量大。缺点是页面拥挤,不够灵活
对称对比布局。顾名思义,采取左右或者上下对称的布局,一半深色一半浅色,一般用于设计型站点。优点是视觉冲击力强,缺点是很难将两部分有机地结合起来
POP布局。POP引自广告术语,就是指页面布局像一张宣传海报,以一张精美图片作为页面的设计中心。常用于时尚类站点。优点显而易见:漂亮吸引人。缺点就是速度慢。作为版面布局,还是值得借鉴的。
- 国型布局。国型布局也称为同型布局,是一些大型网站喜欢使用的布局类型。最上面是网站的标题以及横幅广告条,接下来是网站的主要内寄,左右分列一些小条内容,中问是主要部分,与左右一起罗列到底,最下方是网站的一些基本信息、联系方式、版权声明等。这种布局通常用于主页的设计,其主要优点是页面容纳内容很多,信息量大。
- 标题正文型布局。这种布局的最上方是标题或广告等内容,下面是正文。通常文章页面或注册页面采用此种布局,其特点是简洁明快,干扰信息少,较为正规。
DIV+CSS架构网站的7种版面布局形式的更多相关文章
- DIV+CSS布局网站基本框架
html代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
- 【使用DIV+CSS重写网站首页案例】步骤分析与代码实现
使用DIV+CSS重写网站首页案例 步骤分析: 第一步:先定义一个大的 div(整个页面),然后嵌套 8 个小的 div(共八行): 第二步:(第一行)在第一个 div 里面嵌套 3 个小的 div: ...
- 使用DIV+CSS布局网站的优点和缺陷
随着WEB2.0标准化设计理念的普及,国内很多大型门户网站已经纷纷采用DIV+CSS制作方法,从实际应用情况来看,此种方法绝对好于表格制作页面的方法. 如今大部分网站仍然采用表格嵌套内容的方式来制作网 ...
- 【使用DIV+CSS重写网站首页案例】CSS引入方式
CSS引入方式(3种) *就近原则:行内引入可以覆盖内部引入的效果 内部引入: * type="text/css" 为默认可以不写 例子: <!DOCTYPE h ...
- 【使用DIV+CSS重写网站首页案例】CSS选择器
使用表格<table></table>对网站首页进行布局有缺陷,不能拖动版块,不灵活. DIV Div是一个html的标签,单独使用没有意义,必须结合CSS使用: 是一个块级元 ...
- 【使用DIV+CSS重写网站首页案例】CSS浮动
CSS浮动: 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边缘为止 由于浮动框不在文件的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样. 选择器之 float属性 ...
- 【使用DIV+CSS重写网站首页案例】CSS盒子模型
CSS盒子模型 取值问题: 默认情况,padding.border.margin都为0: 设定区域内容的width和height,是区域内容框的尺寸: 如果设定padding/border/margi ...
- 浏览器对DIV+CSS兼容性问题大总结
浏览器对DIV+CSS兼容性问题大总结 接触DIV+CSS架构已经快两年了,个人觉得css入门不难,但要学精并非一朝一夕的,现在大部分网络公司都比较主张用div+css来布局,这就面临着一个比较难的问 ...
- div+css通用兼容性代码整理
一.Div+css通用兼容性代码 你可以在css开头加入 *html{padding:0px} <style> *html{padding:0px} /* Clear Fix */ .cl ...
随机推荐
- 【总算解决了】A network-related or instance-specific error occurred while establishing a connection to SQL Server
给别人做的网站莫名其妙连接不上数据库.百度了好多,总算知道自己的错在哪了. 报 "A network-related or instance-specific error occurred ...
- APP测试点归纳
1.2测试周期 测试周期可按项目的开发周期来确定测试时间,一般测试时间为两三周(即 15个工作日), 根据项目情况以及版本质量可适当缩短或延长测试时间.正式测试前先向主管确认项目排期. 1.3测试资源 ...
- 算法设计与分析 上机题Mergesort
#include <iostream>using namespace std; #define N 100 int g_array[N]; //存放输入的数字static int ...
- PHP机器学习库php-ml的简单测试和使用
php-ml是一个使用PHP编写的机器学习库.虽然我们知道,python或者是C++提供了更多机器学习的库,但实际上,他们大多都略显复杂,配置起来让很多新手感到绝望.php-ml这个机器学习库虽然没有 ...
- jsp注册页面验证,easyui的jsp+js表单验证
1.1下面的代码是写在Js里面的,就直接写进去不用什么其他东西,这样一个表单验证就好了(1.2图) $.extend($.fn.validatebox.defaults.rules, { phone: ...
- POJ 2289 Jamie's Contact Groups / UVA 1345 Jamie's Contact Groups / ZOJ 2399 Jamie's Contact Groups / HDU 1699 Jamie's Contact Groups / SCU 1996 Jamie's Contact Groups (二分,二分图匹配)
POJ 2289 Jamie's Contact Groups / UVA 1345 Jamie's Contact Groups / ZOJ 2399 Jamie's Contact Groups ...
- pc端的企业网站(IT修真院test8)详解1-2
今天接着说test8的页面还原. 头部header和尾部footer 我一开始是想直接使用bootstrap的栅格系统来实现的.但是内容的定位出了不少麻烦. 那么就索性用原生html+css来还原页面 ...
- Django学习(九)---Templates过滤器及Django shell和Admin增强
一.Templates过滤器 过滤器属于django模板语言 修改模板中的变量,从而显示不同内容 {{ value | filter }} 举例:{{ list_nums | length}} ...
- Linux系统——运行级别
学习之前先了解下Linux系统的运行级别和其原理,博主使用的是Linux系统中的Redhat9.0版本,之后的学习也是基于这个系统版本. Linux系统的7个运行级别(runlevel) 运行级别0: ...
- 游戏里的动态阴影-ShadowMap实现原理
ShadowMap是比较流行的实时阴影实现方案,原理比较简单,但真正实现起来还是会遇到很多问题的,我这里主要记录下实现方式 先看效果 凹凸地形上也有阴影 实现原理 ShadowMap技术是从灯光空间用 ...