CSS教程:专门介绍滑动门

2016-02-19 23:22 9 1 收藏

下面是个简单易学的CSS教程:专门介绍滑动门教程,图老师小编详细图解介绍包你轻松学会,喜欢的朋友赶紧get起来吧!

【 tulaoshi.com - Web开发 】

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

滑动门(Sliding Doors)

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

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

css

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

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

HTML代码如下:

ul lia href="http://www.webjx.com" title=""网页教学网/a/li /ul

CSS代码大致如下:

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

#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;
}

来源:http://www.tulaoshi.com/n/20160219/1629780.html

延伸阅读
标签: Web开发
代码如下: 以下是引用片段: style #galleryh {   padding:0;   margin:0 auto 5em auto;   list-style-type:none;   overflow:hidden;   width:495px;   height:240px;   border:1px solid #888;   background:#fff url(/imagelist/06/24/o9642o826u4n.gif);   } #galleryh li {  ...
标签: Web开发
CSS+Javascript实现新闻滑动文本选项卡显示,在网页中应用选项卡可以使网页显得更紧凑,结合AJAX技术可以使页面在有限的空间内展现更多的内容: 以下是引用片段: !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd" HTMLHEADTITLE绝对经典的滑轮新闻显示(jav...
标签: Web开发
英文原文:Sliding Photograph Galleries 翻译整理:西米CC-www.ximicc.com 效果 : 运行代码框 !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"headmeta http-equiv="Conte...
标签: Web开发
在讲CSS优先级之前,我们得要了解什么是CSS,CSS是用来做什么的。 首先,我们对CSS作一个简单的说明:CSS是层叠样式表(Cascading Style Sheets)的简称。它的规范代表了互联网历史上一个独特的发展阶段。现在对于从事网页制作的朋友来说,应该很少没有听说过CSS了,因为在制作网页过 程中我们经常需要用到。 其次:我们能通过CSS为文档设...
标签: Web开发
Conditional-CSS允许你针对单一浏览器或浏览器组写出有逻辑条件的可维护的特定的CSS声明。 相关文章:针对不同版本的IE浏览器的条件CSS应用 条件CSS的高级用法 使CSS针对特定的浏览器。 简化你对CSS文件的维护。 优化你的CSS。 解决CSS那些使人烦恼的小BUG。 自动扩展和引入@import声明。 它是免费和开源的! 毫无疑问,你会发现很多情况...

经验教程

135

收藏

64
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部