CSS网页页面案例:斜角拖动门导航栏条

日期:2021-03-16 类型:科技新闻 

关键词:开发一个小程序多少钱,凡科轻站小程序,微信群抽奖小程序,小程序登录页面,微信小程序 微店


斜角导航栏条看上去立体式感较为强,但完成起来较为不便;这是前几日写的1个检测编码,完成时,原本想用简易的照片加负数来完成;但GIF照片对半全透明的实际效果没法有很好的适用;因此1边写编码,1边在改图,照片改的较为乱,CSS也沒有提升; 但实际效果出来了; 写出来和大伙儿共享1下;
最先说1下,要完成的总体目标:
    拖动门,要适配每一个TAB将会出現的宽度(篇幅)不统1的难题; 后台管理程序流程完成起来简易,关键是标识TAB是不是被选定; 访问器的适配和放在较不光滑的编码自然环境中,有很好的主要表现;

刚开始作了,我先用FW画了1个有点立体式感的导航栏条,基础便是要完成的总体目标

从后向前写合理布局
<ul class="tab">
<li class="one"><a href="index.php" class="on"><span>大城市主页</span></a></li>
<li><a href="kAAE.php"><span>房子租售</span></a></li>
<li><a href="kAAI.php"><span>招骋应聘求职</span></a></li>
<li><a href="kAAk.php"><span>同城网主题活动</span></a></li>
<li><a href="kAAU.php"><span>家政服务</span></a></li>
<li><a href="kAAt.php"><span>同城网寻缘</span></a></li>
<li><a href="kAAs.php"><span>2手销售市场</span></a></li>
<li><a href="kAAh.php"><span>车辆交易</span></a></li>
<li><a href="kAAO.php"><span>学习培训学习培训</span></a></li>
</ul>

class = one 一部分做为第1个TAB的独特解决;
class = on 做为选定情况;
开写CSS一部分:
因为较为简易,我就不写注解了;
<style>
.tab{float:left; font-size:12px; line-height:1.8}
.tab li{display:inline;}
.tab li a{background:url(/articleimg/2008/07/5969/02.gif) no-repeat;float:left;text-decoration:none;}
.tab li a span{ display:block; background:url(/articleimg/2008/07/5969/02.gif) no-repeat; padding:5px 10px 5px 20px;}
.tab a:link,.tab a:visited{ background-position:right ⑸1px; text-decoration:none}
.tab a:hover,.tab a:active,.tab a.on,.tab a.on:link,.tab a.on:visited{ background-position:right ⑴62px;}
.tab a:link span,.tab a:visited span{ background-position:0 0; color:#FFF; text-decoration:none}
.tab a:hover span,.tab a:active span,.tab a.on span,.tab a.on:link span,.tab a.on:visited span{ background-position:0 ⑴07px; color:#000;}
.tab .one a:link span,.tab .one a:visited span{ background-position:left ⑵62px; padding-left:30px;}
.tab .one a:hover span,.tab .one a:active span,.tab .one .on:link span,.tab .one .on:visited span{ background-position:left ⑵12px; padding-left:30px; color:#000}
</style>

用到的照片:

实际效果:
运作编码框

[Ctrl A 所有挑选 提醒:你可先改动一部分编码,再按运作]