html 布局小例子(div)

hjjdebug

于 2021-07-17 08:19:35 发布

阅读量703

点赞数

分类专栏： # web编程文章标签： html qt css

本文链接：https://blog.csdn.net/hejinjing_tom_com/article/details/118851354

版权

web编程专栏收录该内容

2 篇文章 0 订阅

订阅专栏

div 区块布局, div+css 小例子,由html确定内容和布局,css 确定表现方式,css中定义了寬高.

div 默认的行为相当于QT的垂直布局, 前后都会换行,水平长度延续到边界.

如果加上float 属性,相当于QT的水平布局,

如果你需要一个类似QT的栅格布局形式,可以考虑用表格. 只所以拿QT做类比,是因为我熟悉QT

这样类比,就把div 进一步的解剖了.

我们直接上代码, 还可以慢慢把玩,供入门用.

还可以把代码中的宽度由px改为百分比宽度,然后滚动鼠标放大缩小可视区域,体会一下他们的区别.

百分比在屏幕上位置是固定的,而px 则会放大缩小.

<!DOCTYPE html>
<html>
    <head>
    <meta charset=utf-8>
    <style>
     /* 由html和css 共同设置布局 由id 确定5个区块*/
     #container {width:600px;} /* 父级区块 */
     #header{background-color:#FFA500;text-align:center;} /* 继承父级宽度,未设置高度,可由包含的内容确定 */
     #content1{width:300px;height:400px;float:left;background-color:#FFD700;}
     #content2{width:300px;height:400px;float:left;background-color:#EEEEEE;}
     #footer{clear:both;background-color:#FFA500;text-align:center;}/* 继承父级宽度, 未设置高度,可由包含的内容确定 clear 为清除浮动,表示自己不再浮动,放大缩小会看到效果*/
    </style>
    <title> div test </title>
    </head>
    <body>
    <div id="container">
        <div id="header">
        <!-- 设置该元素到底部的边界 -->
        <h1 style="margin-bottom:0;">SN 配对及装箱工具</h1>
        </div>
        <div id="content1">
        内容1
        </div>
        <div id="content2">
        内容2
    </div>
    <div id="footer">
        版权 © techwin.com
    </div>
    </div>
</body>
</html>

hjjdebug

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html 布局小例子(div)

div 区块布局, 由html及css 共同确定布局,其中html 确定了包含关系,css中定义了寬高.小例子,我们直接上代码, 还可以慢慢把玩,供入门用.<!DOCTYPE html><html> <head> <meta charset=utf-8> <style> /* 由html和css 共同设置布局 */ #container {width:600px;} /* 父级区块 */ ...
复制链接

扫一扫