欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
您的位置:DIVCSS5首页 > DIV+CSS实例 >

css+div网页布局

 div+css排版是最新的网页排版理念,完全有别旧的排版方式(比如说table排版)。首先在页面整体上进行div标签划分内容区域,然后再用css进行定位,最后再对相应的区域添加内容。div+css这种排版十分简单,而且相对容易操作。下面为大家介绍css+div布局方法。

1、用div将页面划分

用div将页面划分这是对网站页面排版第一步,网页整体框架确定后才能进行下一步。主要是用div划分出各个内容区域,以最简单的页面框架为例,页面一般有banner、主体内容、菜单主导航、页面底部(footer又叫脚注)几个部分构成,每个部分分别由自己的id来标识。如图所示:

成为css+div网页布局高手只需三步,新手和高手通用!

 

2.设计各内容块的位置

页面内容确定后,则需要根据内容本身去考虑夜班的版型,例如菜单、双栏、左右中,一般小型网站采用都是两栏,大型网站和一些门户网站大都使用左中右三栏,一般是建议使用两栏。等内容块确定后就可以使用css直接定位了。

成为css+div网页布局高手只需三步,新手和高手通用!

 

3、用css定位

把页面框架确定后就可以css对各个设计的内容块进行定位,然后对各个块进行整体规划,最后再添加内容。网页带入如下

成为css+div网页布局高手只需三步,新手和高手通用!

 

网页效果

成为css+div网页布局高手只需三步,新手和高手通用!

 

上面的排版是比较简单的,用了两次浮动(float)定位、5次居中对齐、1次清除浮动。banner区域一般放置图片,导航放置都是链接可以直接放a标签或者是ul标签、h2标签套用a标签,网站主体内容一般放置,链接(ul或者ol标签套用a标签)、图片、内容摘要(p标签套用a标签)。最后给大家留一个作业上面的代码最少可以精简3处,你能找出来几处吗?

关于css+div布局方法先聊到这,有兴趣可以自己动手实践一下。

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/shili/s50798.shtml

我要分享到:

必备CSS教程 Essential CSS Tutorials

必备HTML基础教程 Essential HTML Tutorials

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
CSS教程文章修订日期:2018-08-26 07:17 原创:DIVCSS5
本文www.divcss5.com DIVCSS5版权所有。