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后台,点击系统设置->系统参数设置->信息设置:里面 ...
随机推荐
- 在vscode中使用eslint+prettier格式化vue项目代码 (转载)
ESlint:javascript代码检测工具,可以配置每次保存时格式化js,但每次保存只格式化一点点,你得连续按住Ctrl+S好几次,才格式化好,自行体会~~ vetur:可以格式化html.标准c ...
- 肺结节CT影像特征提取（五）——肺结节CT影像ROI区域灰度直方图及其图形化
在博客肺结节CT影像特征提取中,已经实现了肺结节的灰度.纹理和形态特征的提取.但是,对于进一步了解ROI区域像素值或者说CT值的分布来说,还存在一定的不足,不能够很好的显示ROI区域. 因此,本文将进 ...
- MariaDB存储过程笔记
FECTH INTO 字段名不能与 CURSOR FOR 中select字段名一致,否则FETCH出的值均为空. DECLARE 字段名不能与 CURSOR FOR 中select语句内where条件 ...
- 帆软认证BI工程师FCBA-部分题目
1.安装32位系统的FineBI,最多只能支持2G内存. 正确 错误 2.Spider数据引擎中适合内存化的表通常为数据量小且更新频率较低的表. 正确 错误 3.Spider数据引擎支持跨数据源进行数 ...
- MemCache详细解读（转）
参考:https://www.cnblogs.com/xrq730/p/4948707.html MemCache是什么 MemCache是一个自由.源码开放.高性能.分布式的分布式内存对象缓存系统, ...
- 关于COOKIE在本地可以正常写入发布后不能写入浏览器的问题
看了一下cookie的属性设置如下: HTTP Cookie 设置了secure , 该cookie只能在HTTPS通道下被写入浏览器. HTTPS Cookie 设置了sec ...
- UVA1449 Dominating Patterns
UVA1449 Dominating Patterns 题目描述 有N个由小写字母组成的模式串以及一个文本串T.每个模式串可能会在文本串中出现多次.你需要找出哪些模式串在文本串T中出现的次数最多. 输 ...
- linux 大杂烩
1.linux mysql输错命令 mysql命令行中执行多行命令时,如果前边输入的命令发生错误,是很令人头疼的事情,可以通过输入\c来取消前边的输入,重新进入“mysql->”提示符. 2.l ...
- 论文阅读笔记四十八：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 摘要 大规模的目标检测数据集在 ...
- C#截取用户的点击事件的代码
在代码过程中中,把做工程过程中常用的代码备份一下,如下代码内容是关于C#截取用户的点击事件的代码,应该是对大家也有好处. private void SomeControl_KeyDown(object ...