DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS進階教程 >> 網頁代碼實例:CSS制作淘寶導航交互的小三角箭頭
網頁代碼實例:CSS制作淘寶導航交互的小三角箭頭
編輯:CSS進階教程     

 

沒事做了一個淘寶導航的小三角箭頭圖標,測試/支持環境:IE7+、Firefox8、chrome

以下為源碼:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>css實現的交互小三角箭頭圖標 -poluoluo.com網頁教學網</title>
<style type="text/css"> * {padding:0; margin:0;font:16px/22px verdana,"microsoft yahei";} div {width:400px; height:22px; background:#eee;margin:20px auto; padding:0 20px;} b {width:0; height:0;+margin-top:-15px;display:inline-block;border-color:#000 #eee #eee; border-style:solid; border-width:10px 10px 0;} strong {font-weight:500;margin:0 5px 0 0;} a {color:#333; text-decoration:none;} a:hover {color:#666} a:hover b {border-color:#eee #eee #000;border-width:0 10px 10px;} </style> </head>
<body> <a href="#"><strong>菜單</strong><b></b></a> </body> </html>

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved