【HTML】响应式布局例子

最新推荐文章于 2024-05-13 00:58:42 发布

赤焰梦

最新推荐文章于 2024-05-13 00:58:42 发布

阅读量825

点赞数 2

分类专栏： HTML/CSS/Javascript 文章标签： html css javascript

本文链接：https://blog.csdn.net/m0_49442965/article/details/128012834

版权

正常屏幕大小
在这里插入图片描述
中等大小（左侧导航栏消失，图片换行显示）

小屏幕（图片单行显示）

代码：

<!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>
    <link rel="stylesheet" href="css/01.css" >
</head>
<body>
    <div class="layout">
        <!-- 左侧导航栏 -->
        <div class="left">
            <div class="left_main">
                <div class="left_heading">
                    <i ><img src="img/1 (2).png" style="height: 26px;"></i>
                    <span>进阶提升