div+css页面布局实战

本文详细介绍了Div+CSS页面布局的相关知识,包括样式设置元素属性、利用CSS进行布局定位,如relative、absolute、fixed和static定位。还讨论了z-index、display属性、浮动、盒子模型以及边框和内边距的使用。通过实例讲解如何实现各种布局效果。
摘要由CSDN通过智能技术生成

视频学习地址:
程序员学院-CSDN https://edu.csdn.net/learn/26531?spm=1002.2001.3001.4157

Div+Css页面布局实战

style样式设置元素属性

如果标签与页边有间隔,应先将格式全部设成0
例如:
body,img,ul,li,{
    padding:0px;
    margin:0px;

#box{}id为box的元素
.box{}class为box的元素
#box>div{} id为box下的div元素
.box>div{} class为box下的div元素
#box>div:first-child{} box下的第一个div元素 或 #box>div:nth-child(1)
#box>div:nth-child(2){} box下的第二个div元素
#box>div:last-child{} box下的最后一个div元素

利用css布局

定位属性:position:relative、absolute、fixed、static

  • relative相对定位,利用top、left等定位,根据现在的位置进行偏移,占据现在的位置,显示在偏移后的位置。

  • absolute绝对定位,利用top、left等定位,根据页面的

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值