html学习：布局

keer_zu · 发表于 2021-3-5 15:26

实例代码：

<!DOCTYPE html>

<html>



<head>

<style>

#header {

    background-color:black;

    color:white;

    text-align:center;

    padding:5px;

}

#aside {

    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>

</head>



<body>



<div id="header">

<h1>City Gallery</h1>

</div>







<div id="aside">

London<br>

Paris<br>

Tokyo<br>



</div>







<div id="section">

<h2>London</h2>

<p>

London is the capital city of England. 

</p>

<p>

Standing on the River Thames.

</p>

</div>







<div id="footer">

Copyright ? W3Schools.com

</div>







</body>

</html>

html布局就是这么来的。

keer_zu · 发表于 2021-3-5 15:27

布局效果是这样的：

keer_zu · 发表于 2021-3-5 15:28

html5布局语义元素：

html学习：布局

相关帖子

浏览过的版块

突出贡献奖章

沉静之湖泊

七世轮回

技术奇才奖章