教程：CSS高级技巧之滑动门技术－css设计－eNet网络学院－中国最权威的电脑教程软件资讯网站

首页 \| 新闻资讯 \| 软件应用 \| 图形图像 \| 网络应用 \| 硬件学堂 \| 程序开发 \| 安全中心 \| 素材下载 \| 作者专区 \| 学院论坛
精选专题 \| 精美壁纸 \| 专家答疑 \| Flash剧场 \| Photoshop \| 名词解释 \| 梦幻桌面 \| PS高手进阶 \| QQ区 \| 图书 \| 黑客教材

Flash教程\| 卡通制作 \| AutoCAD \| 3DMax实例 \| PS视频教程\| 网页制作 \| CorelDRAW\| Firework \| 滤镜与实例 \|	全部视频教程

当前位置：eNet硅谷动力 > 学院频道 > css设计

教程：CSS高级技巧之滑动门技术

2008-06-17 08:46 来源：网页教学网

【简介】
滑动门技术是CSS引入的一项用来创造漂亮且实用的界面的新技术, 它使用简单, 我们只需要使用两张单独的背景图片, 就可以实现.

　　　　

加入收藏　

　　滑动门(Sliding Doors)

　　还是决定把滑动门单独提作一种单独的技术.

　　它是CSS引入的一项用来创造漂亮且实用的界面的新技术, 它使用简单, 我们只需要使用两张单独的背景图片, 就可以实现.

css

css

　　滑动门一般用做网站Tab导航, 根据Tab中内容的长短自动缩放Tab的效果.

css

css

　　前面所述的圆角矩形只是它的一种实现方式而已. 真正的滑动门只需要2组标签就可以完成:

　　HTML代码如下:

　　<ul> <li><a href="http://www.enet.com.cn" title="">硅谷动力</a></li> </ul>

　　CSS代码大致如下:

　#header li {
float:left;
background:url("left_both.gif")no-repeat left top;
margin:0;
padding:0 0 0 9px;
border-bottom:1px solid #765;
}
#header a {
float:left;
display:block;
background:url("right_both.gif")no-repeat right top;
padding:5px 15px 4px 6px;
text-decoration:none;
font-weight:bold;
color:#765;
}

热门推荐：

在命令行下配置XP防火墙的办法

解决四种宽带路由器不能上网故障

【责任编辑彭凡】

关键字:

css设计　

网页设计　

CSS技巧　

滑动门　

您对这篇文章的看法是: 　　喜欢反感支持反对加油鄙视学习打击佩服漂亮路过

【视频教程】【专题汇总】【不懂就问我】【关闭窗口】

Photoshop CS4快速打造飘渺的烟

贴心改进一大摞泄露版快车3.0体验

拼拼贴贴Walter Vasconcelos插画

PPS网络电视（PPStream） V2.6.85

技巧：教你无线ADSL猫的安全设置

相关文章

·CSS开发：合理的编码与组织技巧
·CSS初学教程如何修改blog中的CSS
·学习完全掌握纯CSS布局网页
·标准的DIV CSS布局对SEO的影响
·新手知识：学习css需要什么软件
·提高CSS的网页渲染效率11点注意项
·提高CSS文件可维护性的五种方法
·HTML网页制作的八条强大技巧
·网站优化(SEO)整体策略涉及具体内容
·网站变黑白灰色的4种代码详解
·网站建设课程之网站规范认识
·css布局实例:网页布局的方法

　本栏目最新文章

·网页制作:不同浏览器CSS Hack写法

·关于网页制作CSS不解析问题的解决

·CSS实现表格行鼠标滑过高亮显示

·浅谈IE与Firefox对CSS的不同解析

·网页导航上用CSS标志当前页效果

　精彩回放

·3DSMAX打造书本翻开效果
·共享上网技巧应用四则
·陪酒女浸泡在酒里的青春
·美女的性感靓丽婚纱设计
·妖冶身姿死或生3壁纸
·剿灭Win XP下的29个烦恼
·黑客必备 NET命令大全
·用PS制作精致绝伦的红酒

　精彩推荐

　今日软件下载

汇聚精彩清晰流畅
NETiTV
网络电视王中王

　往日推荐

·手工破解网吧多种限制
·Windows 网络管理技巧
·WMP 10使用技巧三则
·女孩问你帅不帅要小心
·注册表优化XP 20招
·制作XP万能ghost光盘
·WMP10火拼DVD播放器
·街头霸王图片集中营
·五大搜索引擎横向评测
·防御计算机病毒十大步骤

·Photoshop CS4快速打造飘渺的烟

·香港十大魔鬼身材“花瓶”女星

·拼拼贴贴Walter Vasconcelos插画

·技巧：教你无线ADSL猫的安全设置

·贴心改进一大摞泄露版快车3.0体

·为了生存网吧被强制安装Linux系

·PhotoShop实例精选电

·PS初学者十三课,献给

·Photoshop经典教程集

·eNet学院史上最优秀

·PS鼠标手绘之二——

·photoshop快捷键大全

热点推荐

修复灰暗照片

浪漫婚纱照片

Flash视频编程

章子怡月历桌面

·21互联Maya2008基础视频教程

·Photoshop CS3平面广告设计

·C++从入门到精通视频教程

·21视频Office2007视频教程

·2008年度网络电视大盘点

·计算机等级考试二级VB上机

·Pisaca照片管理软件教程

·瑞星杀毒30元轻松用全年

·瑞星卡卡上网助手正版免费

有女如莲 Photoshop手绘古典美女

往日推荐

网站重构设计

美女怀旧照片