html第二天——使用div做基本的页面布局

最新推荐文章于 2024-07-28 08:03:31 发布

陈建维

最新推荐文章于 2024-07-28 08:03:31 发布

阅读量776

点赞数

分类专栏：课堂随笔

本文链接：https://blog.csdn.net/weixin_37196194/article/details/54318009

版权

课堂随笔专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #d0{
            width:100%;    #宽度占屏幕的百分比
            position: fixed;     #设置方位的类型。fixed为相对屏幕的绝对位置；absolute为在整个网页中的相对位置；relative，相对其他标签的位置。

            top:0px;
            left:0px;
            background-color: black;
            height:35px;
            z-index:1;    #一个div块类似一图层，有优先显示的顺序。彼此会相对覆盖遮挡。
}
        #d1{
            position:absolute;
            float:right;    #和 left:__px，不一样的设置，直接将div块设置为在页面的左边或者右边
            top:35px;
            background: pink;
            width:17%;
            height:900px;
        }
        #d2{
            position: absolute;
            background-color:deepskyblue;
            top:35px;
            left:17%;
            width:83%;
            height:900px;
        }

    </style>
</head>
<body>
<div id="d0"></div>
<div id="d1"></div>

<div id="d2"></div>  #每个div都类似一图层，不使用z-index命令设置话，默认按最后一个div最优先显示，覆盖其他div界面
</body>
</body>
</html>

————————————————————————————————————————————————————————————————————

效果图：

陈建维

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html第二天——使用div做基本的页面布局

html lang="en">head> meta charset="UTF-8"> title>Titletitle> style> #d0{ width:100%; #宽度占屏幕的百分比 position: fixed; #设置方位的类型。fixed为相对屏幕的绝对位置；absolute为在
复制链接

扫一扫