DIV+CSS 布局技术

本文详细介绍了DIV+CSS布局技术的优势,如缩减页面代码、方便改版、控制页面布局等,并通过实例讲解如何使用嵌套的div进行复杂页面排版。接着深入探讨了CSS盒模型,解析了外边距属性,包括margin-top、margin-bottom、margin-left、margin-right及其应用场景。
摘要由CSDN通过智能技术生成

一,DIV+CSS布局技术

一,div布局页面的优点
传统的html标签中,既有控制结构的标签,又有控制变现的标签,还有本意用于控制结构后来被滥用的标签。页面的整个结构标签与表现标签混合在一起
div+css的页面布局不仅仅是设计方式的转变,而且是设计思想的转变,这样为网页设计带来很大的方便
1.缩减页面代码,提高页面的浏览速度
2.缩短了网站改版时间,设计者只要简单地修改css文件即可轻松改版网页
3.字体控制和排版控制,使我们能更好的控制页面布局
4.表现和内容分离,减少网页无效的可能
5.方便搜索引擎的搜索,使用只包含结构化内容的html代替嵌套的标签,所搜引擎将更有效的搜索到内容
二,使用嵌套的div实现页面排版
嵌套的div用于排版更为复杂的页面

二,css盒模型

在使用css进行布局的过程中,css和模型,定位和浮动是最重要的概念控制者页面上元素的显示方式
1.盒模型属性
1.外边距
外边距也称为外补丁。外边距设置属性有margin-top,margin-bottom,margin-left,margin-right,这些属性可以用margin属性,一次设置所有边距。
(1.)上外边距(margin-top)
语法:margin-top:length|zuto
参数:length 是由数字和单位标识符组成的长度值或者百分数,百分数,百分数是基于父对象的高度。auto值被设置为对边

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

可期!

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值