問題討論區


【CSS 語法】文章精華區


【教學】 Facebook 投票欄試作



Facebook 投票欄試作
飛肯老師
註冊日期:
2008/3/25 19:31
留言: 13
因為最近 FB 新出的投票功能,總覺得那投票欄很炫,所以就自己試作看看
在 IE 感應的部份會有點問題,還找不到解決辦法,在 Firefox 或 Chrome 就完全沒問題了
IE9 未試
----------------------------------------------------------------------------------------

CSS部份:
/* ----------------------------------RESET---------------------------------- */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {margin:0;padding:0;}
table {border-collapse:collapse;border-spacing:0;}
fieldset, img {border:0;}
address, caption, cite, code, dfn, em, strong, th, var {font-style:normal;font-weight:normal;}
ol, ul {list-style:none;}
caption, th {text-align:left;}
h1, h2, h3, h4, h5, h6 {font-size:100%;font-weight:normal;}
q:before, q:after {content:'';}
abbr, acronym {border:0;}
/* --------------------------------RESET END---------------------------------- */
body{ font-family:Arial, Helvetica, sans-serif; padding:10px; font-size:12px;}
div{ width:220px; height:26px; position:relative; border:1px solid #CCCCCC; margin-bottom:5px;}
p{ display:block; position:absolute; z-index:1; display:block; height:26px; line-height:26px; background-color:#e5e5e5; left:0; top:0;}

span{ position:absolute; left:0; top:0; z-index:2; overflow:hidden; display:block; width:210px; height:26px; line-height:26px; margin:0 5px; overflow:hidden; white-space:nowrap;}
a{ border:1px solid #666666; width:220px; height:26px; position:absolute; left:-1px; top:-1px; display:block; background-color:#FF0000; opacity:0; filter: alpha(opacity=0); -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; z-index:10;}
a:hover{ opacity:1; background:none; text-decoration:none; filter: alpha(opacity=100); -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";}
strong{ font-size:12px; font-weight:bold; float:right; background-color:#FFFFFF; padding:3px 5px; height:20px; line-height:20px; color:#3366CC;}

----------------------------------------------------------------------------------------
原始碼部份:

<div><p style="width:30%;"></p><span>這是測試用問題</span><a href="#"><strong>456 票</strong></a></div>
<div><p style="width:73%;"></p><span>這是文字太長截掉ddddddddddddddddddddd</span><a href="#"><strong>456 票</strong></a></div>
<div><p style="width:20%;"></p><span>這是測試用問題</span><a href="#"><strong>456 票</strong></a></div>
<div><p style="width:100%;"></p><span>這是滿檔</span><a href="#"><strong>456 票</strong></a></div>
<div><p style="width:35%;"></p><span>這是投票數字很長很長很長很長</span><a href="#"><strong>5465456 票</strong></a></div>

2011/5/9 18:17
 


回覆: Facebook 投票欄試作
飛肯老師
註冊日期:
2008/3/25 19:31
留言: 13
附上檔案

附件:


rar vote.rar 大小: 1.17 KB; 下載次數: 445

2011/5/9 22:01
 


回覆: Facebook 投票欄試作
飛肯老師
註冊日期:
2008/3/25 19:31
留言: 13
改良版,修正 IE 感應問題 & 簡化 CSS,去掉那一堆難懂的透明度語法
缺點是需要用到一張透明的1px PNG圖檔

附件:


rar vote.rar 大小: 1.36 KB; 下載次數: 485

2011/5/11 18:20
 









[高級搜索]


 

課程首頁】 【最新開課時間表】 【範例教學分享區】 【交流討論區】 【企業包班】 【詢問課程】 【合作提案】 【誠徵講師

 

【飛肯設計學苑】 台北市公園路 30-1 號 5 樓 聯絡電話:(02)2370-1122 / 0925-014-000 信箱:flycan@flycan.com.tw
服務時間:(平日)下午 2 點 ~ 晚上 10 點 / (假日)早上 9 點 ~ 下午 5 點

 

台北市短期補習班立案 第 6631 號

TOP

【 Flycan.com 】 Powered by XOOPS