您现在的位置是：网站首页> 编程资料编程资料

利用CSS使footer固定在页面底部的实例代码CSS实现footer“吸底”效果详解CSS五种方式实现Footer置底html的footer置于页面最底部的简单实现方法详解HTML5将footer置于页面最底部的方法(CSS+JS)

2023-10-22 302人已围观

简介 下面小编就为大家带来一篇利用CSS使footer固定在页面底部的实例代码。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

1. HTML基本结构

XML/HTML Code复制内容到剪贴板
  1. >  
  2.   
  3. <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml">  
  4.   
  5. <headrunatheadrunat="server">  
  6.   
  7.     <title>layouttitle>  
  8.   
  9. head>  
  10.   
  11. <body>  
  12.   
  13.     <divclassdivclass="header">  
  14.   
  15.         <h1>head of your website.h1>  
  16.   
  17.     div>  
  18.   
  19.     <divclassdivclass="wrapper">  
  20.   
  21.         <divclassdivclass="content">  
  22.   
  23.             <h2>Your website content here.h2>  
  24.   
  25.             <scripttypescripttype="text/javascript">  
  26.   
  27.                 for(var i = 0; i<100;i++){   
  28.   
  29.                     document.write(i + "<br />");   
  30.   
  31.                 }   
  32.   
  33.             script>  
  34.   
  35.         div>  
  36.   
  37.         <divclassdivclass="clear">div>  
  38.   
  39.     div>  
  40.   
  41.     <divclassdivclass="footer">  
  42.   
  43.         <div><h1>  
  44.   
  45.             Copyright (c) 2012h1>div>  
  46.   
  47.     div>  
  48.   
  49. body>  
  50.   
  51. html>  
  52.   

2. CSS样式

CSS Code复制内容到剪贴板
  1. "text/css">   
  2.   
  3.         *{   
  4.   
  5.             margin: 0;/* 把默认值都设为0 */  
  6.   
  7.         }   
  8.   
  9.         html, body   
  10.   
  11.         {   
  12.   
  13.             height: 100%;   
  14.   
  15.             width:85%;   
  16.   
  17.             margin:0auto;/* 居中 */  
  18.   
  19.         }   
  20.   
  21.            
  22.   
  23.         .header   
  24.   
  25.         {   
  26.  

    上一篇：几个CSS3的flex弹性盒模型布局的简单例子演示

    下一篇：使用CSS3的font-face字体嵌入样式的方法讲解

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网