简单易懂,DIV+CSS架构网站的7种版面布局形式,一语道破

下面是我给大家整理的div+css架构网站的7种版面布局形式,有兴趣的同学可以去看看。

1.“T”结构布局形式。所谓“T”结构,就是指页面顶部为横条网站标志+广告条,下方左面为主菜单,右面显示内容的布局,整体效果类似英文字母“T”,所以称之为“T,形布局。这是网页设计中用得最广泛的一种布局方式。这种布局的优点是页面结构清晰,主次分明,是初学者最容易上手的布局方法。缺点是规矩呆板,如果不注意细节色彩,很容易让人”看之无味“

2.”口“型布局。这是一个象形的说法,就是页面一般上下各有一个广告条,左面是主菜单,右面放友情链接等,中间是主要内容。这种布局的优点是充分利用版面,信息量大。缺点是页面拥挤,不够灵活

3.对称对比布局。顾名思义,采取左右或者上下对称的布局,一半深色一半浅色,一般用于设计型站点。优点是视觉冲击力强,缺点是很难将两部分有机地结合起来

立即学习“前端免费学习笔记(深入)”;

4.POP布局。POP引自广告术语,就是指页面布局像一张宣传海报,以一张精美图片作为页面的设计中心。常用于时尚类站点。优点显而易见:漂亮吸引人。缺点就是速度慢。作为版面布局,还是值得借鉴的。

5.国型布局。国型布局也称为同型布局,是一些大型网站喜欢使用的布局类型。最上面是网站的标题以及横幅广告条,接下来是网站的主要内寄,左右分列一些小条内容,中问是主要部分,与左右一起罗列到底,最下方是网站的一些基本信息、联系方式、版权声明等。这种布局通常用于主页的设计,其主要优点是页面容纳内容很多,信息量大。

6.标题正文型布局。这种布局的最上方是标题或广告等内容,下面是正文。通常文章页面或注册页面采用此种布局,其特点是简洁明快,干扰信息少,较为正规。

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

详细解读页面布局之position定位

详细解读页面布局之position定位

详细解读页面布局之position定位

以上就是简单易懂,DIV+CSS架构网站的7种版面布局形式,一语道破的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2897539.html

(0)
上一篇 2025年3月10日 23:24:56
下一篇 2025年3月10日 23:25:09

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 详细为你讲解,DIV+CSS布局和TABLE布局的优缺点(经典)

    table布局是web早期css不存在的时候兴起的,是对table标签的不正规使用,table标签就是表格,是用来显示数据的,而不是用来布局网页的,虽然它有时候布局网页很简单。现在绝大多数的网站都是用div+css布局。这两种布局各有各的优…

    编程技术 2025年3月10日
    200
  • padding制作图片自适应布局(CSS百分比)

    css知识点:当padding/margin取形式为百分比的值时,无论是left/right,还是top/bottom,都是以父元素的width为参照物的! 一、CSS百分比padding都是相对宽度计算的 在默认的水平文档流方向下,CSS…

    2025年3月10日
    200
  • 如何使用源生css3实现圆环加载进度条

    这次给大家带来如何使用源生css3实现圆环加载进度条,使用源生css3实现圆环加载进度条的进度条有哪些,下面就是实战案例,一起来看一下。 效果图: 当时的要求是让进度条以扇形渐变的效果加载。我想了半天,好像只有用border-img来做渐变…

    2025年3月10日
    200
  • CSS 文本字体颜色设置方法(CSS color)

    这篇文章主要介绍了css 文本字体颜色设置方法(css color),需要的朋友可以参考下 一、认识CSS 颜色(CSS color) 这里要介绍的是网页设置颜色包含有哪些;网页颜色规定规范。 1、常用颜色地方包含:字体颜色、超链接颜色、网…

    2025年3月10日
    200
  • 用纯CSS实现禁止鼠标点击事件示例代码

    这篇文章介绍的是通过纯css实现禁止鼠标点击事件,比起javascript来更加灵活,有需要的可以参考学习。 JavaScript有一个preventDefault方法, 他可用以来取消事件的默认动作。比如取消打开链接,选择文本或拖放等。 …

    编程技术 2025年3月10日
    200
  • CSS实现带倒三角标记的WEB标准菜单效果代码

    这篇文章主要为大家介绍了css实现带倒三角标记的web标准菜单效果代码,通过纯css实现鼠标滑过呈现倒三角标记的显示效果,非常简单实用,需要的朋友可以参考下 本文实例讲述了CSS实现带倒三角标记的WEB标准菜单效果代码。分享给大家供大家参考…

    编程技术 2025年3月10日
    200
  • CSS实现带有小图片的LI图标列表菜单

    这篇文章主要为大家介绍了css实现带有小图片的li图标列表菜单,可实现css图标的正常显示及滑过、点击呈现不同颜色的功能,涉及css针对visited、hover及active等使用技巧,需要的朋友可以参考下 本文实例讲述了CSS实现带有小…

    2025年3月10日
    200
  • CSS实现页面九宫格布局的简单示范

    九宫格布局在制作一些web app时还是经常可以用到的,这里我们以一个大概的结构示例来作css实现页面九宫格布局的简单示范,不过需要注意ie6下的兼容性问题. 一、效果图: 三、布局二(各浏览器兼容性良好) 立即学习“前端免费学习笔记(深入…

    2025年3月10日
    200
  • CSS中百分比的问题解析

    这篇文章主要介绍了浅谈css中的百分比,在定义css样式的时候经常会用的 “%”这个长度单位,但是这个百分比到底是相对于谁的百分比呢 本文介绍了浅谈CSS中的百分比,分享给大家,具体如下: 结论: 标准流中的元素,看其属性有没有继承性。对于…

    2025年3月10日 编程技术
    200
  • CSS中层叠机制的解析

    这篇文章主要介绍了浅谈css层叠机制的相关资料,层叠机制可以解决作者(写代码的人),用户(浏览页面的人)和用户代理(一般指浏览器)的样式冲突,现在分享给大家,也给大家做个参考。 css中为什么要有层叠机制 因为在css中可能会有多个样式同时…

    编程技术 2025年3月10日
    200

发表回复

登录后才能评论