二、Holy grail(圣杯布局) 圣杯布局,不用我多说,想必每个前端人都做过这样的页面结构,如下图所示 HTML部分 <div class="container"> <!-- 顶部 --> <header> ... </header> <main class="container__main"> <!-- 左边导航 --> <aside class="container__left">...</aside> <!-- 中部 -->...
三列水平布局,如果列的宽度都是固定的,实现方式与上面两列布局相似,使用浮动即可达到效果。 html代码: <div class="container"> <div class="leftbox">左侧列</div> <div class="midbox">中间列</div> <div class="rightbox">右侧列</div> </div> css部分代码: .leftbox { width: 300px; float: ...
DIV全称 division意为“区块、分割”,DIV标签是一个无意义的容器标签,用于将页面划分出不同的区域。通过DIV将复杂的页面进行细分块,可以将问题细分一个一个解决,所以通过DIV将页面分块是一个关键的工作,也是决定最终效果与质量的前提。 css CSS (Cascading Style Sheet),中文翻译为层叠样式表,是用于控制网页样式并...
doctype html><html><head><meta charset="utf-8"><title>淘宝助手网</title><style>#top{ width:1200px; height: auto; margin:0 auto; color:#FFF;}#logo{ width:100%; height:100px; background: #003; }</style></head><body> <div id="top"> <div id="logo">店招</div> <div id...
用div将页面划分这是对网站页面排版第一步,网页整体框架确定后才能进行下一步。主要是用div划分出各个内容区域,以最简单的页面框架为例,页面一般有banner、主体内容、菜单主导航、页面底部(footer又叫脚注)几个部分构成,每个部分分别由自己的id来标识。如图所示: ...
上中下结构为常见布局结构,一般普通(企业网站)网页我们可以大致分为上(头部)、中(内容区)、下(底部版权)组成。而这其实是由最简单上下结构CSS布局演变而成,只不过多了一个DIV层结构而且,本质布局方法技巧不变。 一、主要思维 - TOP 不管多少个上下结构或单一结构,一般主体内容都是居中的,这个使用就需要使用css ...
下面我们就开始一步一步使用 DIV+CSS 进行网页 布局设计吧。 所有的设计第一步就是构思,构思好了,一般来说还需要用 PhotoShop 或 FireWorks(以 下简称 PS 或 FW)等图片处理软件将需要制作的界面布局简单的构画出来,以下是我构思 好的界面布局图。 下面,我们需要根据构思图来规划一下页面的布局,仔细分析一下该...
DIV+CSS布局 回顾两个思考问题: 1、div设置浮动后为什么会覆盖后面的div? 2、为什么要清除浮动? 一、DIV+CSS网页布局案例 图片说明:网页可以看成是一个个“盒子”组成的。由上图可以看出,页面分为上(网站导航)、中(主要部分)、右,这些板块组成,就像一个个的盒子,这些“盒子”中放置着...
2.结合HTML5的语义化标签,使用DIV+CSS网页布局技术设计一个个人博客页面。要求:(1)header标签定义页面头部区;nav标签定义导航区;div标签定义中部的内容区块,其中左边用section标签嵌套两篇article文章区,每篇文章区应含有头部的标题区、段落内容和页脚;右边用aside设计侧栏;底部用footer标签定义版权信息。如下图所示。
01 DIV+CSS 固定页面布局 本文讲解使用DIV+CSS布局最基本的内容,读完本文你讲会使用DIV+CSS进行简单的页面布局。 DIV+CSS布局中主要CSS属性介绍: Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Float属性可以实现一行显示多个div的功能,最直...