目標偽類選擇器target——手風琴效果
阿新 • • 發佈：2019-02-16
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>手風琴</title> <link rel="stylesheet" href="shoufengqin.css" type="text/css"> </head> <body> <div class="accordionMenu"> <div class="menuSection" id="brand"> <h2><a href="#brand">Brand</a></h2> <p>第一個區域</p> </div> <div class="menuSection" id="promotion"> <h2><a href="#promotion">Promotion</a></h2> <p>第二個區域</p> </div> <div class="menuSection" id="event"> <h2><a href="#event">Event</a></h2> <p>第三個區域</p> </div> </div> </body> </html>
css程式碼
/*設定位置*/ .accordionMenu{ background: #fff; color: #424242; margin: 0 auto; width: 500px; border: 1px solid red; font-size: 12px; font-family: Arial, Verdana, sans-serif; } /*accordionMenu下所有的子元素或者孫輩元素h2*/ .accordionMenu h2{ margin: 5px 0; position: relative; } /*製作向下三角效果*/ .accordionMenu h2:before { border: 5px solid black; content: ""; height: 0; position: absolute; right: 10px; top: 10px; border-color:#fff transparent transparent transparent; width: 0; } /*製作手風琴標題欄效果*/ .accordionMenu h2 a{ background: #8f8f8f; display: block;/*塊級元素，鋪滿整個區域*/ color:#424242;/*預設的字型顏色*/ font-size: 13px; margin: 0; padding: 10px 10px;/*文字距離四周的間距*/ text-shadow: 2px 2px 2px #aeaeae; text-decoration: none; } /*目標標題的效果，點選之後標題的效果*/ .accordionMenu :target h2 a, .accordionMenu h2 a:focus, .accordionMenu h2 a:hover, .accordionMenu h2 a:active{ background: #2288dd; color:#FFF; } /*標題欄對應的內容*/ .accordionMenu p{ margin: 0; height: 0;/*預設欄目內容高度為0，達到隱藏的效果*/ overflow: hidden; /*padding: 0 10px;*/ } /*關鍵程式碼，展開對應目標內容*/ .accordionMenu :target p{ height: 100px; overflow: auto; } /*展開時標題上的三角效果*/ .accordionMenu :target h2:before{ border-color: transparent transparent transparent #fff; }