zoukankan      html  css  js  c++  java
  • 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 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>
    View Code

  • 相关阅读:
    day01--计算机硬件基础笔记
    22 Jun 18 Django,ORM
    21 Jun 18 Django,ORM
    20 Jun 18 复习, mysql
    20 Jun 18 Django,ORM
    19 Jun 18 复习, 正则表达式
    19 Jun 18 Django
    15 Jun 18 复习, shutil模块
    15 Jun 18 Django
    14 Jun 18 复习, form表单
  • 原文地址:https://www.cnblogs.com/scien626/p/4508951.html
Copyright © 2011-2022 走看看