furao
/
test


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;
        }

        * {
            box-sizing: border-box;
        }

        /*ul {*/
        /*margin: 0;*/
        /*padding: 0;*/
        /*}*/

        .menu {
            /*list-style-type: none;*/
            /*margin: 0;*/
            /*padding: 0;*/
            /*background-color: grey;*/
            /*overflow: hidden;*/
            margin: 0;
            padding: 0;
            list-style-type: none;
            overflow: hidden;
            background-color: #777;
        }

        .menu li {
            float: left;
        }

        .menu li a {
            /*display: inline-block;*/
            /*text-decoration: none;*/
            /*color: white;*/
            /*padding: 16px;*/
            /*text-align: center;*/

            display: inline-block;
            color: white;
            text-align: center;
            padding: 16px;
            text-decoration: none;
        }

        ul li.active {
            background-color: #4CAF50;
        }

        section {
            overflow: hidden;

        }

        section > div {
            float: left;
            padding: 10px;
        }

        .left {
            width: 25%;
            /*background-color: #0d8ddb;*/
            padding: 15px;
        }

        .right {
            width: 75%;
            /*background-color: green;*/
            padding: 15px;
        }

        section li {
            list-style-type: none;
        }

        .left a {
            text-decoration: none;
        }

        .left li {
            background-color: #eee;
            padding: 8px;
            margin-bottom: 4px;
        }

        .left a {
            color: #666;
        }

        .active {
            background-color: #008CBA;

        }

        .active a {

            color: white;
        }

    </style>
</head>
<body>
<!--<header>-->
<ul class="menu">
    <li class="active"><a href="">主页</a></li>
    <li><a href="">新闻</a></li>
    <li><a href="">联系我们</a></li>
    <li><a href="">关于我们</a></li>
</ul>
<!--</header>-->

<section>
    <div class="left">
        <ul>
            <li class="active"><a href="">The Flight</a></li>
            <li><a href="">The City</a></li>
            <li><a href="">The Island</a></li>
            <li><a href="">The Food</a></li>
            <li><a href="">The People</a></li>
            <li><a href="">The History</a></li>
            <li><a href="">The Oceans</a></li>
        </ul>
    </div>
    <div class="right">
        <div style="text-align: center;padding: 20px;background-color: #0d8ddb;color: white"><h1>The City</h1></div>
        <h1 style="font-size: 2em">World</h1>
        <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
        <p>You will learn more about responsive web pages in a later chapter.</p>
    </div>

</section>
<footer style="background-color: #444;color: white;padding: 10px"><h3>底部文字</h3></footer>

</body>
</html>