doctype html>
<
html
lang
="en"
>
<
head
>
<
meta
charset
="utf-8"
>
<
title
>css3用target屬性製作垂直口風琴
title
>
<
style
>
.accordionmenu
.accordionmenu h2
.accordionmenu h2:before
.accordionmenu h2 a
.accordionmenu :target h2 a,
.accordionmenu h2 a:focus,
.accordionmenu h2 a:hover,
.accordionmenu h2 a:active
.accordionmenu p
.accordionmenu :target p
.accordionmenu :target h2:before
/*上面是實現手風琴效果的所有樣式**，其中最為關鍵的是：
*//*
1、實現動態效果
*/.accordionmenu p
/*在每塊面板內容上使用了css3的transition來實現改變面板展開時高度的平滑過渡。
*//*
2、製作面板標題
*/.accordionmenu h2 a
.accordionmenu :target h2 a,
.accordionmenu h2 a:focus,
.accordionmenu h2 a:hover,
.accordionmenu h2 a:active
/*此處我們主要使用了css的gradient、border-radius、text-shadow等屬性製作了面板標題的預設狀態和當前狀態的樣式風格。
*//*
3、製作三角效果
*/.accordionmenu h2:before
.accordionmenu :target h2:before
/*上面樣式主要使用了css3的偽類「:bofore」配合「border」製作三角形
*//*
4、展開樣式 這一步是最為關鍵的一步，css3的偽類「:target」實現點選面板標題時，改變面板主內容「p」的高度。
*/.accordionmenu :target p
style
>
head
>
<
body
>
<
div
class
="accordionmenu"
>
<
div
class
="menusection"
id="brand"
>
<
h2><
a href
="#brand"
>brand
a>
h2>
<
p>content for brand
p>
div>
<
div
class
="menusection"
id="promotion"
>
<
h2><
a href
="#promotion"
>promotion
a>
h2>
<
p>content for promotion
p>
div>
<
div
class
="menusection"
id="event"
>
<
h2><
a href
="#event"
>event
a>
h2>
<
p>content for event
p>
div>
div>
body
>
html
>
效果圖：
target的應用css3屬性:target來製作乙個非常簡單的動畫口風琴的效果。
css3 target偽類的簡介
css3 target偽類是眾多實用的css3特性中的乙個。它用來匹配文件(頁面)的uri中某個標誌符的目標元素。具體來說，uri中的標誌符通常會包含乙個」#」字元，然後後面帶有乙個標誌符名稱，比如「#brand」，target就是用來匹配id為「brand」的元素的。
現在在頁面中，點選乙個id鏈結後，頁面只會跳轉到相應的位置，但是並不會有比較明顯的ui標識，使用:target偽類可以像:hover等偽類一樣對目標元素定義樣式。
因為我們討論的是有關於css3的屬性，它支援所有現代瀏覽器，但在ie6-8下無法執行。
「div.accordionmenu」包裝了手風琴所有塊；
「div.menusection」包含手風琴每塊的標題和主內容
把口風琴每塊的標題定義為「h2」
口風琴每塊主內容放在了乙個「p」中，並與「h2」相鄰，當然大家也可以把主內容放置在乙個「div」中，容易管理
此處最關鍵的一點是正如前面介紹「target」，我們使用「target」來達到點選展開動畫效果，我們每一塊需要id來配合使用，因此我們在手風琴中的每一塊中定義了乙個id號，並且在標題中的「」鏈結的「href」屬性鏈結了相對應塊的id號。
如何用CSS3製作出風琴效果
如何用css3製作出風琴效果 開發工具與關鍵技術 html一開始我以為製作風琴效果需要用到js，但用css3動畫也能實現，如下圖 一開始是這樣，然後通過風琴效果變成如下圖 首先這上面基本的css樣式就不多說了，一開始就是內容部分先隱藏起來，然後通過css3動畫鮮果再將內容部分呈現出來，這樣乙個簡單的...
Angular2 手風琴樣式頁面製作
新生頁面裡面有乙個公約，是手風琴樣式的頁面。這種樣式比較美觀，也能節省頁面空間。關於手風琴樣式頁面的製作方式，和大家分享一下 引用bootstrap樣式中的accordion元件實現。引入手風琴擴充套件包 import from ngx bootstrap accordion 我已認真閱讀，同意履行...
CSS水平垂直居中的幾種方法2
直接進入主題！css div img html 效果圖 當乙個元素絕對定位時，它會根據第乙個不是static定位的祖先元素定位，因此這裡的img根據外層div定位。css container inner html class container class inner 效果圖 這裡，我們首先用top...