furao
/
test


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        header {
            background-color: #777777;
        }

        ul {
            padding: 0;
            margin: 0;
        }

        header li {

            list-style-type: none;
            float: left;
            width: 100px;
            height: 50px;
            line-height: 50px;
            text-align: center;
        }

        header li a {
            text-decoration: none;
            color: white;
        }

        header li:hover, header li:first-child {
            background-color: #4CAF50;
        }

        section {
            height: 380px;
        }

        aside {
            width: 200px;
            height: 100%;
            float: left;
        }

        article {
            height: 100%;
            width: calc(100% - 200px);;
            float: left;
            /*background-color: green;*/
        }

        aside ul {
            height: 90%;

        }

        aside li {

            list-style-type: none;
            margin: 10px;
            background-color: #eee;
            line-height: 40px;

        }

        aside li a {
            text-decoration: none;
            padding-left: 15px;
            color: #666;

        }

        aside li:first-child {
            background-color: #008CBA;

        }

    </style>
</head>
<body>
<header>
    <ul>
        <li><a href="">主页</a></li>
        <li><a href="">新闻</a></li>
        <li><a href="">联系我们</a></li>
        <li><a href="">关于我们</a></li>
    </ul>
    <div style="clear: both"></div>
</header>
</body>

<section>
    <aside>
        <ul>
            <li><a href="" style="color: white">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>
    </aside>
    <article>

        <div style="text-align: center;background-color: #0d8ddb;margin: 20px;color: white;padding: 20px;">
            <h1>你好</h1>
        </div>

        <h1 style="margin: 20px">Chania</h1>
        <p style="text-indent: 20px">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>

    </article>
    <div style="clear: both"></div>
</section>
<footer style="background-color: #444444;height: 100px;color: white;line-height: 100px;text-indent: 20px">底部文本</footer>

</html>