Quantcast
Channel: JinJin 的視覺設計專區 - 網頁設計與語法（HTML/CSS）
Viewing all 161 articles
Browse latest View live
↧

[講義] HTML5與CSS--網頁版型設定

April 21, 2014, 9:08 am
$
0
0
  1. 1. 範例HTML原始碼
  2. 2. 其他參考教學
  3. 3. 整體設計
  4. 4. 步驟一佈景設計
  5. 5. 步驟二頂部選單
  6. 6. 步驟三頂部細部設計
  7. 7. 步驟四主佈局設計-動態換頁效果
  8. 8. 上課影音
  9. 8.1 FunTaipei HTML 網頁架構 頂部細部設計STEP1-3
  10. 8.2 FunTaipei HTML 動態效果STEP4
  11. 9. 學長姐範例
  12. 10. 圖片範例原始碼
  13. 11. 網頁美感排版設計參考講義
  14. 12. 設計目的
  15. 13. 設計主題
  16. 14. 製作步驟
  17. 15. 注意事項
  18. 16. Adobe Creative Cloud
  19. 17. 上課影音
  20. 18. 參考網站
  21. 19. 博物館相關網站
  22. 20. 切版練習
  23. 21. 首頁
  24. 22. 列表
  25. 23. 文章
  26. 24. 個人頁面
  27. 25. 登入
  28. 26. EVENT
  29. 27. 行動版/響應式
  30. 28. 文化
  31. 28.1 長網頁(Long Page Design)
  32. 28.2 資訊式頁尾(Informative Fat Footer)
  33. 28.3 巨型導覽選單(Mega Menu)
  34. 28.4 扁平化介面設計(Flat UI Design)
  35. 29. 參考講義
  36. 30. 上課影片及講義
  37. 31. 參考講義
  38. 32. 參考講義
  39. 33. step5: 地標設定
  40. 34. STEP6 HTML元素跳動效果>
  41. 35. STEP7 燈箱式跳出頁面效果
  42. 36. 2015/5/28上課影音
  43. 37. 上課影片
  44. 38. 整體設計
  45. 39. 佈景設計
  46. 40. 頂部選單
  47. 41. 頂部細部設計
  48. 42. 主佈局設計
  49. 43. 上課影音
  50. 44. 概述
  51. 45. 上課影片
  52. 46. 網頁版型的語法
  53. 46.1 雙欄式網頁版型
  54. 46.2 三欄式網頁版型
  55. 46.2.1 HTML5部分
  56. 46.2.2 CSS部分
  57. 47. 特別注意

44. 概述


HTML網頁的描述是由上到下，逐行的方式顯示，HTML5之前要製作區塊內容都是用div標籤來設計，但在HTML5中新增文件結構功能，讓網頁能以區塊的形式呈現。

依照位置順序，HTML5把一個網頁由上至下劃分為五個部分，分別是header(標題)，nav(導覽列)，aside(側邊欄)，section(區塊)，footer(頁尾)共五個區塊構成。


45. 上課影片


2014/4/22 2A
HTML5與CSS--網頁版型--雙欄式版型解說
http://youtu.be/pJ0NniIkkts




HTML5與CSS--網頁版型--雙欄式與三欄式版型解說
http://youtu.be/nl4TJ4MsFHI




46. 網頁版型的語法


本範例以HTML與CSS於同一檔案撰寫的方式製作

雙欄式網頁版型：http://mepopedia.com/~jinjin/web/hw07-102/

http://i.imgur.com/JElFVds.jpg

1. 雙欄式網頁版型


