最近这几年一直流行加快网页的加载速度,现在来说一个加载网速的方法------------一个站点一第图.
/*------------html结构-----------*/
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<title>滑动技术 Demo</title>
<link type="text/css" href="css/solid.css" rel="stylesheet"/>
</head>
<body>
<div class="subMenu">
<ul class="clearfix">
<li class="home"><a href="#">首页</a></li>
<li class="oa"><a href="#">OA</a></li>
<li class="co"><a href="#">企业数据</a></li>
<li class="knowledge"><a href="#">知识管理</a></li>
<li class="family"><a href="#">员工之家</a></li>
</ul>
</div>
</body>
</html>
/*------------------css--------------*/
/*
author:Alexis
date:08/7/25
content:一个滚动门技术,它将多个图片混合而成,组成一张图片。我们就可以在这一整张图片中进行截取。但是需要注意的是,我们一般是将图片放在座标的左下角进行截取,而不是放在右下角,从中我们可以找寻到一个规律:
首先,我们必须规定好li的长与宽,然后根据它的长与宽找到对应的座标值,主重要的是这个图片属性:background-posiotn:x坐标,Y坐标.一直在变的主要是X坐标,而Y坐标只是高度的变化,依此类推。详细的情况大家可以根据我下面的CSS样式,然后动动手进行实际的操作.
*/
* {margin:0; padding:0;}
body {font:12px '宋体'; text-align:center;}
.clear{clear:both; display:block;}
.clearfix:after{conent:"."; height:0; display:block; overflow:hidden;}
.subMenu {float:right; margin:0 auto; width:305px; position:relative;}
.subMenu ul{list-style:none;}
/*设置了图片的长与宽*/
.subMenu ul li {float:left; background:url(../img/iconLink.jpg) no-repeat left top; width:61px; height:81px;}
/*正常模式下: :link*/
.subMenu ul li a {text-index:-9999px; display:none;}
.subMenu ul li.oa {background-position:-62px 0;}
.subMenu ul li.co {background-position:-126px 0;}
.subMenu ul li.knowledge {background-position:-190px 0;}
.subMenu ul li.family {background-position:-253px 0;}
/*鼠标放上去的动作: :hover*/
.subMenu ul li:hover {background-position:0 -83px;}
.subMenu ul li.oa:hover {background-position:-62px -83px;}
.subMenu ul li.co:hover {background-position:-126px -83px;}
.subMenu ul li.knowledge:hover {background-position:-190px -83px;}
.subMenu ul li.family:hover {background-position:-253px -83px;}
/*鼠标单击过后的动作: :active*/
.subMenu ul li:active {background-position:0 -166px;}
.subMenu ul li.oa:active {background-position:-61px -166px;}
.subMenu ul li.co:active {background-position:-126px -166px;}
.subMenu ul li.knowledge:active {background-position:-190px -166px;}
.subMenu ul li.family:active {background-position:-253px -166px;}
OK,一切就是这么简单,只要自己动手做一到二个这样的实例,你完全可以掌握这些方法.
- 大小: 93.6 KB
分享到:
相关推荐
里面是几个domo,单个文件上传的domo,还有多文件上传,多线程的上传,离线上传。 很适用
生命周期钩子的案例示例代码,主要讲解了生命周期的原理以及实现轮播图的案例,感兴趣的可以拿来参考一下,如有错漏请私信,会及时修改。
异步任务类domo
本人刚写的一个新手入门级的DOmo 比较容易看懂
部署在tomcat服务器下,直接访问parent.jsp页面即可运行,包括父窗口向子窗口传递值和子窗口向父窗口传递值,子窗口调用父窗口的方法
java加载xml文件并解析得到数据java加载xml文件并解析得到数据
虚拟出版社系统 模拟出版社的业务流程 程序Demo-Virtual Press System Simulation of business process procedures Press Demo
Domo API SDK是自动化Domo实例的最简单方法 SDK简化了API编程体验,使您可以大大减少编写的代码 特征: 数据集和个性化数据策略(PDP)管理 将数据集用于相当静态的数据源,这些数据源仅需要通过数据替换进行偶尔...
关于如何通过jboss,cometd,dojo,jetty,domo建立一个实时动态监听的domo系统
微信小程序微信小程序微信小程序微信小程序微信小程序微信小程序微信小程序微信小程序微信小程序微信小程序微信小程序
Domo_12345.vcxproj
Layabox_as 导出安卓并互相调用domo 使用layaide导出Android_studio后即可在Android_studio中导出apk
成语接龙js JavaScript实现成语接龙游戏domo JavaScript实现成语接龙游戏domo
列表框domo,提供大家学习
ssm框架集,成另加用户分页查询domo增删改查案例,根据自己的要求修改项目名称,有问题在下方评论
这是我初步接触applet时的一点理解,上传了一个简单的domo
Unity2018的package,包括模型、动画。
halcon视觉domo,窗体交互以及运用
用Unity制作的口袋妖怪游戏domo。
Xcode 7.1项目中Objective-C和swift混合编程,文章的源代码。