妙味云课堂之css：滑动门、圆角、css精灵

jim8757

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

最近访客更多访客>>

世界杯2009

tangyaham

fengfantasy

examine5191

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

一. css滑动门

滑动门并不是一项全新的技术，它是利用背景图像的可层叠性，并允许他们在彼此之上进行滑动，以创造一些特殊的效果。

①、三层嵌套：

<style>
.btn{width:100px;background:url(img/btn.png) repeat-x;}
.btnL{background:url(img/btnL.png) no-repeat;}
.btnR{height:31px; background:url(img/btnR.png) no-repeat right 0;}
</style>

<body>
<div class="btn">
	<div class="btnL">
    	<div class="btnR">妙味课堂</div>
    </div>
</div>
</body>

②、两层嵌套：

<style>
.btn{width:200px;background:url(img/btn2.png) no-repeat;}
.btnR{height:31px; background:url(img/btnR.png) no-repeat right 0;}
</style>

<body>
<div class="btn">
	<div class="btnR">妙味课堂</div>
</div>
</body>

** 扩展要求高，用三层嵌套

** 扩展要求不高，用两层嵌套

③、滑动门实例：

<style type="text/css">
body,ul,li{margin:0; padding:0;}
li{list-style:none;}
a{text-decoration:none;}
body{padding:50px; background:#23232f}
.nav{height:35px;background:url(img/navL.png) no-repeat #0f0f14;float:left;}
.navR{background:url(img/navR.png) no-repeat right 0;float:left; padding:4px 4px 0 3px;}
.nav li{float:left;padding-left:1px;}
.nav a{background:url(img/btn2.png) no-repeat;float:left;}
.nav span{color:#FFF;background:url(img/btnR.png) no-repeat right 0; font-size:14px;float:left;height:31px;line-height:30px;padding:0 18px;}
.nav a:hover, a.active{background:url(img/hoverA.png) no-repeat}
.nav span:hover, a.active span{background:url(img/hoverR.png) no-repeat right 0}
</style>

<body>
<div class="nav">
    <ul class="navR">
        <li>
            <a href="hdm1.html">
            	<span>MiaoV</span>
            </a>
        </li>
        <li>
            <a href="hdm2.html">
            	<span>课程</span>
            </a>
        </li>
        <li>
            <a href="hdm3.html">
            	<span>关于我们</span>
            </a>
        </li>
        <li>
            <a href="hdm4.html" class="active">
            	<span>加入MiaoV</span>
            </a>
        </li>
    </ul>
</div>
</body>

二. 圆角

css3：border-radius:9px 不兼容ie

使用三层嵌套实现宽高可拓展圆角背景：

<style>
.box{width:300px;margin:30px auto;}
.boxHead{ background:url(img2/boxH.png) repeat-x;height:9px;overflow:hidden;}
.boxHeadL{ background:url(img2/boxHL.png) no-repeat;}
.boxHeadR{ background:url(img2/boxHR.png) no-repeat right 0; height:9px;}
.boxFoot{ background:url(img2/boxF.png) repeat-x;height:9px;overflow:hidden;}
.boxFootL{ background:url(img2/boxFL.png) no-repeat;}
.boxFootR{ background:url(img2/boxFR.png) no-repeat right 0;height:9px;}
.boxC{border-left:1px solid #e5e5e5;border-right:1px solid #e5e5e5;}
</style>

<body>
<div class="box">
	<div class="boxHead">
    	<div class="boxHeadL">
        	<div class="boxHeadR"></div>
        </div>
    </div>
    <div class="boxC">
    	页面内容<br/>
        页面内容<br/>
        页面内容<br/>
        页面内容<br/>
        页面内容<br/>
    </div>
    <div class="boxFoot">
    	<div class="boxFootL">
        	<div class="boxFootR"></div>
        </div>
    </div>
</div>
</body>

三. css精灵

CSS Sprites在国内很多人叫CSS精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去。
CSS Sprites并不是一门新技术，目前它已经在网页开发中发展得十分成熟。大部分公司要求前端工程师必须使用CSS 精灵，处理图片。

CSS精灵优点：
① 利用CSS精灵能很好地减少了网页的http请求次数，从而大大的提高了页面的性能，这也是CSS 精灵最大的优点；
② 减少图片大小；

<style>
.box{width:300px;margin:30px auto;}
.boxHead,.boxHeadL,.boxHeadR,.boxFoot,.boxFootL,.boxFootR{background:url(img2/ico.gif) no-repeat;}
.boxHead,.boxFoot{height:9px;overflow:hidden; background-repeat:repeat-x;}
.boxHeadL{ background-position:0 -9px;}
.boxHeadR{height:9px;background-position:right -18px;}
.boxFoot{background-position:0 -27px;}
.boxFootL{ background-position:0 -36px;}
.boxFootR{height:9px;background-position:right -45px;}
.boxC{border-left:1px solid #e5e5e5;border-right:1px solid #e5e5e5;}
</style>

<body>
<div class="box">
	<div class="boxHead">
    	<div class="boxHeadL">
        	<div class="boxHeadR"></div>
        </div>
    </div>
    <div class="boxC">
    	页面内容<br/>
        页面内容<br/>
        页面内容<br/>
        页面内容<br/>
    </div>
    <div class="boxFoot">
    	<div class="boxFootL">
        	<div class="boxFootR"></div>
        </div>
    </div>
</div>
</body>

CSS精灵缺点：
① 降低开发效率；
② 维护难度加大；

分享到：