一个网站一张图技术实例(domo)——个人版

tangalexis

浏览: 135542 次
性别:
来自: 广州

最近访客更多访客>>

kokorodo

djsmallpig

mengji61

koringz

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Demo

CSS XHTML HTML 数据结构

最近这几年一直流行加快网页的加载速度,现在来说一个加载网速的方法------------一个站点一第图.

/*------------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,一切就是这么简单,只要自己动手做一到二个这样的实例,你完全可以掌握这些方法.