[代码收集]CSS切换页面版本的三格块导航代码(银白方块/选中灰暗) - 笑忘书网页代码收藏馆 - 35230.WODEMO.COM

首页-代码 2014-02-23 05:13:31 -0500

★CSS切换页面版本的三格块导航代码(银白方块/选中灰暗)★

请勿抄袭本页面

代码说明

提供三项切换页面版本，如需对某项进行选中灰暗处理可在对应的<a>标签里添加class="on"，并在其他项的删除该内容。除了切换，也可以利用第二个代码作为网址导航。代码采自46644手机网址导航

html代码(切换版)

<style>
#sewidth{text-align: center;font-size: 0;letter-spacing: -4px;white-space:nowrap;}
#sewidth a{font-size: 14px;color: #353535;display: inline-block;width: 80px;height: 30px;line-height: 30px;border: 1px solid #bababa;border-left-width: 0;background-color: #fbfbfb;letter-spacing: 0;}
#sewidth a.on{background-color: #efefef;color: #999;}
#sewidth a.swleft{-webkit-border-top-left-radius: 5px;-webkit-border-bottom-left-radius: 5px;-moz-border-radius-topleft: 5px;
-moz-border-radius-bottomleft: 5px;border-top-left-radius: 5px;border-bottom-left-radius: 5px;border-left-width: 1px;}
#sewidth a.swright{-webkit-border-top-right-radius: 5px;-webkit-border-bottom-right-radius: 5px;-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;border-top-right-radius: 5px;border-bottom-right-radius: 5px;}
.mtop5{margin-top: 5px;}
</style>
<div id="sewidth" class="wid mtop5">
<a href="javascript:void(0);" class="swleft on">普清版(320)</a> <a href="/">标清版(480)</a> <a href="/" class="swright">高清版(640)</a>
</div>

代码演示

普清版(320) 标清版(480) 高清版(640)

html代码(导航版)

<style>
#sewidth{text-align: center;font-size: 0;letter-spacing: -4px;white-space:nowrap;}
#sewidth a{font-size: 16px;color: #353535;display: inline-block;width: 80px;height: 30px;line-height: 30px;border: 1px solid #bababa;border-left-width: 0;background-color: #fbfbfb;letter-spacing: 0;}
#sewidth a.swleft{-webkit-border-top-left-radius: 5px;-webkit-border-bottom-left-radius: 5px;-moz-border-radius-topleft: 5px;
-moz-border-radius-bottomleft: 5px;border-top-left-radius: 5px;border-bottom-left-radius: 5px;border-left-width: 1px;}
#sewidth a.swright{-webkit-border-top-right-radius: 5px;-webkit-border-bottom-right-radius: 5px;-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;border-top-right-radius: 5px;border-bottom-right-radius: 5px;}
.mtop5{margin-top: 5px;}
</style>
<div id="sewidth" class="wid mtop5">
<a href="http://hu60.cn" class="swleft" target="_blank">虎绿林</a> <a href="http://35230.wodemo.com" target="_blank">笑忘书</a> <a href="http://wapmz.cn/tools/enter.aspx?id=15" class="swright" target="_blank">江湖网</a>
</div>

代码演示

虎绿林笑忘书江湖网

[代码仅供参考，转载请注明出处]

----Comments(1)----
翱翔的雄鹰 (@axdxy) | @ at 2014-02-23 07:38:
呃，我只是来looklook的…

Subscribe | Register | Login | N