代码在线运行 - 蝴蝶教程

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

<!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;
        }
        .menu {
            float: left;
            width: 20%;
        }
        .menuitem {
            padding: 8px;
            margin-top: 7px;
            border-bottom: 1px solid #f1f1f1;
        }
        .main {
            float: left;
            width: 60%;
            padding: 0 20px;
            overflow: hidden;
        }
        .right {
            background-color: lightblue;
            float: left;
            width: 20%;
            padding: 10px 15px;
            margin-top: 7px;
        }

@media only screen and (max-width:800px) {
            /* For tablets: */
            .main {
                width: 80%;
                padding: 0;
            }
            .right {
                width: 100%;
            }
        }
        @media only screen and (max-width:500px) {
            /* For mobile phones: */
            .menu, .main, .right {
                width: 100%;
            }
        }
    </style>
</head>
<body style="font-family:Verdana;">

<div style="background-color:#f1f1f1;padding:15px;">
    <h1>桂林山水</h1>
    <h3>在浏览器中调整窗口大小</h3>
</div>

<div class="main">
        <h2>象鼻山</h2>
        <p>象鼻山原名漓山，位于广西区桂林市内桃花江与漓江汇流处，山因酷似一只站在江边伸鼻豪饮漓江甘泉的巨象而得名，被人们称为桂林山水的象征。</p>
        <img src="images/xbs.jpg" style="width:100%">
    </div>

<div class="right">
        <h2>特色</h2>
        <p>象山以神奇著称。其神奇，首先是形神毕似，其次是在鼻腿之间造就一轮临水明月，构成“象山水月”奇景。</p>
        <h2>位置</h2>
        <p>它坐落在桂林市中心的漓江与桃花江汇流处，形似一头巨象，象鼻和象腿之间是面积约一百五十平米的圆洞，江水穿洞而过，如明月浮水。</p>
        <h2>票价</h2>
        <p>￥50/人</p>
    </div>
</div>

<div style="background-color:#f1f1f1;text-align:center;padding:10px;margin-top:7px;font-size:12px;">这个网页是蝴蝶教程演示的一部分，调整浏览器窗口大小来查看响应效果。</div>

</body>
</html>