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后台,点击系统设置->系统参数设置->信息设置:里面 ...
随机推荐
- Flask-Login用户登陆
Flask-Login Flask-Login 提供用户会话管理,处理常见的登录.退出和注册的任务. Flask-Login 没有绑定数据库,可以从数据库回调用户对象. 安装flask-login p ...
- HttpUtility.UrlEncode()关于空格的编码问题
因为 HttpUtility.UrlEncode 在 Encode 的时候, 将空格转换成加号"+", 在 Decode 的时候将"+"号转为空格, 但是浏览器 ...
- webpack4.0学习记录
2019/04/28 1.本质上,webpack基于node node跟webpack为最新稳定版,才能更好,更快的打包 安装 1.卸载node 直接在控制面板 卸载 2.安装 从官网下载 然后 ...
- 基于注解的SpringMVC添加其他的Servlet、Filter以及Listener
我们可以在AbstractAnnotationConfigDispatcherServletInitializer的实现类中重写onStartup(ServletContext servletCont ...
- Nginx下配置虚拟主机的三种方法
Nginx下,一个server标签就是一个虚拟主机. 1.基于域名的虚拟主机,通过域名来区分虚拟主机——应用:外部网站 2.基于端口的虚拟主机,通过端口来区分虚拟主机——应用:公司内部网站,外部网站的 ...
- MySQL之CONCAT()的用法
mysql CONCAT()函数用于将多个字符串连接成一个字符串,是最重要的mysql函数之一,下面就将为您详细介绍mysql CONCAT()函数,供您参考 mysql CONCAT(str1,st ...
- notepad++安装nppFTP
官网下载的最新版notepad++,结果pluginadmin里面installnppftp总是安不上,点击install之后然后点是就退出,再进去也没有安装好. 网上找了半天也没找到什么有用信息,最 ...
- python vs C++ 类
1. 什么是动态语言(wikipedia) 在运行时,可以进行一些操作(静态语言在编译时执行),比如扩展对象的定义.修改类型等 2. 定义类和创建对象 C++ python class A{ publ ...
- loadrunner使用过程遇到的问题（一）
1.如果log日志出现乱码,如何设置?(对于乱码设置只是对单一脚本有效,并不是全部脚本有效,所以多个脚本出现乱码,需要逐个设置) loadrunner12版本设置方法,在preference里面,设置 ...
- shell实用
nginx日志切割 [root@localhost ~]# vim /opt/fenge.sh #!/bin/bash #Filename:fenge.sh d=$(date -d "-1 ...