CSS实例教程:专业详细介绍拖动门

日期:2020-09-30 类型:科技新闻 

关键词:免费自助建站,手机建站平台,wap建站,免费自助建站平台,H5网站,H5模板建站


拖动门(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;
}