代码在线运行 - 蝴蝶教程

编程语言

HTML

PHP

Python

Java

Perl

Ruby

Kotlin

Scala

C语言

C++

JSP

Node.js

Pascal

VB.Net

汇编

R语言

Matlab

非常抱歉，由于服务压力增加，部分语言的在线运行服务不再提供！

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>蝴蝶教程（cainiaoya.com）</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        * {
            box-sizing:border-box;
        }

.left {
            background-color:#2196F3;
            padding:20px;
            float:left;
            width:20%; /* 左侧默认宽20% */
        }

.main {
            background-color:#f1f1f1;
            padding:20px;
            float:left;
            width:60%; /* 中间默认宽60% */
        }

.right {
            background-color:#4CAF50;
            padding:20px;
            float:left;
            width:20%; /* 右侧默认宽20% */
        }

/* 用媒体查询来响应800px以下的屏幕: */
        @media screen and (max-width:800px) {
            .left, .main, .right {
                width:100%; /* 每行的宽度为100% 占据一行的全部宽度 */
            }
        }
    </style>
</head>
<body>

<h2>媒体查询</h2>
<p>改变浏览器窗口大小来观察</p>

<p>当屏幕小于800px宽度时候，下面的三块内容将不在水平展示，而是堆叠到一列。</p>

<div class="main">
    <p>中间主体内容</p>
</div>

<div class="right">
    <p>右侧的内容</p>
</div>

</body>
</html>

​x
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>蝴蝶教程（cainiaoya.com）</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        * {
            box-sizing:border-box;
        }
​
        .left {
            background-color:#2196F3;
            padding:20px;
            float:left;
            width:20%; /* 左侧默认宽20% */
        }
​
        .main {
            background-color:#f1f1f1;
            padding:20px;
            float:left;
            width:60%; /* 中间默认宽60% */
        }
​
        .right {
            background-color:#4CAF50;
            padding:20px;
            float:left;
            width:20%; /* 右侧默认宽20% */
        }
​
        /* 用媒体查询来响应800px以下的屏幕: */
        @media screen and (max-width:800px) {
            .left, .main, .right {
                width:100%; /* 每行的宽度为100% 占据一行的全部宽度 */
            }
        }
    </style>
</head>
<body>
​
<h2>媒体查询</h2>
<p>改变浏览器窗口大小来观察</p>
​
<p>当屏幕小于800px宽度时候，下面的三块内容将不在水平展示，而是堆叠到一列。</p>
​
<div class="left">
    <p>左侧菜单</p>
</div>
​
<div class="main">
    <p>中间主体内容</p>
</div>
​
<div class="right">
    <p>右侧的内容</p>
</div>
​
</body>
</html>