HTML/CSS实现的一个列表页

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

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

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

下面上代码和效果图

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
     <title></title>
     <script src="jquery-1.8.3.js" type="text/javascript"></script>
     <style>
         body {
             background-color: #e5e7e8;
         }

         #demoFixed {
             position: fixed;
             width: 100%;
             right: 0%;
             height: 50px;
             opacity: 0.6;
             background-color: red;
             text-align: center;
             box-shadow: 6px 10px 10px #808080;
             border-radius: 10px 10px 10px 10px;
             letter-spacing: 5em;
             display: inline-block;
             line-height: 50px;
         }

         #uu {
             text-align: center;
             list-style-type: none;
             margin-top: 40px;
         }

             #uu .lli li {
                 display: inline-block;
                 padding-left: 10px;
                 list-style-type: none;
                 text-align: center;
                 line-height: 30px;
             }

                 #uu .lli li div {
                     width: 120px;
                     height: 150px;
                     display: inline-block;
                     text-align: center;
                     line-height: 150px;
                     transition: border-radius 0.5s, box-shadow 0.5s,line-height 0.5s, background-color 0.5s;
                 }

                     #uu .lli li div:hover {
                         cursor: pointer;
                         border: 1px solid #ff6a00;
                         border-radius: 40px 40px 40px 40px;
                         background-color: #ff6a00;
                         box-shadow: 10px 10px 20px #ff6a00;
                     }
     </style>
     <script type="text/javascript">
         $(function () {
             var aa = $("#demoFixed");
             var wistart = $(aa).offset().top;
             $(window).bind("scroll", function () {
                 var wi = $(window).scrollTop();
                 //  $(aa).css("display", ((wistart) > wi) ? "fixed" : "absolute");
                 $(aa).css("top", ((wi) > wistart) ? '0px' : '');
             });
         })
     </script>
 </head>
 <body>
     <div id="demoFixed">
         haha你好吗Walcome
         <input type="button" style="opacity:0.8; margin-top:-240px;" value="案例" />
     </div>
     <ul id='uu'>
         <li class="lli">
             <ul>
                 <li><div>马达加斯加</div></li>
                 <li><div>马达加斯加</div></li>
                 <li><div>马达加斯加</div></li>
                 <li><div>马达加斯加</div></li>
                 <li><div>马达加斯加</div></li>
             </ul>
         </li>
         <li class="lli">
             <ul>
                 <li><div>马达加斯加</div></li>
                 <li><div>马达加斯加</div></li>
                 <li><div>马达加斯加</div></li>
                 <li><div>马达加斯加</div></li>
                 <li><div>马达加斯加</div></li>
             </ul>
         </li>
         <li class="lli">
             <ul>
                 <li><div>马达加斯加</div></li>
                 <li><div>马达加斯加</div></li>
                 <li><div>马达加斯加</div></li>
                 <li><div>马达加斯加</div></li>
                 <li><div>马达加斯加</div></li>
             </ul>
         </li>
         <li class="lli">
             <ul>
                 <li><div>马达加斯加</div></li>
                 <li><div>马达加斯加</div></li>
                 <li><div>马达加斯加</div></li>
                 <li><div>马达加斯加</div></li>
                 <li><div>马达加斯加</div></li>
             </ul>
         </li>
         <li class="lli">
             <ul>
                 <li><div>马达加斯加</div></li>
                 <li><div>马达加斯加</div></li>
                 <li><div>马达加斯加</div></li>
                 <li><div>马达加斯加</div></li>
                 <li><div>马达加斯加</div></li>
             </ul>
         </li>
     </ul>
 </body>
 </html>