CSS高級技能:拖动门技术性

日期:2021-01-20 类型:科技新闻 

关键词:怎么把小程序变成二维码,微信小程序怎么开通,微信小程序csdn,小程序开发,网络答题小程序


上1篇CSS实例教程 文章内容:CSS高級技能:照片更换 拖动门(Sliding Doors)
還是决策把拖动门独立提作1种独立的技术性.
它是CSS引进的1项用来造就好看且好用的页面的新技术应用, 它应用简易, 大家只必须应用两张独立的情况照片, 便可以完成.

拖动门1般用做网站Tab导航栏, 依据Tab中內容的长短全自动放缩Tab的实际效果.

前面所述的圆角矩形框只是它的1种完成方法罢了. 真实的拖动门只必须2组标识便可以进行:
HTML编码以下:

<ul>
<li><a href="https://www.jb51.net" 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; }

彻底合乎词义, 并且沒有过剩的标识, 十分完善, 还能根据a:hover来进1步制做旋转实际效果.强烈推荐!
下1篇CSS实例教程 文章内容:CSS高級技能:文本围绕照片