div+css网页如何布局?div+css网页布局方法

宜家博客
35669
文章
0
评论
2019年8月12日16:45:06 评论 780字阅读2分36秒

本篇文章给大家带来的内容是关于div+css网页如何布局?div+css网页布局方法,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

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

1、用div将页面划分

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

div+css网页如何布局?div+css网页布局方法

2.设计各内容块的位置

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

div+css网页如何布局?div+css网页布局方法

3、用css定位

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

排版是比较简单的,用了两次浮动(float)定位、5次居中对齐、1次清除浮动。banner区域一般放置图片,导航放置都是链接可以直接放a标签或者是ul标签、h2标签套用a标签,网站主体内容一般放置,链接(ul或者ol标签套用a标签)、图片、内容摘要(p标签套用a标签)。

以上就是对div+css网页如何布局?div+css网页布局方法的全部介绍,如果您想了解更多有关CSS3教程,请关注PHP中文网。

以上就是div+css网页如何布局?div+css网页布局方法的详细内容,更多请关注css教程其它相关文章!

weinxin
欢迎加入中国站长博客之家
本站的所有资源都会上传分享到博客之家,希望大家互相学习交流进步。
  • 版权声明: 发表于 2019年8月12日16:45:06
  • 转载注明:https://www.yjro.com/316459.html
纯css实现树形结构 css教程

纯css实现树形结构

这次给大家带来纯css实现树形结构,纯css实现树形结构的注意事项有哪些,下面就是实战案例,一起来看一下。 本文我给大家介绍如何使用CSS和HTML就可以将一个多级无序列表的节点展现成树状结构。树状结...
浅析CSS边框属性:宽度&样式&边框等 css教程

浅析CSS边框属性:宽度&样式&边框等

这篇文章给大家介绍的内容是关于浅析CSS边框属性:宽度&样式&边框等,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 定义和用法 围绕元素内容和内边距的一条或多条线。 ...
给图片在博客中添加滤镜效果_CSS/HTML css教程

给图片在博客中添加滤镜效果_CSS/HTML

配合同事文章的技巧,用自己的博客来测试一下。首先插入一张测试图片: 终极技巧之图片篇:为图片添加滤镜效果纯文字博客看上去会显得很枯燥,适当的配图能够让页面更美观,也能更好地表达自己的思想。那么如何为图...
CSS 各种定位(position)方式的区别 css教程

CSS 各种定位(position)方式的区别

static:静态定位是position的默认值,元素框正常生成,也就是没有定位时的正常显示。   relative:相对定位   用法一:元素相对自身的原位置偏移某个距离,但是原本的空间依旧保留,表...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: