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

这次是做了一个页面，最上面是一个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>

HTML/CSS实现的一个列表页的更多相关文章

  1. Meteor 从一个列表页进入详情页怎样高速显示详情

    无论是做android开发,还是做网页web开发,都 会有列表,都须要点击列表进入列表项的详情页面,查看具体信息,能常情况下,我们都是将这一列表项的id传到详情页,由详情页再到数据库查询具体信息. 在 ...

  2. 浅析列表页请求优化（history API）

    最近搞了下列表页请求的功能,并做了一下调研整理,记此文备忘. 列表页请求的功能到处可见,比如在博客园. 点击相应的页码,页面返回相应的内容,看上去似乎大同小异,但是一些小的细节还是可以区分优劣. fu ...

  3. js~一个列表中包含上移下移删除等功能

    最近做了一个项目,包括了一个列表页,为了用户体验,操作均使用JS实现,其中包括在列表中实现上移,下移,删除等功能,前台JS,后端数据修改使用AJAX,本文主要说一下前台JS这块 先看一下页面的截图

  4. Android TV开发总结（四）通过RecycleView构建一个TV app列表页（仿腾讯视频TV版）

    转载请把头部出处链接和尾部二维码一起转载,本文出自逆流的鱼yuiop:http://blog.csdn.net/hejjunlin/article/details/52854131 前言:昨晚看锤子手 ...

  5. python实现一个栏目的分页抓取列表页抓取

    python实现一个栏目的分页抓取列表页抓取 #!/usr/bin/env python # coding=utf-8 import requests from bs4 import Beautifu ...

  6. espcms列表页ajax获取内容 - 并初始化swiper

    <link rel="stylesheet" href="swiper.min.css" type="text/css" media= ...

  7. 夺命雷公狗---DEDECMS----15dedecms首页栏目列表页导航部分完成

    我们在点击导航页面的连接时候我们需要我们的连接跳到指定的模版页面,而不是随便跳到一个指定的A连接标签: 所以我们首先要将前端给我们的栏目列表模版拷贝到目录下,然后就可以创建栏目列表页面了,但是名字我们 ...

  8. Asp.net MVC 3实例学习之ExtShop（四）——完成产品列表页

    在完成产品列表页前要做一些准备功夫.首先是去下载MvcPager用了为产品列表分页.下载的可能是基于MVC 2的,没关系,可以用在MVC 3上.如果有担心,下载源代码重新编译一次好了.下载后将DLL添 ...

  9. 帝国cms 列表页分页样式修改美化【2】

    上一篇(帝国cms 列表页分页样式修改美化[1])中我们已经对分页说了一个大概,下面我们就自己动手弄一个分页把: 第一步:进入帝国cms后台,点击系统设置->系统参数设置->信息设置:里面 ...

随机推荐

  1. java 注意事项---避免踩坑

    1.......对象参数接收不能大写

  2. 【转】Java中的新生代、老年代、永久代和各种GC

    JVM中的堆,一般分为三大部分:新生代.老年代.永久代: 1 新生代 主要是用来存放新生的对象.一般占据堆的1/3空间.由于频繁创建对象,所以新生代会频繁触发MinorGC进行垃圾回收. 新生代又分为 ...

  3. js变量类型和计算

    # js入门基础-变量类型和计算 ` --首先由于我使用了一个不太合格的markdown来编写来文章,所以在移动端阅读不要太方便,建议移动端使用横屏模式或pc端阅读,当然如果你有平板那是最好的. -- ...

  4. spring boot集成swagger，自定义注解，拦截器，xss过滤，异步调用，guava限流，定时任务案例, 发邮件

    本文介绍spring boot集成swagger,自定义注解,拦截器,xss过滤,异步调用,定时任务案例 集成swagger--对于做前后端分离的项目,后端只需要提供接口访问,swagger提供了接口 ...

  5. ICMP shell

    场景 反向shell的场景下使用 原理 ICMP作为获取反向shell的通道 实践 运行 run.sh报错,可能是因为用的Parrot.改一下就可以了 ifconfig | grep 'inet '| ...

  6. request模块

    一 介绍 二 基于GET请求 三 基于POST请求 四 响应Response 五 高级用法 一 介绍 # 介绍:使用requests可以模拟浏览器的请求,比起之前用到的urllib,requests模 ...

  7. IDEA中执行MAVEN命令打jar包

    SpringBoot Jar包打包 1.工程POM配置packaging为jar. <packaging>jar</packaging> 2.增加MAVEN运行配置 添加MAV ...

  8. pwnable.tw silver_bullet

    产生漏洞的原因 int __cdecl power_up(char *dest) { char s; // [esp+0h] [ebp-34h] size_t new_len; // [esp+30h ...

  9. 前端开发【第1篇：HTML】

    HTML初识 1.什么是HTML HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记).相当于定义统一的一套规则,大家都 ...

  10. 设置SecureCRT的背景色和文字颜色方案

    一.对于临时设置,可以如下操作: 首先options -- session - appearance 此处可以设置临时的窗口背景,字体颜色,大小等等,为什么说是临时,是因为只要你关闭连接后,又会恢复. ...