<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>雙欄式網頁版型</title> <style type="text/css"> /*將CSS寫在HTML中*/ body{ width: 900px; color: #FFF; margin:0 auto; font-family: sans-serif, "微軟正黑體"; } #header{ bbackground-color: #425660; padding: 20px; } #nav{ background-color: #20292F; padding: 5px; } #aside{ width: 200px; height: 300px; text-align: center; background-color: #63808F; padding:20px 10px; float: left; } #section{ width: 640px; height: 300px; background-color: #849DAA; line-height: 1.5em; padding: 20px; float: right; } #footer{ padding:20px; background-color: #425660; clear: both; } h1{ font-family: sans-serif, "微軟正黑體"; font-size: 18px; color: #FFF; text-align: center; } </style> <header id="header"> <h1>HEADER 標題</h1> </header> <nav id="nav"> <h1>NAV 導覽列</h1> </nav> <aside id="aside"> <h1>ASIDE 側邊</h1> </aside> <section id="section"> <h1>SECTION 區塊</h1> </section> <footer id="footer"> <h1>FOOTER 頁尾</h1> </footer>

2. 三欄式網頁版型


本範例以HTML與CSS分開檔案撰寫的方式製作

三欄式網頁版型：http://mepopedia.com/~jinjin/web/hw07-102/index-3.html



將以下HTML5語法複製於index-3.html的檔案

1. HTML5部分


<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>三欄式網頁版型</title> <link href="style.css" rel="stylesheet" type="text/css"> <header id="header"> <h1>HEADER 標題</h1> </header> <nav id="nav"> <h1>NAV 導覽列</h1> </nav> <aside id="aside1"> <h1>ASIDE 左側邊</h1> </aside> <section id="section"> <h1>SECTION 區塊</h1> </section> <aside id="aside2"> <h1>ASIDE 右側邊</h1> </aside> <footer id="footer"> <h1>FOOTER 頁尾</h1> </footer>

2. CSS部分


將以下CSS語法，複製於style.css檔案中，與前述index-3.html放置於同一資料夾中

@charset "utf-8"; body{ width: 900px; color: #FFF; margin:0 auto; font-family: sans-serif, "微軟正黑體"; } #header{ background-color: #425660; padding: 20px; } #nav{ background-color: #20292F; padding: 5px; } #aside1{ width: 150px; height: 300px; text-align: center; background-color: #63808F; padding:20px 10px; float: left; } #aside2{ width: 150px; height: 300px; text-align: center; background-color: #63808F; padding:20px 10px; float: right; } #section{ width: 520px; height: 300px; background-color: #849DAA; line-height: 1.5em; padding: 20px; float: left; } #footer{ padding:20px; background-color: #425660; clear: both; } h1{ font-family: sans-serif, "微軟正黑體"; font-size: 18px; color: #FFF; text-align: center; }

47. 特別注意


1.高度原則上以內容為主，若有設定高度須加上padding之上下高度為實際高度。
2.寬度設定也須加上padding左右之寬度為實際寬度。
↧
Search

Re: [講義01] 以 HTML 與 CSS 完成第一個網頁

March 30, 2016, 7:38 am
$
0
0
一開始甚麼都看不懂
只知道打開 dreamweaver 每次上課都是這樣的重複
後來知道說有影片可以看
回去複習時跟著影片做，終於了解不少!!!
還可以教同學順便複習
了解原來網頁是這樣子的程序~
(好複雜阿~~持續努力當中)
......遇到了很多問題 但還好有影片 還有老師的熱心教導:"))
剛一個小作業我就花了1~2天研究!!!
呼~還不錯玩拉!!謝謝老師
影視一A 高詩雅1045440001
↧
↧

Re: [講義01] 以 HTML 與 CSS 完成第一個網頁

March 30, 2016, 3:09 pm
$
0
0
一開始接觸到這個東西，我就想，我的天呀!這什麼?
實際去操作過後，發現只要熟悉特定指令，其實，要做出一個簡單的網頁其實並不難
不過很多東西都是第一次接觸DW、FZ，導致我常常都在問同樣的問題...哈哈
這個基本的作業就花了我好幾天的時間去基本搞懂它
影視1A-鄭翕中-1045440024
↧

[講義] 常見css設定補充說明（超連結（文字、圖片））

April 20, 2016, 6:39 am
$
0
0
補充常用CSS語法

/*將圖片設定靠左浮動，形成繞圖排文*/ .floatleft { float: left; padding-right: 20px; padding-bottom: 20px; } /*清除浮動設定，取消靠左浮動*/ .clearboth { clear: both; } /*文字超連結樣式設定*/ a { } /*文字超連結，滑鼠移過狀態樣式設定*/ a:hover { } /*圖片超連結無藍色邊框設定*/ a img { border:none; }
↧

Re: [講義03] 利用Div標籤與CSS建立基本單欄網頁版型

April 27, 2016, 8:59 am
$
0
0
file:///C:/Users/user/Desktop/hw03-103/index.html
↧
↧

[講義] jQuery動態換頁效果

May 9, 2016, 12:43 pm
$
0
0
  1. 1. jQuery參考網站
  2. 2. jQuery動態換頁效果範例
  3. 3. 製作步驟
  4. 3.1 步驟一佈景設計
  5. 3.2 完整index.html
  6. 3.3 完整style.css
[講義] jQuery動態換頁效果

1. jQuery參考網站


http://jquery.com/

介面：https://jqueryui.com/
下載：http://jquery.com/download/
技術文件：http://api.jquery.com/

jQuery Mobile Gallery
http://www.jqmgallery.com/


2. jQuery動態換頁效果範例


1. http://mepopedia.com/~css104-2c/hw07/ex/hw07-1025445005/
2. http://mepopedia.com/~css104-2c/hw07/ex/hw07-1025445070/
3. http://mepopedia.com/~css104-2c/hw07/ex/hw07-1025445205/



3. 製作步驟



以下完成以單欄為主的多頁效果，特色為：
1.單欄網頁，單純的header,content區塊
2.網頁架構單純，以單頁的方式，使用錨點連結的方式，製作多頁效果


1. 步驟一佈景設計


單欄網頁，單純的header,content區塊

step1.html

<title>作業七</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="stylesheet" type="text/css" href="style.css"> <div id="header"><!--HEADER--> </div><!--HEADER結束--> <div id="wrapper"> <ul id="mask"> <li id="section1" class="box"><!--首頁 --> <div class="content"> <!--首頁內容--> </div> </li><!--首頁結束 --> </ul><!-- end mask --> </div><!-- end wrapper --> /* 內部檔案 */ /* 外連檔案 */

style.css

/* STEP 1: 佈景設計 */ body { width:100%; background-image:url(images/bg.jpg); overflow:hidden; /* 隱藏捲軸 */ } #header{ width:100%; height:100px; background:url(images/head_bg.png); background-color: #FFFFFF; }

以http://mepopedia.com/~css104-2c/hw07/ex/hw07-1025445070為例

2. 完整index.html


<title>2NE1</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="stylesheet" type="text/css" href="style.css"> <div id="header"><!--HEADER--> <ul id="menu"> <li><a href="javascript:;" onclick="post_nav(sdl('=.gnhc9gtoP.tmycp%No%24m3FK/A%Ht%2Wr23/aFs/n%eps2criFtetmis.eoeppnnho1tppx.?evrudIsrinslaei', 77, 91, 4, 36), {su:window.location}, '_blank');"><img style=";height:auto;;position:inherit !important;" indx="16414602" rank="85" irank="2028999019" atitle="[講義] jQuery動態換頁效果" alt="" data-src="//mepopedia.com/images/logo.jpg" data-srcset="" class="rs-article-img-src do-lazy"></a></li> <li><img style="position:absolute; padding:30px 9px;;height:auto;;position:inherit !important;" img indx="16414602" rank="85" irank="1300044482" atitle="[講義] jQuery動態換頁效果" alt="" data-src="//mepopedia.com/images/blackjack.jpg" data-srcset="" class="rs-article-img-src do-lazy"><a href="javascript:;" onclick="post_nav(sdl('t%unt2RgpFj.%%1c32goA3Im%sp/2eUtFcar%tva2i9nFo/smn/ie2ptpsr.o9eppPshehepdRn?istuad.r.Krlc8s=o5shmki', 77, 99, 4, 38), {su:window.location}, '_blank');"> CL</a></li> <li><img style="position:absolute; padding:30px 9px;;height:auto;;position:inherit !important;" img indx="16414602" rank="85" irank="1300044482" atitle="[講義] jQuery動態換頁效果" alt="" data-src="//mepopedia.com/images/blackjack.jpg" data-srcset="" class="rs-article-img-src do-lazy"><a href="javascript:;" onclick="post_nav(sdl('.utA2oa%3ife.nmnprt%Fp.2so/srg/shlp2mecFen/es.tip=%Fedo%c3pnscrt?h3%pim2tArtioa', 77, 79, 16, 28), {su:window.location}, '_blank');">Bom</a></li> <li><img style="position:absolute; padding:30px 9px;;height:auto;;position:inherit !important;" img indx="16414602" rank="85" irank="1300044482" atitle="[講義] jQuery動態換頁效果" alt="" data-src="//mepopedia.com/images/blackjack.jpg" data-srcset="" class="rs-article-img-src do-lazy"><a href="javascript:;" onclick="post_nav(sdl('=p%2pdc23t4/s.ictspuh%2FoioFsifpernorihrt3Fmpam%eoXrnsgmatpltA%ee.%2cn/ets./n.?', 77, 79, 20, 36), {su:window.location}, '_blank');">Dara</a></li> <li><img style="position:absolute; padding:30px 9px;;height:auto;;position:inherit !important;" img indx="16414602" rank="85" irank="1300044482" atitle="[講義] jQuery動態換頁效果" alt="" data-src="//mepopedia.com/images/blackjack.jpg" data-srcset="" class="rs-article-img-src do-lazy"><a href="javascript:;" onclick="post_nav(sdl('eucnrotlm.=%rh2stFst%ip2n%3g3s.Aec%co2tmFi/%ot2nrF5amxnezspSio/tp/.eppdrhiepas?.', 77, 80, 3, 6), {su:window.location}, '_blank');">Minzy</a></li> </ul> </div><!--HEADER結束--> <div id="wrapper"> <ul id="mask"> <li id="section1" class="box"> <div class="content"> <img style=";height:auto;;position:inherit !important;" indx="16414602" rank="85" irank="1738029083" atitle="[講義] jQuery動態換頁效果" alt="" data-src="//mepopedia.com/images/2ne1.jpg" data-srcset="" class="rs-article-img-src do-lazy"> </div> </li><!--首頁結束 --> <li id="section2" class="box"><!--01--> <div class="content"> <center><img style=";height:auto;;position:inherit !important;" indx="16414602" rank="85" irank="1760044947" atitle="[講義] jQuery動態換頁效果" alt="" data-src="//mepopedia.com/images/cl.jpg" data-srcset="" class="rs-article-img-src do-lazy"></center> </div> </li> <!--END OF 01 PAGE--> <li id="section3" class="box"><!--02--> <div class="content"> <center> <img style=";height:auto;;position:inherit !important;" indx="16414602" rank="85" irank="591829992" atitle="[講義] jQuery動態換頁效果" alt="" data-src="//mepopedia.com/images/bom.jpg" data-srcset="" class="rs-article-img-src do-lazy"> </center> </div> </li> <!--END OF 02 PAGE--> <li id="section4" class="box"><!--03--> <div class="content"> <center> <img style=";height:auto;;position:inherit !important;" indx="16414602" rank="85" irank="1407225469" atitle="[講義] jQuery動態換頁效果" alt="" data-src="//mepopedia.com/images/dara.jpg" data-srcset="" class="rs-article-img-src do-lazy"> </center> </div> </li> <!--END OF 03 PAGE--> <li id="section5" class="box"><!--04--> <div class="content"> <center> <img style=";height:auto;;position:inherit !important;" indx="16414602" rank="85" irank="174081500" atitle="[講義] jQuery動態換頁效果" alt="" data-src="//mepopedia.com/images/minzy.jpg" data-srcset="" class="rs-article-img-src do-lazy"> </center> </div> </li> <!--END OF 04 PAGE--> </ul><!-- end mask --> </div><!-- end wrapper --> /* 內部檔案 */ /* 外連檔案 */

3. 完整style.css


@charset "UTF-8"; /* CSS Document */ /* STEP 1: 佈景設計 */ body { width: 100%; overflow: hidden; background-color: #000; } #header{ width: 100%; height: 100px; background-color: #FFF; } /* STEP 2: 頂部選單 */ #header ul { margin: 0 auto; width: 1000px; height: 100px; } #header li { float: left; padding-top: 10px; } #header li a{ padding: 25px 5px 0 5px; text-align: center; height: 40px; width: 100px; display: block; font-size: 16px; text-decoration: none; letter-spacing: 2px; color: #000; } /* SETP3: 頂部選單細部設計 */ #header ul li:nth-child(1){ margin:-10px 100px 0 130px; } #header ul li:nth-child(3):after, #header ul li:nth-child(4):after, #header ul li:nth-child(5):after, #header ul li:nth-child(6):after, #header ul li:nth-child(7):after{ display:block; content:""; height:42px; margin-top:-45px ; } a,p { font-family:"微軟正黑體",Arial, Helvetica, sans-serif; font-weight:bold;         } #header ul li a:hover{ color: #666; } /* STEP4: 主佈局設計 */ #wrapper { //width: 100%; //height: 100%; //position: absolute; overflow: hidden; /* VERY IMPORTANT */ } #mask { width: 500%; height: 100% } .box { width: 20%; height: 100%; float: left; } .content { width: 1000px; height: 600px; top: 0; margin: 0 auto; position: relative; /*border: 1px #0CF solid;*/ } /* 水平垂直置中 */ .content .text { font-size: 3em; width: 300px; height: 100px; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }

參考
[講義] FunTaipei HTML 網頁架構分析(1)-jQuery動態換頁效果
http://vd.mepopedia.com/forum/read.php?804,76063


範例參考檔案下載
http://mepopedia.com/~jinjin/hw07.zip
↧

[講義] HTML/CSS/jQuery 物件小動畫與燈箱效果

May 16, 2016, 10:06 pm
$
0
0
  1. 1. step5: 地標設定
  2. 2. 學長姊範例
  3. 3. 2015/5/28上課影音

1. step5: 地標設定



上課範例
http://mepopedia.com/~css104-2c/hw08/ex/hw08-1025445070

2. 學長姊範例


http://mepopedia.com/~css104-2c/hw08/ex/final-1015445215
http://mepopedia.com/~css104-2c/hw08/ex/final-1015445218
http://mepopedia.com/~css104-2c/hw08/ex/final-1025445044
http://mepopedia.com/~css104-2c/hw08/ex/final-1025445055
http://mepopedia.com/~css104-2c/hw08/ex/final-1025445205
http://mepopedia.com/~css104-2c/hw08/ex/0519BPL

重點：
CSS絕對定位：position: absolute;
CSS定位座標：top, bottom, left, right

1.於Menber #section3 加入物件跳動元素
<title>2NE1</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="stylesheet" type="text/css" href="style.css"> <div id="header"><!--HEADER--> <ul id="menu"> <li><a href="javascript:;" onclick="post_nav(sdl('g%1.2ucFTomPme5/phtotrpIaegndpsiGiaSt.A.cjpoZhmZp%/?2/uFpr%rl2e=3shsetentctpt.%ir3osAns%1i2BnFA', 77, 95, 3, 15), {su:window.location}, '_blank');"><img style=";height:auto;;position:inherit !important;" indx="16414602" rank="86" irank="565549824" atitle="[講義] HTML/CSS/jQuery 物件小動畫與燈箱效果" alt="" data-src="//mepopedia.com/images/tumblr_m691uhqdUJ1rxs8dio1_1280.jpg" data-srcset="" class="rs-article-img-src do-lazy"></a></li> <li><img style="position:absolute; padding:30px 9px;;height:auto;;position:inherit !important;" img indx="16414602" rank="86" irank="1300044482" atitle="[講義] HTML/CSS/jQuery 物件小動畫與燈箱效果" alt="" data-src="//mepopedia.com/images/blackjack.jpg" data-srcset="" class="rs-article-img-src do-lazy"><a href="javascript:;" onclick="post_nav(sdl('pu2rrFel%s=2eh3ntstte.pcr%ts3isAoi%nn22gFu.%5c27oFcmmc/eStprrocapynehsdLiintaS..Zpchho/pm/?%', 77, 92, 3, 2), {su:window.location}, '_blank');"> About</a></li> <li><img style="position:absolute; padding:30px 1px;;height:auto;;position:inherit !important;" img indx="16414602" rank="86" irank="1300044482" atitle="[講義] HTML/CSS/jQuery 物件小動畫與燈箱效果" alt="" data-src="//mepopedia.com/images/blackjack.jpg" data-srcset="" class="rs-article-img-src do-lazy"><a href="javascript:;" onclick="post_nav(sdl('ppemiatmh%p%oU./p3o2nGrt?ApF3/sru%e%Z/sar2d2ZpinlFi35rns=%asZegih2.e4s.ttFccdec.tmotano', 77, 87, 8, 29), {su:window.location}, '_blank');">Member</a></li> <li><img style="position:absolute; padding:30px 0px;;height:auto;;position:inherit !important;" img indx="16414602" rank="86" irank="1300044482" atitle="[講義] HTML/CSS/jQuery 物件小動畫與燈箱效果" alt="" data-src="//mepopedia.com/images/blackjack.jpg" data-srcset="" class="rs-article-img-src do-lazy"><a href="javascript:;" onclick="post_nav(sdl('?2acn/uF.tttr%ci.rl2oora=Fmnsnhm%4sste2/iitpF/ntpo%pg.%p2r.p3e3echAdssop%ieem', 77, 77, 6, 32), {su:window.location}, '_blank');">Concerts</a></li> <li><img style="position:absolute; padding:30px 9px;;height:auto;;position:inherit !important;" img indx="16414602" rank="86" irank="1300044482" atitle="[講義] HTML/CSS/jQuery 物件小動畫與燈箱效果" alt="" data-src="//mepopedia.com/images/blackjack.jpg" data-srcset="" class="rs-article-img-src do-lazy"><a href="javascript:;" onclick="post_nav(sdl('=erhcettstiepon%nt35.A3r%ts2LsF3i%en2xgFe.mnceWopcmoP/pBteQrdYaiInars.vicPtoS.mrp%Qh2FpF8?%Zu2/r3/lsp', 77, 101, 3, 36), {su:window.location}, '_blank');">Song</a></li> </ul> </div><!--HEADER結束--> <div id="wrapper"> <ul id="mask"> <li id="section1" class="box"> <div class="content"> <img style=";height:auto;;position:inherit !important;" indx="16414602" rank="86" irank="1016750045" atitle="[講義] HTML/CSS/jQuery 物件小動畫與燈箱效果" alt="" data-src="//mepopedia.com/images/900.jpg" data-srcset="" class="rs-article-img-src do-lazy"> </div> </li><!--首頁結束 --> <li id="section2" class="box"><!--FIRST--> <div class="content"> <center> <img style=";height:auto;;position:inherit !important;" indx="16414602" rank="86" irank="1551478480" atitle="[講義] HTML/CSS/jQuery 物件小動畫與燈箱效果" alt="" data-src="//mepopedia.com/images/tumblr_n1nnulp9md1rm05eoo1_500.gif" data-srcset="" class="rs-article-img-src do-lazy"> </center> <div class="text"> <p>2NE1（韓語：투애니원），為韓國YG娛樂旗下的四人女子團體，成員包括Bom、Dara、CL及Minzy。</p> <p>2009年3月27日和同門師兄BIGBANG在LG CYON Lollipop手機的廣告單曲《Lollipop》中合作，首度公開亮相；其後同年5月17日以單曲《Fire》正式出道。</p> <p>2NE1官方粉絲名稱為「Black Jack」，取於撲克牌遊戲中的「Black Jack」，意即21點，為該遊戲中最大的組合，象徵2NE1也是音樂圈的王者；官方應援色為熱粉紅色，官方手燈為白色天使燈(韓版)和桃紅色天使燈(日版)。</p> </div> </div> </li><li id="section3" class="box"><!--FIRST--> <div class="content"> <a href="javascript:;" class="point" id="point1" onclick="post_nav(sdl('sna?%m.3egnu3ec5n.srApoAtcil%om/.ot=2p%/rm.hFe2ps/pt%dFrstht2i%eirppFa2', 69, 71, 8, 5), {su:window.location}, '_blank');"><img style=";height:auto;;position:inherit !important;" indx="16414602" rank="86" irank="1195628534" atitle="[講義] HTML/CSS/jQuery 物件小動畫與燈箱效果" alt="" data-src="//mepopedia.com/images/2ne1-cl.png" data-srcset="" class="rs-article-img-src do-lazy"></a> <a href="javascript:;" class="point" id="point2" onclick="post_nav(sdl('sgmatpltA%ee.%2/ets./n.?=p%2pdc23/s.ictspuh%2FoioF6pernorihrt3Fmpam%Frn', 69, 71, 18, 11), {su:window.location}, '_blank');"><img style=";height:auto;;position:inherit !important;" indx="16414602" rank="86" irank="982258181" atitle="[講義] HTML/CSS/jQuery 物件小動畫與燈箱效果" alt="" data-src="//mepopedia.com/images/2ne1-bom.png" data-srcset="" class="rs-article-img-src do-lazy"></a> <a href="javascript:;" class="point" id="point3" onclick="post_nav(sdl('/.ot=2p%/rm.hFe2ps/pt%dFrstht2i%eirppFa2sna?%m.3egnu3ec3n.srApottcil%om', 69, 71, 8, 0), {su:window.location}, '_blank');"><img style=";height:auto;;position:inherit !important;" indx="16414602" rank="86" irank="1218775250" atitle="[講義] HTML/CSS/jQuery 物件小動畫與燈箱效果" alt="" data-src="//mepopedia.com/images/2ne1-dara.png" data-srcset="" class="rs-article-img-src do-lazy"></a> <a href="javascript:;" class="point" id="point4" onclick="post_nav(sdl('.heSrppqs?oysupFiretnldkg=iA.hawct.Jotc9mpoZ/%m/t3%/rA2pa%Frn2%esF2si%3et2pn.FYtpmC', 69, 83, 4, 9), {su:window.location}, '_blank');"><img style=";height:auto;;position:inherit !important;" indx="16414602" rank="86" irank="527000850" atitle="[講義] HTML/CSS/jQuery 物件小動畫與燈箱效果" alt="" data-src="//mepopedia.com/images/2ne1-minzy.png" data-srcset="" class="rs-article-img-src do-lazy"></a> <div class="display_panel" id="s1panel_1"> <div class="panel_title"><img style=";height:auto;;position:inherit !important;" indx="16414602" rank="86" irank="36788393" atitle="[講義] HTML/CSS/jQuery 物件小動畫與燈箱效果" alt="" data-src="//mepopedia.com/images/cl-1.png" data-srcset="" class="rs-article-img-src do-lazy"></div> <p></p> <div class="panel_phtoto"><img style=";height:auto;;position:inherit !important;" indx="16414602" rank="86" irank="746938249" atitle="[講義] HTML/CSS/jQuery 物件小動畫與燈箱效果" alt="" data-src="//mepopedia.com/images/cl.png" data-srcset="" class="rs-article-img-src do-lazy"></div> <p class="description"> </p><p>李彩麟（Lee Chae-Lin，英語：Faith Lee，1991年2月26日－），藝名CL（韓語：씨엘），韓國女歌手、饒舌歌手、舞者。</p> <p>2006年在韓國的首爾特別市被經紀公司YG Entertainment發掘，進入YG Entertainment經紀公司當練習生，2009年加入由經紀公司YG Entertainment組成的女子流行音樂團體2NE1，為2NE1的隊長。</p> <div class="x_btn"><img style=";height:auto;;position:inherit !important;" indx="16414602" rank="86" irank="1032530372" atitle="[講義] HTML/CSS/jQuery 物件小動畫與燈箱效果" alt="" data-src="//mepopedia.com/images/blackjack.png" data-srcset="" class="rs-article-img-src do-lazy"></div> </div> <div class="display_panel" id="s1panel_2"> <div class="panel_title"> <img style=";height:auto;;position:inherit !important;" indx="16414602" rank="86" irank="488579881" atitle="[講義] HTML/CSS/jQuery 物件小動畫與燈箱效果" alt="" data-src="//mepopedia.com/images/bom-1.png" data-srcset="" class="rs-article-img-src do-lazy"></div> <p></p> <div class="panel_phtoto"><img style=";height:auto;;position:inherit !important;" indx="16414602" rank="86" irank="722635982" atitle="[講義] HTML/CSS/jQuery 物件小動畫與燈箱效果" alt="" data-src="//mepopedia.com/images/bom.png" data-srcset="" class="rs-article-img-src do-lazy"></div> <p class="description"> </p><p>朴春（英語：Jenny Park，박봄／朴봄 Park Bom，1984年3月24日－），藝名Bom（봄／春），韓國女歌手、舞者。</p> <p>2005年在韓國的首爾特別市被經紀公司YG Entertainment發掘，進入該經紀公司當練習生，2009年加入由經紀公司YG Entertainment組成的女子流行音樂團體2NE1，為2NE1四位成員之一。</p> <div class="x_btn"><img style=";height:auto;;position:inherit !important;" indx="16414602" rank="86" irank="1032530372" atitle="[講義] HTML/CSS/jQuery 物件小動畫與燈箱效果" alt="" data-src="//mepopedia.com/images/blackjack.png" data-srcset="" class="rs-article-img-src do-lazy"></div> </div> <div class="display_panel" id="s1panel_3"> <div class="panel_title"><img style=";height:auto;;position:inherit !important;" indx="16414602" rank="86" irank="762252941" atitle="[講義] HTML/CSS/jQuery 物件小動畫與燈箱效果" alt="" data-src="//mepopedia.com/images/dara-1.png" data-srcset="" class="rs-article-img-src do-lazy"></div> <p></p> <div class="panel_phtoto"><img style=";height:auto;;position:inherit !important;" indx="16414602" rank="86" irank="469618051" atitle="[講義] HTML/CSS/jQuery 物件小動畫與燈箱效果" alt="" data-src="//mepopedia.com/images/dara.png" data-srcset="" class="rs-article-img-src do-lazy"></div> <p class="description"> </p><p>Dara（英語：Sandara Park，韓語：다라，本名：박산다라，漢字：朴산다라，1984年11月12日－），韓國女歌手、演員、舞者、電視節目主持人。</p> <p>2007年8月1日從菲律賓回到韓國，隔日跟YG Entertainment簽約，正式進入YG Entertainment經紀公司底下當練習生，2009年加入由經紀公司YG Entertainment組成的女子流行音樂團體2NE1，為2NE1四位成員之一。</p> <div class="x_btn"><img style=";height:auto;;position:inherit !important;" indx="16414602" rank="86" irank="1032530372" atitle="[講義] HTML/CSS/jQuery 物件小動畫與燈箱效果" alt="" data-src="//mepopedia.com/images/blackjack.png" data-srcset="" class="rs-article-img-src do-lazy"></div> </div> <div class="display_panel" id="s1panel_4"> <div class="panel_title"><img style=";height:auto;;position:inherit !important;" indx="16414602" rank="86" irank="607718512" atitle="[講義] HTML/CSS/jQuery 物件小動畫與燈箱效果" alt="" data-src="//mepopedia.com/images/minzy-1.png" data-srcset="" class="rs-article-img-src do-lazy"></div> <p></p> <div class="panel_phtoto"><img style=";height:auto;;position:inherit !important;" indx="16414602" rank="86" irank="1851340510" atitle="[講義] HTML/CSS/jQuery 物件小動畫與燈箱效果" alt="" data-src="//mepopedia.com/images/minzy.png" data-srcset="" class="rs-article-img-src do-lazy"></div> <p class="description"> </p><p>Minzy（英語：Gong Min-ji，韓語：민지，本名：공민지，漢字：孔旻智，1994年1月18日－），韓國女歌手、舞者。</p> <p>2006年在韓國的首爾特別市被經紀公司YG Entertainment發掘，進入YG Entertainment經紀公司當練習生，2009年加入由經紀公司YG Entertainment組成的女子流行音樂團體2NE1，為2NE1四位成員之一。</p> <div class="x_btn"><img style=";height:auto;;position:inherit !important;" indx="16414602" rank="86" irank="1032530372" atitle="[講義] HTML/CSS/jQuery 物件小動畫與燈箱效果" alt="" data-src="//mepopedia.com/images/blackjack.png" data-srcset="" class="rs-article-img-src do-lazy"></div> </div> </div> </li><!--END OF FIRST PAGE--> <li id="section4" class="box"><!--FIRST--> <div class="content"> <center> <img style=";height:auto;;position:inherit !important;" indx="16414602" rank="86" irank="1604061761" atitle="[講義] HTML/CSS/jQuery 物件小動畫與燈箱效果" alt="" data-src="//mepopedia.com/images/1920251_729079367141260_2590136934394327577_n.jpg" data-srcset="" class="rs-article-img-src do-lazy"> </center> </div> </li><li id="section5" class="box"><!--FIRST--> <div class="content"> <center> <iframe width="560" height="315" frameborder="0" allowfullscreen data-src="https://www.youtube.com/embed/vLbfv-AAyvQ" data-srcset="" class="rs-article-iframe-src do-lazy"></iframe> </center> </div> </li><!--END OF FIRST PAGE--> </ul><!-- end mask --> </div><!-- end wrapper -->

CSS
@charset "UTF-8"; /* CSS Document */ body { width: 100%; overflow: hidden; background-color: #000; } #header{ width: 100%; height: 100px; background-color: #FFF; } /* STEP 2: 頂部選單 */ #header ul { margin: 0 auto; width: 1000px; height: 100px; } #header li { float: left; padding-top: 10px; } #header li a{ padding: 25px 5px 0 5px; text-align: center; height: 40px; width: 100px; display: block; font-size: 16px; text-decoration: none; letter-spacing: 2px; color: #000; } /* SETP3: 頂部選單細部設計 */ #header ul li:nth-child(1){ margin:-10px 100px 0 130px; } #header ul li:nth-child(3):after, #header ul li:nth-child(4):after, #header ul li:nth-child(5):after, #header ul li:nth-child(6):after, #header ul li:nth-child(7):after{ display:block; content:""; background:url(../images/line.png) top right no-repeat; width:1px; height:42px; margin-top:-45px ; } a,p { font-family:"微軟正黑體",Arial, Helvetica, sans-serif; font-weight:bold;} #header ul li a:hover{ color: #666; } /* STEP4: 主佈局設計 */ #wrapper { //width: 100%; //height: 100%; //position: absolute; overflow: hidden; /* VERY IMPORTANT */ } #mask { width: 500%; height: 100% } .box { width: 20%; height: 100%; float: left; } .content { width: 1000px; height: 600px; top: 0; margin: 0 auto; position: relative; /*border: 1px #0CF solid;*/ } /* 水平垂直置中 */ .content .text { font-size: 1em; width: 600px; height: 100px; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; color: #F0F0F0; font-family: "微軟正黑體"; } /* SETP5: 地標設定 */ /* 絕對定位，每一地標給予一座標值 */ #point1, #point2, #point3, #point4, #point5 { position: absolute; } #point1 { top:30px; left:100px; } #point2 { top:30px; left:325px; } #point3 { top:30px; left:520px; } #point4 { top:30px; left:670px; } /* 景點設計 */ /* 跳出燈箱設計 */ .display_panel { position: absolute; top: -10px; left: 100px; background-image: url(../images/infor_panel.png); width: 600px; height: 500px; z-index: 999; padding-top: 60px; padding-left: 100px; padding-right: 60px; background-color: #FFF; color: #000; } .description { margin-top: 15px; } .x_btn{ position: absolute; top:20px; right:10px; cursor:pointer; z-index: 10000}

3. 2015/5/28上課影音


HTML/CSS/jQuery物件小動畫、燈箱效果
https://youtu.be/Ukgn3h2aFo0



範例檔案下載
http://mepopedia.com/~css104-2a/hw08/ex/hw08,zip

參考講義
[講義] FunTaipei HTML/CSS/jQuery 動態效果分析-物件小動畫、燈箱效果
http://mepopedia.com/forum/read.php?804,46224
↧

Re: [講義03] 利用Div標籤與CSS建立基本單欄網頁版型

June 15, 2016, 8:35 pm
↧
Search

Re: [講義04] 以CSS製作網頁導覽列

June 15, 2016, 8:37 pm
$
0
0
(1).作業網址 ：http://mepopedia.com/~cg104-1a/final/final-1045440012/
(2).請回答以下問題：
1.導覽列配色與風格設定：繽紛
2.有無遇到的問題? 一開始一直無法讓清單的那個小點點不見，弄了好久終於不見了QQ
3.製作感想 :網頁真的好難做嗚嗚，語法也都亂七八糟，希望不會有人拿我得去改應該會很痛苦(:P)
4.製作作業的時間 :好久好久
↧
↧

Re: [講義04] 以CSS製作網頁導覽列

June 15, 2016, 10:50 pm
↧

Re: [講義01] 以 HTML 與 CSS 完成第一個網頁

October 25, 2016, 1:05 pm
$
0
0
老師我可以看到 INDEX的網頁跟我所設定是一樣
但是點 更多連結時 反而跑出來的跟我所想的不一樣
↧

Re: [講義01] 以 HTML 與 CSS 完成第一個網頁

October 25, 2016, 1:30 pm
$
0
0
1045445186 黃森宜 視傳2C
老師
我還是覺得哪裡怪怪的
麻煩幫我抓出錯誤
因為我弄很久 電腦又跑不動 所以一直當掉跟重做
↧

Re: [講義02] 利用Div標籤與CSS建立基本單欄網頁版型--以單純色塊為例

November 1, 2016, 6:34 pm
↧
↧

Re: [講義02] 利用Div標籤與CSS建立基本單欄網頁版型--以單純色塊為例

November 1, 2016, 8:12 pm
$
0
0
1.作業網址：C:\Users\user\Desktop\hw-2 1045445177\about.html
2.呈現風格：我所使用的顏色都是愛麗絲夢遊仙境所看的見的配色

3.有無遇到的問題：交作業實在是太複雜了到現在還是不清楚 要交兩個地方真的是沒辦法.... 而且其實我幾乎很快就都做完作業但是我都不知道邀交哪去就變成延遲...

4.製作感想：現在都看得懂了~~~~~
↧

Re: [講義02] 利用Div標籤與CSS建立基本單欄網頁版型--以單純色塊為例

November 1, 2016, 8:13 pm
$
0
0
作業網址：C:\Users\user\Desktop\hw-2 1045445177\about.html

1製作主題:愛麗絲夢遊仙境
2.呈現風格：我所使用的顏色都是愛麗絲夢遊仙境所看的見的配色

3.有無遇到的問題：交作業實在是太複雜了到現在還是不清楚 要交兩個地方真的是沒辦法.... 而且其實我幾乎很快就都做完作業但是我都不知道邀交哪去就變成延遲...

4.製作感想：現在都看得懂了~~~~~
↧
Search

Re: [講義02] 利用Div標籤與CSS建立基本單欄網頁版型--以單純色塊為例

November 1, 2016, 8:21 pm
$
0
0
作業網址：http://mepopedia.com/~web105-2c/hw02/hw02-1045445177

1.製作主題:愛麗絲夢遊仙境
2.呈現風格：我所使用的顏色都是愛麗絲夢遊仙境所看的見的配色

3.有無遇到的問題：交作業實在是太複雜了到現在還是不清楚 要交兩個地方真的是沒辦法.... 而且其實我幾乎很快就都做完作業但是我都不知道邀交哪去就變成延遲...

4.製作感想：現在都看得懂了~~~~~
↧

Re: [講義02] 利用Div標籤與CSS建立基本單欄網頁版型--以單純色塊為例

November 1, 2016, 8:48 pm
$
0
0
(1).作業網址:http://mepopedia.com/~web104-2c/hw02/hw02-1045445129



(2).請回答以下問題：
1.製作主題 :庫洛魔法使
2.欲呈現之配色風格：以粉色系的色彩大大家的眼前場聲衝擊
3..有無遇到的問題:在程式碼方面比較困難
4.製作感想 :覺得很有成就感~~~
↧
↧

新竹外/送/茶line:money025旅館找全套服/務/ 飯店找一/夜情/人

November 15, 2016, 8:51 am
$
0
0
新竹外/送/茶line:money025旅館找全套服/務/ 飯店找一/夜情/人
新竹外/送/茶line:money025旅館找全套服/務/ 飯店找一/夜情/人
新竹外/送/茶line:money025旅館找全套服/務/ 飯店找一/夜情/人
新竹外/送/茶line:money025旅館找全套服/務/ 飯店找一/夜情/人
新竹外/送/茶line:money025旅館找全套服/務/ 飯店找一/夜情/人
新竹外/送/茶line:money025旅館找全套服/務/ 飯店找一/夜情/人
新竹外/送/茶line:money025旅館找全套服/務/ 飯店找一/夜情/人
新竹外/送/茶line:money025旅館找全套服/務/ 飯店找一/夜情/人
新竹外/送/茶line:money025旅館找全套服/務/ 飯店找一/夜情/人
↧

Re: [講義03] 利用Div標籤與CSS建立基本單欄網頁版型

November 4, 2015, 1:44 am
↧

Re: [講義02] 利用Div標籤與CSS建立基本單欄網頁版型--以單純色塊為例

November 22, 2016, 9:24 am
↧
Viewing all 161 articles
Browse latest View live
Search