布局练习

 

 

 

<!doctype html>
<head>
    <meta charset="utf-8">
    <title>HTML的布局</title>
    </head>
    <body>

    <div id="header">
        <h1>City Gallery</h1>
    </div>

    <div id="nav">
        <a href="#">Lodon</a><br>
        <a href="#">Paris</a><br>
        <a href="#">Tokyo</a><br>
    </div>

    <div id="section">
        <h1>Lodon</h1>
        <p>
    Lodon is the capital city of England.It is the most populous city in the         United Kindom,with a metropolitan area of over 13 million inhabitants.
    </p>
    <p>
    Standingon the River Thames,London has been a major settlement for two 
    millennia,its history going back to its founding by the Romans,who named it     Londinium.
    </p>
</div>

<div id="footer">
    Copyright W3School.com.cn
</div>

</body>
</html>
<style>

#header{
    background-color:black;
    color:white;
    text-align: center;
    padding: 5px;
}

#nav{
    line-height: 30px;
    background-color: #eeeeee;
    height: 300px;
    width: 100px;
    float: left;
    padding: 5px;
}

#section {
    width: 350px;
    float: left;
    padding: 10px;
}

#footer{
    background-color:black;
    color: white;
    clear: both;
    text-align: center;
    padding: 5px;
}
</style>

 

posted @ 2017-03-04 21:36  weifeng378  阅读(331)  评论(0)    收藏  举报