HTML/CSS实现的一个列表页_html/css_WEB-ITnose-tutoriel HTML-php.cn

HTML/CSS实现的一个列表页_html/css_WEB-ITnose

WBOY

Libérer： 2016-06-24 11:44:23

original

1436 Les gens l'ont consulté

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

这次是做了一个页面，最上面是一个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 xmlns="http://www.w3.org/1999/xhtml">  3 <head>  4     <title></title>  5     <script src="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>

Copier après la connexion