div css 登录页面布局,DIV+CSS页面布局

页面布局设计

一、三行模式或三列模式

特点：把整个页面水平、垂直分成三个区域。

三行模式：将页面分成头部、主体及页脚三部分

三列模式：将页面分成左、中、右三个部分

在CSS文件里：

1.三行模式代码

#header{ width:100%; height:120px; background:#223344;}

#main{ widrh:100%; height:500px; background:#553344;}

#footer{ width:100%; height:40px; background:#993344;}

2.三列模式代码

#left{ width:30%; height:700px;background:#223344; float:left;}

#center{ widrh:50%; height:700px; background:#553344;float:left;}

#fright{ width:20%; height:700px; background:#993344;float:left;}

二、三行两列、三行三列模式

特点：先将整个页面水平分成三个区域，再将中间区域分成两列或三列。

三行两列模式：

1.DIV结构

header

left

right

footer

2.CSS结构

#header{ width:100%; height:120px; background:#99ff00;}

#main{ widrh:100%; height:400px; background:#99ff99;}

#left{ width:30%; height:100%;float:left; background:#999999;}

#fright{ width:70%; height:100%; float:left; background:#553344;}

#footer{ clear:both; width:100%; height:80px; background:#66ff66;}

三行三列模式：

1.DIV结构

header

left

center

right

footer

2.CSS结构

#header{ width:100%; height:120px; background:#99ff00;}

#main{ widrh:100%; height:400px; background:#99ff99;}

#left{ width:30%; height:100%;float:left; background:#999999;}

#center{ width:40%; height:100%;float:left; background:#FF3344;}

#fright{ width:30%; height:100%; float:left; background:#553344;}

#footer{ clear:both; width:100%; height:80px; background:#99ff66;}

标签：100%,float,height,width,background,DIV,left,CSS,页面

来源： https://www.cnblogs.com/gly1120/p/7739172.html

div css 登录页面布局,DIV+CSS页面布局相关推荐

Div+CSS布局入门教程(五) 页面制作-用好border和clear 附加：1.DIV+CSS设计原则 2.DIV+CSS中标签ul ol li dl dt dd用法
这一节里面,主要就是想告诉大家如何使用好border和clear这两个属性. 首先,如果你曾用过table制作网页,你就应该知道,如果要在表格中绘制一条虚线该如何做,那需要制作一个很小的图片来填充,其 ...
DIV+CSS:页脚永远保持在页面底部
页脚永远保持在页面底部有时候,我们用CSS创建一个高度自适应布局,如何保证页脚(footer)在内容不超过一屏的情况下始终保持在布局最下方是一个比较头疼的事.我看过一些利用绝对定位的例子,但总感觉不 ...
web页面打印用Css 打印指定div 指定位置分页
用Css指定打印标签有两个地方需要注意: 1.CSS的@media print {}里面添加不需要打印(display:none) 和要打印(display:block) 的DIV: 2.如果页面 ...
仿淘宝电商官网静态页面（HTML+CSS+JS）+ 常见布局解析，学会如果做是关键！
仿淘宝电商官网静态页面作为一个前端开发,布局+样式已经成为了必备的技能,你做得好是应该的,做的不好可以原谅,但当你意识到不足时,补足它这是我刚"入坑"的时候写的Demo,因为当 ...
DIV+CSS搭建（淘宝首页）布局图
制作网页时,构建页面布局图很重要.布局前的结构划分避免造成混乱. 下面的代码只有DIV+CSS的网页结构布局.没有将最终的淘宝静态页面的代码放上去,只有布局图和最终页面的比较图. 搭建的布局图与最终效 ...
html div css盒子,CSS盒子模式一(DIV布局快速入门)_html/css_WEB-ITnose
中心最新招了几十个人,我也成小旋风了,看来这个山头还得呆几天.毕竟有几十口子人哪,咋能撒手不管啊!我就先发个贴热热身!也希望前几届的师哥师姐多多指教. 我们在网页设计中常听的属性名:内容(conte ...
彻底弄懂CSS盒子模式一(DIV布局快速入门)
彻底弄懂CSS盒子模式一(DIV布局快速入门) 作者:唐国辉实例网页网址:http://www.blueidea.com/articleimg/2007/03/4545/css2.ht ...
用html和css语言编写一个登录页面,简单css登录页面
CSS布局HTML小编今天和大家分享一个简单的登录界面CSS代码登陆微信登陆QQ登陆注册 #zuo{ width: 500px; height: 540px; background: whi ...
html怎么样做出两列布局页面,HTML+CSS实现两栏和三栏布局
三栏布局三列自适应布局通常指两边定宽,中间部分宽度自适应.这里主要分为两大类,一类是基于position传统的实现,一类是基于css3新特性弹性盒模型布局实现. 基于传统的position进行布局 ...
HTML+CSS第十课：常见的3种网页布局方式：表格布局、DIV+CSS布局、框架布局
知识点:网页布局的方式 1.网页布局常见的页面布局方式:表格布局.DIV+CSS布局.框架布局. 表格布局:用来显示较多的数据,如OA系统.ERP系统或CRM系统.(一般用在局部) DIV+CSS布 ...

div css 登录页面布局,DIV+CSS页面布局

div css 登录页面布局,DIV+CSS页面布局相关推荐

最新文章

热门文章