我的html学习——第五天

最新推荐文章于 2026-01-07 17:24:30 发布

原创最新推荐文章于 2026-01-07 17:24:30 发布 · 446 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #编程语言 #语言

本文通过一个具体的网页布局实例介绍了CSS中浮动的概念及其如何影响页面布局。解释了使用clear属性来清除浮动的作用，并展示了如何利用浮动实现元素左右排列的效果。

<html>
<head>
<style>
#header{background-color:black;
        color:white;
        text-align:center;
        padding:5px;

}
#nav{background-color:#eeeeee;
     color:black;
     height:300px;
     width:100px;
     float:left;
     padding:5px;
}
#section{width:300px;
         float:left;
         padding:10px;
}
#footer{background-color:black;
        color:white;
        clear:both;
        text-align:center;
        padding:5px;
}
</style>
</head>

<body>
2016/11/22
<p style="font-family:arial;color:green">此处用div布局<br/>
<b>注意：</b>对一个元素声明clear:both，会将来自元素周围的的浮动清除，举一个简单的例子就是当先声明一个元素向左浮动时，那么这个元素的右边就会留出一部分空白，如果这个时候空间可以容下该元素的下一个元素的大小，那么由于此元素声明过浮动向左，那么下一个元素就会自动弥补留下的空间。</p>

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

<div id="nav">
London<br/>
Paris<br/>
Tokyo<br/>
</div>

<div id="section">
<h2>London</h2>
<p> London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
<p>Standing on 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
</div>

<hr/>

</body>
</html>