HTML/CSS实现的一个列表页

又到休息日，白天没事跟朋友去逛逛街，侃大山，晚上了，上网无趣，于是就想起该练练了，

这次是做了一个页面，最上面是一个banner 用到了一个jQuery的逻辑判断当banner初始top值小于window的top值时指定banner的top为0px像素，

页面中间是用ul li div 嵌套做的列表，可做为模板，在后台读取数据生成商品展示的页面。没有做分页，和侧边栏。样式呢做的有点丑，没办法，顶不上设计师呀，也希望高手可以指点一下。

下面上代码和效果图

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html ="http://www.w3.org/1999/xhtml"> 3 <head> 4   <title></title> 5   <script src='/images/loading.gif' data-original="jquery-1.8.3.js" type="text/javascript"></script> 6   <style> 7     body { 8       background-color: #e5e7e8; 9     } 10  11     #demoFixed { 12       position: fixed; 13       width: 100%; 14       right: 0%; 15       height: 50px; 16       opacity: 0.6; 17       background-color: red; 18       text-align: center; 19       box-shadow: 6px 10px 10px #808080; 20       border-radius: 10px 10px 10px 10px; 21       letter-spacing: 5em; 22       display: inline-block; 23       line-height: 50px; 24     } 25  26     #uu { 27       text-align: center; 28       list-style-type: none; 29       margin-top: 40px; 30     } 31  32       #uu .lli li { 33         display: inline-block; 34         padding-left: 10px; 35         list-style-type: none; 36         text-align: center; 37         line-height: 30px; 38       } 39  40         #uu .lli li div { 41           width: 120px; 42           height: 150px; 43           display: inline-block; 44           text-align: center; 45           line-height: 150px; 46           transition: border-radius 0.5s, box-shadow 0.5s,line-height 0.5s, background-color 0.5s; 47         } 48  49           #uu .lli li div:hover { 50             cursor: pointer; 51             border: 1px solid #ff6a00; 52             border-radius: 40px 40px 40px 40px; 53             background-color: #ff6a00; 54             box-shadow: 10px 10px 20px #ff6a00; 55           } 56   </style> 57   <script type="text/javascript"> 58     $(function () { 59       var aa = $("#demoFixed"); 60       var wistart = $(aa).offset().top; 61       $(window).bind("scroll", function () { 62         var wi = $(window).scrollTop(); 63         // $(aa).css("display", ((wistart) > wi) ? "fixed" : "absolute"); 64         $(aa).css("top", ((wi) > wistart) ? '0px' : ''); 65       }); 66     }) 67   </script> 68 </head> 69 <body> 70   <div id="demoFixed"> 71     haha你好吗Walcome 72     <input type="button" style="opacity:0.8; margin-top:-240px;" value="案例" /> 73   </div> 74   <ul id='uu'> 75     <li class="lli"> 76       <ul> 77         <li><div>马达加斯加</div></li> 78         <li><div>马达加斯加</div></li> 79         <li><div>马达加斯加</div></li> 80         <li><div>马达加斯加</div></li> 81         <li><div>马达加斯加</div></li> 82       </ul> 83     </li> 84     <li class="lli"> 85       <ul> 86         <li><div>马达加斯加</div></li> 87         <li><div>马达加斯加</div></li> 88         <li><div>马达加斯加</div></li> 89         <li><div>马达加斯加</div></li> 90         <li><div>马达加斯加</div></li> 91       </ul> 92     </li> 93     <li class="lli"> 94       <ul> 95         <li><div>马达加斯加</div></li> 96         <li><div>马达加斯加</div></li> 97         <li><div>马达加斯加</div></li> 98         <li><div>马达加斯加</div></li> 99         <li><div>马达加斯加</div></li>100       </ul>101     </li>102     <li class="lli">103       <ul>104         <li><div>马达加斯加</div></li>105         <li><div>马达加斯加</div></li>106         <li><div>马达加斯加</div></li>107         <li><div>马达加斯加</div></li>108         <li><div>马达加斯加</div></li>109       </ul>110     </li>111     <li class="lli">112       <ul>113         <li><div>马达加斯加</div></li>114         <li><div>马达加斯加</div></li>115         <li><div>马达加斯加</div></li>116         <li><div>马达加斯加</div></li>117         <li><div>马达加斯加</div></li>118       </ul>119     </li>120   </ul>121 </body>122 </html>

View Code