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后台,点击系统设置->系统参数设置->信息设置:里面 ...
随机推荐
- MVC加载分布页的三种方式
第一种: @Html.Partial("_分部页") 第二种: @{ Html.RenderPartial("分部页" ...
- vue eventBus 跳坑的办法
前言(feihua): 最近闲来没事写了一个小的demo,在小的数据传输上没有必要去使用vuex,对于非父子组件的传值方法总结了一点心得体会供大家参考(如有太low,还请大神别喷俺) 先上官方文档: ...
- Python 中写一个装饰器实现限制频率访问
1.思路: 首先要在装饰器中确定访问的方法名, 第一次可以访问成功,之后要在规定的时间(变量)之后才可以访问. 初始应该有一个变量为0;访问成功之后把当前的时间赋值给这个变零. 这样再次访问时把当前的 ...
- centos7 nginx配置ssl证书实现https访问同时http访问
1,首先将你申请到的nginx 分类下的ssl证书上传到nginx的config下(可以新建一个目录叫ssl.) 2.修改nginx的config配置 server {listen 80;(监听80端 ...
- jquery.form插件 提交表单 type="hidden"取不到值的问题记录
1.外国文献:说可以改成其他的(非hidden),再加style="display:none"隐藏. <INPUT type="password" sty ...
- Vue.js学习笔记(介绍)
Vue语法也可以进行APP开发,需要借助weex Vue.js是一套构建用户界面的框架,只关注视图层,便于与第三方库或既有项目整合. 在Vue中的核心概念:让用户不能操作Dom元素(减少不必要的dom ...
- python 对Excel表格的写入
python对Excel表格写入需要导入xlrd ,和xlutils两个库 from xlrd import open_workbook from xlutils.copy import copy o ...
- 数据库根据id排序
select * from 表名 order by id 根据 id 从小到大排序
- el-table中单数行与双数行设置不同的背景颜色
<el-table :cell-style='cellStyle' :data="tableData" style="width: 100%;" > ...
- 重置studio 3T 14天试用
重置studio 3T 14天试用 bat 脚本 @echo off ECHO Reset Studio 3T Date of use ... FOR /f "tokens=1,2,* &q ...