CSS教程:专门介绍滑动门

米兮mmm

米兮mmm

2016-02-19 23:22

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

滑动门(Sliding Doors)

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

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

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

css

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

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

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

HTML代码如下:

ul lia href="http://www.webjx.com" 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;
}

展开更多 50%)
分享

猜你喜欢

CSS教程:专门介绍滑动门

Web开发
CSS教程:专门介绍滑动门

CSS教程:滑动门与选项卡

Web开发
CSS教程:滑动门与选项卡

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

CSS高级技巧:滑动门技术

Web开发
CSS高级技巧:滑动门技术

CSS的滑动门技术研究

Web开发
CSS的滑动门技术研究

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

认识学习CSS中的滑动门技术

Web开发
认识学习CSS中的滑动门技术

CSS中的滑动门技术研究

Web开发
CSS中的滑动门技术研究

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

WPS移动版体验春节休假式办公

WPS移动版体验春节休假式办公

CSS教程:容器定位

CSS教程:容器定位
下拉加载更多内容 ↓