这次是做了一个页面，最上面是一个banner 用到了一个jQuery的逻辑判断当banner初始top值小于window的top值时指定banner的top为0px像素，
页面中间是用ul li div 嵌套 做的列表 ，可做为模板，在后台 读取数据生成商品展示的页面。没有做分页，和侧边栏。样式呢做的有点丑，没办法，顶不上设计师呀， 也希望高手可以指点一下。
下面上代码和效果图
1 2 3 4 5 6 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 57 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 68 69 70 71 haha你好吗Walcome 72 73
查看更多关于HTML/CSS实现的一个列表页_html/css_WEB-ITnose的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did108046