這是中標／摘要，或是較為簡短的段落大意。
也可以是圖文整合型的文本， 只要是在Div內就可以。
CSS兄弟選擇(+)以及hover的綜合應用。
mouseover...[absolutely simple]
也可以是圖文整合型的文本， 只要是在Div內就可以。
CSS兄弟選擇(+)以及hover的綜合應用。
mouseover...[absolutely simple]
這是內文。換言之，要對上面div區域再加以補充說明的資料／訊息。
一般而言，在螢幕閱讀之下，一開始的掃瞄過程，文字太多會妨礙掃瞄性的快速閱讀理解。所以用較少的文字摘要來讓讀者快速掌握大意。
一旦讀者有與趣了，我們再來就可以利用互動機制，來對摘要文字加以補充說明。這時，就可以滿足讀者在互動文本中對內容的進一步要求。
一般而言，在螢幕閱讀之下，一開始的掃瞄過程，文字太多會妨礙掃瞄性的快速閱讀理解。所以用較少的文字摘要來讓讀者快速掌握大意。
一旦讀者有與趣了，我們再來就可以利用互動機制，來對摘要文字加以補充說明。這時，就可以滿足讀者在互動文本中對內容的進一步要求。
|
一、請用KompoZer做出兩個
div，以形成互動，請看教學影音：
|
|
二、請於<body>之後加入下列的CSS，就可以形成互
動功能：
<style> #div2014053001 { font-family: Verdana, '微軟正黑體'; font-size: 1.2em; font-weight: bold; line-height: 1.6em; text-align: left; letter-spacing: 0.1em; padding: 1em; } #div2014053001+div { // + 符號是css兄弟選擇器 font-family: Verdana, '微軟正黑體'; font-size: 1.04em; font-weight: normal; line-height: 1.8em; text-align: left; letter-spacing: 0.1em; margin-top: 1em; padding: 1em; border-bottom: 2px solid darkorange; display: none; } #div2014053001:hover { background-color: darkorange; } #div2014053001:hover+div { // hover互動後，作用於其後的兄弟DIV display: block; } </style> |
|
三、注意事項：
|
沒有留言:
張貼留言