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>
HTML/CSS实现的一个列表页的更多相关文章
- Meteor 从一个列表页进入详情页怎样高速显示详情
无论是做android开发,还是做网页web开发,都 会有列表,都须要点击列表进入列表项的详情页面,查看具体信息,能常情况下,我们都是将这一列表项的id传到详情页,由详情页再到数据库查询具体信息. 在 ...
- 浅析列表页请求优化（history API）
最近搞了下列表页请求的功能,并做了一下调研整理,记此文备忘. 列表页请求的功能到处可见,比如在博客园. 点击相应的页码,页面返回相应的内容,看上去似乎大同小异,但是一些小的细节还是可以区分优劣. fu ...
- js~一个列表中包含上移下移删除等功能
最近做了一个项目,包括了一个列表页,为了用户体验,操作均使用JS实现,其中包括在列表中实现上移,下移,删除等功能,前台JS,后端数据修改使用AJAX,本文主要说一下前台JS这块 先看一下页面的截图
- Android TV开发总结（四）通过RecycleView构建一个TV app列表页（仿腾讯视频TV版）
转载请把头部出处链接和尾部二维码一起转载,本文出自逆流的鱼yuiop:http://blog.csdn.net/hejjunlin/article/details/52854131 前言:昨晚看锤子手 ...
- python实现一个栏目的分页抓取列表页抓取
python实现一个栏目的分页抓取列表页抓取 #!/usr/bin/env python # coding=utf-8 import requests from bs4 import Beautifu ...
- espcms列表页ajax获取内容 - 并初始化swiper
<link rel="stylesheet" href="swiper.min.css" type="text/css" media= ...
- 夺命雷公狗---DEDECMS----15dedecms首页栏目列表页导航部分完成
我们在点击导航页面的连接时候我们需要我们的连接跳到指定的模版页面,而不是随便跳到一个指定的A连接标签: 所以我们首先要将前端给我们的栏目列表模版拷贝到目录下,然后就可以创建栏目列表页面了,但是名字我们 ...
- Asp.net MVC 3实例学习之ExtShop（四）——完成产品列表页
在完成产品列表页前要做一些准备功夫.首先是去下载MvcPager用了为产品列表分页.下载的可能是基于MVC 2的,没关系,可以用在MVC 3上.如果有担心,下载源代码重新编译一次好了.下载后将DLL添 ...
- 帝国cms 列表页分页样式修改美化【2】
上一篇(帝国cms 列表页分页样式修改美化[1])中我们已经对分页说了一个大概,下面我们就自己动手弄一个分页把: 第一步:进入帝国cms后台,点击系统设置->系统参数设置->信息设置:里面 ...
随机推荐
- 浅入深出Vue系列
浅入深出Vue导航 导航帖,直接点击标题即可. 文中所有涉及到的资源链接均在最下方列举出来了. 前言 基础篇 浅入深出Vue:工具准备之WebStorm搭建及配置 浅入深出Vue之工具准备(二):Po ...
- js一些格式化
/* 格式化金额 */function formatAmount(s, n) { n = n > 0 && n <= 20 ? n : 2; s = p ...
- 第一章Java学习（查漏补缺）
第一章主要内容: 1.Java的地位:网络地位 语言地位 需求地位 2.Java的特点:①简单 面向对象 平台无关:软件的运行不因操作系统,处理器的变化而无法运行或出现运行错误. ②多线程 动态 3. ...
- javascript闭包学习
(function(){})()===>>>>函数会被立即执行function(){}是一个函数用括号包起来表示是函数表达式再加()表示函数自执行 如何理解闭包?1.定义和用 ...
- php cookie的问题
- Javascrip动态添加样式，Dom操作，获取自定义属性
var layer=document.querySelector('.layer') 添加样式: 添加单个样式: layer.style.display="block" 添加多个样 ...
- 高可用Redis(十二)：Redis Cluster
Redis Cluster是Redis官方提供的Redis集群功能 1.为什么要实现Redis Cluster 1.主从复制不能实现高可用 2.随着公司发展,用户数量增多,并发越来越多,业务需要更高的 ...
- js之词法作用域与动态作用域
事实上JavaScript并不具有动态作用域,它只有词法作用域,简单明了,但是this机制某种程度上很像动态作用域 词法作用域:是一套引擎如何寻找变量以及会在何处找到变量的规则,它是定义在词法阶段的作 ...
- Android6.0以上系统动态获取权限
动态权限的申请方法: 1.首先,需要在AndroidManifest.xml静态申请权限,否则无法动态申请权限: <uses-permission android:name="andr ...
- 【原创精品】mac 彻底卸载趋势科技
在公司,给我的mac 笔电装了公司的查杀毒软件,此后,这货就像挥之不去的病毒,就像你心理上阴影一样如影随形,最邻人方案的是这货没界面,只是个后台服务,一般人就没办法了.最最令人反感的是它经常控制/拖慢 ...