HTML网页布局实例

HTML 专栏收录该内容
3 篇文章 0 订阅

在没有学习div之前,网页布局是件非常麻烦的事情,由于缺乏足够多的规则对网页的内容进行组织,因此,显得十分麻烦。而div便是为网页布局而生。div最大的特点便是可以进行任意的嵌套,并且嵌套的div之间互相独立,互不影响,这便使得网页中的内容相对位置不会发生改变。div有三种重要的位置方式(position):relative, absolute和fixxed。其中需要注意的是,如果要使嵌套的div的postion生效,必须在它嵌套的上一层div中声明position,三种方式皆可。另外,借助于盒子模型,也能够加深我们对于布局的理解。如下图(图片来自于百度百科):

图1 盒子模型

实例效果:

图2 网页实例效果 

代码地址:https://github.com/JiasenLee/javaweb_in_action/tree/master/HTML实战任务5作业

 

  • 8
    点赞
  • 6
    评论
  • 37
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

©️2022 CSDN 皮肤主题:技术工厂 设计师:CSDN官方博客 返回首页

打赏作者

柯西没科气

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

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

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

打赏作者

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

抵扣说明:

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

余额充值