1 <?php 2 defined('_JEXEC') or die; 3 4 5 JHtml::_('behavior.framework', true); 6 7 //if(!$templateparams->get('html5', 0)): 8 9 10 ?> 11 12 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 13 14 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>" > 15 <head> 16 <!--jdoc:include type="head" /--> 17 <style type="text/css"> 18 19 html { 20 height: 100%; 21 } 22 body 23 { 24 <!-- 25 background:url(http://127.0.0.1/joomla25/templates/usegear/images/bg.png); 26 /*background-image:url(http://127.0.0.1/joomla25/templates/usegear/images/bg.png)*/ 27 /*background-size:100% 100%;*/ 28 29 background-size:100% 800%; 30 31 background-repeat:no-repeat; 32 padding-bottom:80px; 33 34 --> 35 36 37 height: 100%; 38 background-attachment: fixed; 39 margin:0; 40 padding:0; 41 background-repeat: no-repeat; 42 background: rgb(30,87,153); /* Old browsers */ 43 44 background: -moz-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(125,185,232,1) 90%); /* FF3.6+ */ 45 46 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,1)), color-stop(90%,rgba(125,185,232,1))); /* Chrome,Safari4+ */ 47 48 background: -webkit-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(125,185,232,1) 90%); /* Chrome10+,Safari5.1+ */ 49 50 background: -o-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(125,185,232,1) 90%); /* Opera 11.10+ */ 51 52 background: -ms-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(125,185,232,1) 90%); /* IE10+ */ 53 54 background: linear-gradient(to bottom, rgba(30,87,153,1) 0%,rgba(125,185,232,1) 90%); /* W3C */ 55 56 57 } 58 59 #body_foot 60 { 61 62 position:absolute; bottom:0px; right:0px; 63 64 65 66 67 background:url(http://127.0.0.1/LXX/pictures/cloud.png);/*,url(http://127.0.0.1/LXX/pictures/cloud2.png);*/ 68 background-size:30% 180%; 69 -moz-background-size:63px 130px; /* 老版本的 Firefox */ 70 background-repeat:repeat; 71 padding-bottom:1%; 72 73 margin:0; 74 75 } 76 77 #body_foot1 78 { 79 80 position:absolute; bottom:0px; right:0px; 81 82 83 84 85 background:url(http://127.0.0.1/LXX/pictures/cloud2.png);/*,url(http://127.0.0.1/LXX/pictures/cloud2.png);*/ 86 background-size:40% 180%; 87 -moz-background-size:63px 130px; /* 老版本的 Firefox */ 88 background-repeat:repeat; 89 padding-bottom:1%; 90 91 margin:0; 92 93 } 94 95 96 </style> 97 </head> 98 <body> 99 <div> 100 <p></p> 101 <p>rtyeryteryteryteryt</p> 102 <p>rtyeryt</p> 103 <p>ertyerytre</p> 104 <p>ertyerytre</p> 105 <p>ertyerytre</p> 106 <p>ertyerytre</p> 107 <p>ertyerytre</p> 108 <p>ertyerytre</p> 109 </div> 110 111 <div id="body_foot1" style="position:absolute;bottom:1px;height:20%; 100%; "> 112 <div id="body_foot" style="position:absolute;bottom:1px;height:100%; 100%; "> 113 114 115 </div> 116 </div> 117 118 119 120 121 </div> 122 </div> 123 124 </body> 125 </html>
其中主要有：
1、渐变背景的的设定：body{}
2、动态在低端的白云：设定了body_foot1和body_foot1中的循环图片显示定义，以及div动态底端的设定。以及嵌套div掩盖白云图片规律性显示。