欢迎光临
我们一直在努力

网页布局基础

什么是网页布局

使用div+css布局网页是网页制作的基础,分为流式布局,浮动布局,绝对定位三种布局方式.

盒子模型

  1. 标准文档流是最常使用的一种页面布局方式之一,它的展现形式有自动居中一列布局,
  2. 其次是浮动布局,可参考腾讯首页,这个页面是典型的上中下结构,它的中间主体部分是由横向的两列排列组成。
  3. 最后是绝对定位布局案例,和浮动布局展现的效果很像,而它是使用绝对定位实现横向两列或多列布局。

W3C标准

由万维网指定的一系列标准,包括:

  1. 结构化标准语言(HTMLXML
  2. 表现标准语言(CSS
  3. 行为标准语言(DOMECMAScript
    那么w3c倡导的则是结构、样式、行为分离。

与其说这是一种行为,倒不如说是一种思想,在我们分析网页结构时,先别过多的被样式打扰,重点先放在html和语义化上。先按结构和语义编写代码,然后按CSS样式设置。减少html和css的契合度。

CSS则存在三种定位机制:

  1. 标准文档流(Normal flow)
  2. 浮动(Floats)
  3. 绝对定位(Absolute positioning)

标准文档流的特点:由块级元素和行级元素组成,从上到下,从左到右,输出文档内容。

块级元素的特点:从左到右撑满页面,独占一行,触碰到页面边缘时,会自动换行。

常见的块级元素即块级标签,如div、ul、li、dl、dt、p…
行级元素的特点则是在不改变html文档结构的情况下,在同一行显示。
常见的行级元素即行级标签如span、strong、img、input···
块级元素和行级元素都是盒子模型

打赏作者

您的支持将鼓励我们继续创作!

[微信] 扫描二维码打赏

[支付宝] 扫描二维码打赏

正在跳转到PayPal...
未经允许不得转载:艾米莉亚 » 网页布局基础

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

因为专注 所以专业

欢迎投稿关于我们
EA PLAYER &

历史记录 [ 注意:部分数据仅限于当前浏览器 ]清空

      00:00/00:00