网页footer使用CSS来定位的效果_引导线--|IT资讯|网页制作|网页设计|平面设计|网站优化

引导线网页制作网提示您：网页footer使用CSS来定位的效果 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//ENDTD/xhtml1-strict.dtdhtml xmlns=http://www.w3.org/1999/xhtmlheadtitle使用CSS定位footer/titlestyle type=text/cssbody,html {margin: 0;padding: 0;font: 12px/1.

网页footer使用CSS来定位的效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>使用CSS定位footer</title>
<style type="text/css">
body,html {
margin: 0;
padding: 0;
font: 12px/1.5 arial;
height:100%;
}
#container {
position: relative;
min-height:100%;
}
#content {
padding: 10px;
padding-bottom: 60px;  /*(20px font-size x 2 line-height) + (2 * 10px padding) = 60px*/
}
#footer {
position: absolute;
bottom: 0;
padding: 10px 0;
background-color: #AAA;
width: 100%;
}
#footer h1 {
font: 20px/2 Arial;
margin:0;
padding:0 10px;
}
</style>
</head>
<body>
<div id="container">
<div id="content">
<h1>Content</h1>
<p>请改变浏览器窗口的高度，以观察footer效果。</p>
<p><a href="http://www.yindaoxian.com" _fcksavedurl="http://www.yindaoxian.com">引导线网页制作网，为您提供最好的网页制作教程。</a>请改变浏览器窗口的高度，以观察footer效果。引导线网页制作网，为您提供最好的网页制作教程。引导线网页制作网，为您提供最好的网页制作教程。引导线网页制作网，为您提供最好的网页制作教程。引导线网页制作网，为您提供最好的网页制作教程。引导线网页制作网，为您提供最好的网页制作教程。引导线网页制作网，为您提供最好的网页制作教程。</p>
<p><a href="http://www.yindaoxian.com" _fcksavedurl="http://www.yindaoxian.com">引导线网页制作网，为您提供最好的网页制作教程。</a>请改变浏览器窗口的高度，以观察footer效果。引导线网页制作网，为您提供最好的网页制作教程。引导线网页制作网，为您提供最好的网页制作教程。引导线网页制作网，为您提供最好的网页制作教程。引导线网页制作网，为您提供最好的网页制作教程。引导线网页制作网，为您提供最好的网页制作教程。引导线网页制作网，为您提供最好的网页制作教程。</p>
</div>
<div id="footer">
<h1>Footer</h1>
</div>
</div>
</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

引导线

网页footer使用CSS来定位的效果

Tag：使用网页制作网页定位效果