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：工具准备之WebStorm安装配置
浅入深出Vue之工具准备(一):WebStorm安装配置 工欲善其事必先利其器,让我们先做好准备工作吧 导航篇 WebStorm安装配置 所有工具的下载地址都可以在导航篇中找到,这里我们下载的是最新版 ...
- .net core 2.0 报错：error NU1102: Unable to find package 。。。
这种是nuget无法还原的问题.解决问题的方法: 在项目文件所在的目录下创建文件:NuGet.Config 里面内容: "?> <configuration> <pa ...
- Java基础14-缓冲区字节流;File类
作业解析 阐述BufferedReader和BufferedWriter的工作原理, 是否缓冲区读写器的性能恒大于非缓冲区读写器的性能,为什么,请举例说明? 答: BufferedReader对Rea ...
- css悬浮提示框
效果图: code: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- 强大的Resharp插件（转）
使用VS有段时间了,一直深深的折服于其强大的功能.之前一直听说有Resharp这个工具,小猪一直也没有太在意.直到今天…… 下载安装: http://www.jetbrains.com/resharp ...
- C#实现在foreach中删除集合中的元素
List<string> str = new List<string>(); str.Add( "zs"); str.Add("ls") ...
- python正则表达式--分组、后向引用、前(后)向断言
无名.有名分组 (1)正则表达式—无名分组 从正则表 达式的左边开始看,看到的第一个左括号“(”表示表示第一个分组,第二个表示第二个分组, 依次类推. 需要注意的是,有一个隐含的全局分组(就是索引号为 ...
- Ipa 脱壳工具 Clutch dumpdecrypted 使用
1 Clutch 使用 下载地址 : https://github.com/kjcracks/clutch/releases 下载之后去掉去掉版本号 拖入手机的 /usr/bin/ 目录下 执行 c ...
- UiAutomator2.0 - 与AccessibilityService的关联
目录 一.Android中的 Accessibility 二.UiAutomator2.0 与 AccessibilityService 三.验证与 AccessibilityService的关联 A ...
- 论文阅读笔记四十八：Bounding Box Regression with Uncertainty for Accurate Object Detection(CVPR2019)
论文原址:https://arxiv.org/pdf/1809.08545.pdf github:https://github.com/yihui-he/KL-Loss 摘要 大规模的目标检测数据集在 ...