HTML实现图层的自适应变化

最新推荐文章于 2024-02-28 21:15:00 发布

在你隔壁的香飘飘

最新推荐文章于 2024-02-28 21:15:00 发布

阅读量365

点赞数

分类专栏： html基础入门文章标签： html css

本文链接：https://blog.csdn.net/ZYuAYuLuuu/article/details/117566705

版权

html基础入门专栏收录该内容

9 篇文章 0 订阅

订阅专栏

这次练习是在HTml中引入了<div>,</div>，主要是标签的使用，相关知识我整理成了思维导图附下：

实现图层自适应的方法有许多，见仁见智。我的思路是设置三个<div>图层并且不同的颜色，左右两边的位置固定住。中间图片设为自适应，就可达到不论怎么滑动屏幕，两边的颜色大小不变，而中间的元素随着移动自适应的效果。代码附下，欢迎大家交流指正。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>界面自适应</title>
</head>
<style>
    #left {
        float: left;
        height: 200px;
        width: 200px;
        background-color: coral;
    }
    
    #right {
        right: 0;
        width: 100px;
        height: 200px;
        background-color: chocolate;
        position: absolute;
    }
    
    #center {
        margin: 0 auto;
        height: 200px;
        background-color: cornflowerblue;
    }
</style>

<body>
    <div hight="200px" ;width="1000px">
        <div hight="200px" ; width="200px" ; id="left">

        </div>

        <div hight="200px" ; width="100px" ; id="right">

        </div>

        <div id="center">

        </div>
    </div>

</body>

</html>

效果如下：