编程狮在线代码实例

Tab
<>
""
''
()
{}
[]
/
:
;
?
,
.
$
输入
运行
xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
    * {
        box-sizing: border-box;
    }
    .row:after {
        content: "";
        clear: both;
        display: block;
    }
    [class*="col-"] {
        float: left;
        padding: 15px;
    }
    html {
        font-family: "Lucida Sans", sans-serif;
    }
    .header {
        background-color: #9933cc;
        color: #ffffff;
        padding: 15px;
    }
    .menu ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    .menu li {
        padding: 8px;
        margin-bottom: 7px;
        background-color :#33b5e5;
        color: #ffffff;
        box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    }
    .menu li:hover {
        background-color: #0099cc;
    }
    .aside {
        background-color: #33b5e5;
        padding: 15px;
        color: #ffffff;
        text-align: center;
        font-size: 14px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    }
    .footer {
        background-color: #0099cc;
        color: #ffffff;
        text-align: center;
        font-size: 12px;
        padding: 15px;
    }
    /* For mobile phones: */
    [class*="col-"] {
        width: 100%;
    }
    @media only screen and (min-width: 600px) {
        /* For tablets: */
        .col-m-1 {width: 8.33%;}
        .col-m-2 {width: 16.66%;}
        .col-m-3 {width: 25%;}
        .col-m-4 {width: 33.33%;}
        .col-m-5 {width: 41.66%;}
        .col-m-6 {width: 50%;}
        .col-m-7 {width: 58.33%;}
        .col-m-8 {width: 66.66%;}
        .col-m-9 {width: 75%;}
        .col-m-10 {width: 83.33%;}
        .col-m-11 {width: 91.66%;}
        .col-m-12 {width: 100%;}
    }
    @media only screen and (min-width: 768px) {
        /* For desktop: */
        .col-1 {width: 8.33%;}
        .col-2 {width: 16.66%;}
        .col-3 {width: 25%;}
        .col-4 {width: 33.33%;}
        .col-5 {width: 41.66%;}
        .col-6 {width: 50%;}
        .col-7 {width: 58.33%;}
        .col-8 {width: 66.66%;}
        .col-9 {width: 75%;}
        .col-10 {width: 83.33%;}
        .col-11 {width: 91.66%;}
        .col-12 {width: 100%;}
    }
</style>
</head>
<body>
​
    <div class="header">
        <h1>查尼亚</h1>
    </div>
    
    <div class="row">
        <div class="col-3 col-m-3 menu">
            <ul>
                <li>航班</li>
                <li>城市</li>
                <li>岛屿</li>
                <li>食物</li>
            </ul>
        </div>
        
        <div class="col-6 col-m-9">
        <h1>城市</h1>
            <p>查尼亚是克里特岛查尼亚地区的首府. 这个城市可以分为两部分，老城区和现代城区.</p>
        </div>
        
        <div class="col-3 col-m-12">
            <div class="aside">
                <h2>查尼亚是什么?</h2>
                <p>查尼亚是克里特岛上的一座城市.</p>
                <h2>查尼亚在哪里?</h2>
                <p>克里特岛是位于地中海的一个希腊岛屿.</p>
                <h2>如何去查尼亚?</h2>
                <p>你可以从欧洲各地到达查尼亚机场.</p>
            </div>
        </div>
    
    </div>
    
    <div class="footer">
        <p>调整浏览器窗口的大小，以查看内容如何响应调整大小.</p>
    </div>
​
</body>
</html>
实例代码
运行结果