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

此代码仅供参考

---

代码说明

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

---

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>

---

代码演示

---

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://tzs.wodemo.com" target="_blank">小客站</a> <a href="http://wapmz.cn/tools/enter.aspx?id=15" class="swright" target="_blank">江湖网</a> </div>

---

代码演示

---

---