html制作花样链接卡页面

花样链接卡页面"/>

html制作花样链接卡页面

这是一款效果不错的Tab选项卡式css3全屏页面切换特效。该特效使用CSS Transitions和:target伪类完成。

HTML

html结构包括5个主要的div：一个头部header和4个内容面板。第一个内容面板只有一个ID和class content。其它内容面板都有一个ID和一个class panel。在它们里面又包含一个class为content的div。

Home

Some content

Portfolio

Some content

About

Some content

Contact

Some content

header部分将被由于放置tab选项卡导航按钮。

Page Transitions with CSS3

• Home
• Portfolio
• About Me
• Contact

把header放置到html结构的底部的原因是我们使用兄弟选择器(~)来控制导航按钮，这样我们就可以给按钮不同的颜色。

css代码请参考下载文件。