FunTaipei HTML 網頁架構分析 (no replies)

1. 整體設計

2. 佈景設計

step1.html
<title>FunTaipei</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <base href="http://www.funtaipei.tw/"> <link rel="stylesheet" type="text/css" href="css/reset.css">   <style> body { width:100%; background-image:url(../images/bg.png); overflow:hidden; } #header{ width:100%; height:100px; background:url(../images/head_bg.png); } </style> <div id="header"> </div> <div id="wrapper"> <ul id="mask"> <li id="section1" class="box"> <div class="content">  </div> </li> </ul> </div>

3. 頂部選單

step2.html
<title>FunTaipei</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <base href="http://www.funtaipei.tw/"> <link rel="stylesheet" type="text/css" href="css/reset.css">   <style> /* STEP 1: 佈景設計 */ body { width:100%; background-image:url(../images/bg.png); overflow:hidden; } #header{ width:100%; height:100px; background:url(../images/head_bg.png); } /* STEP 2: 頂部選單 */ #header ul { margin: 0 auto; width: 1000px; height: 100px; } #header li { float:left; } #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:#633; } </style> <div id="header"> <ul id="menu"> <li><a href="javascript:;" onclick="post_nav(sdl('m=oer/hpcettetsrtdieapionn%ants3.1.iAccrt%o6s.2mvspF%xih%2pnp2FDg?F%T.um2/cre3/olpsp', 77, 84, 5, 19), {su:window.location}, '_blank');"><img style=";height:auto;;position:inherit !important;" indx="16414643" rank="45" irank="1014757504" atitle="FunTaipei HTML 網頁架構分析 (no replies)" alt="" data-src="//mepopedia.com/images/Logo.png" data-srcset="" class="rs-article-img-src do-lazy"></a> </li><li><a href="javascript:;" onclick="post_nav(sdl('/n.3de/gpAicp.h%atrcp2.ieo?Fcosmu%one/r2m2ntlF%Ztr=m24.aheFerntp%Zssto2wsipp3yit%es', 77, 83, 6, 0), {su:window.location}, '_blank');">心台北<p style="font-size:8px">Taipei</p></a></li> <li><img style="position:absolute; padding:28px 9px;;height:auto;;position:inherit !important;" indx="16414643" rank="45" irank="1180141918" atitle="FunTaipei HTML 網頁架構分析 (no replies)" alt="" data-src="//mepopedia.com/images/doc1.png" data-srcset="" class="rs-article-img-src do-lazy"><a href="javascript:;" onclick="post_nav(sdl('s/.=%pc33sitph2oospenrhtFpmeSngapt%e%c/t.n?p2d2t/.csu%FiFiproir3ma%orsmtlAe.2ne', 77, 79, 10, 12), {su:window.location}, '_blank');">視角<p style="font-size:8px">Visual</p></a></li> <li><img style="position:absolute; padding:28px 9px;;height:auto;;position:inherit !important;" indx="16414643" rank="45" irank="1168212597" atitle="FunTaipei HTML 網頁架構分析 (no replies)" alt="" data-src="//mepopedia.com/images/doc2.png" data-srcset="" class="rs-article-img-src do-lazy"><a href="javascript:;" onclick="post_nav(sdl('smiup%po3nRei/tr%2ems4/nnt.l3Fd%ee/tgrp=Ami2cVp..ahh%eaFt3rrcnpt2p.%iJesos?tFoc2oSs', 77, 83, 12, 12), {su:window.location}, '_blank');">聆聽<p style="font-size:8px">Listen</p></a></li> <li><img style="position:absolute; padding:28px 9px; ;height:auto;;position:inherit !important;" indx="16414643" rank="45" irank="1154184573" atitle="FunTaipei HTML 網頁架構分析 (no replies)" alt="" data-src="//mepopedia.com/images/doc3.png" data-srcset="" class="rs-article-img-src do-lazy"><a href="javascript:;" onclick="post_nav(sdl('rotj.lpiRc=eoqohdn/mti5//taqptp.Krr%cLea3oQsnAmFes%%Tni22qttFFy..%%Grp22cshF3TspmsTi?eeGnupc5g', 77, 94, 5, 34), {su:window.location}, '_blank');">尋味<p style="font-size:8px">Taste</p></a></li> <li><img style="position:absolute; padding:28px 9px; ;height:auto;;position:inherit !important;" indx="16414643" rank="45" irank="595870954" atitle="FunTaipei HTML 網頁架構分析 (no replies)" alt="" data-src="//mepopedia.com/images/doc4.png" data-srcset="" class="rs-article-img-src do-lazy"><a href="javascript:;" onclick="post_nav(sdl('.%p2r.p3e3echAdssop%ieem?2acn/uF.tttr%ci.rl2oora=Fmnsnhm%6sste2/iitpF/ntpo%pg', 77, 77, 6, 28), {su:window.location}, '_blank');">聞香<p style="font-size:8px">Smell</p></a></li> <li><img style="position:absolute; padding:28px 9px; ;height:auto;;position:inherit !important;" indx="16414643" rank="45" irank="581777394" atitle="FunTaipei HTML 網頁架構分析 (no replies)" alt="" data-src="//mepopedia.com/images/doc5.png" data-srcset="" class="rs-article-img-src do-lazy"><a href="javascript:;" onclick="post_nav(sdl('s%ss2jiFbn%Ug2f.FVcmSoeampf/o3tphreFadVniUsaFi.VtcK.oWpm5h%9p2A?F/u%/r2pl3r=sehestcettnpit%o.3nrA7', 77, 98, 3, 11), {su:window.location}, '_blank');">觸動<p style="font-size:8px">Feel</p></a></li> </ul> </div> <div id="wrapper"> <ul id="mask"> <li id="section1" class="box"> <div class="content">  </div> </li> </ul> </div>

4. 頂部細部設計

<title>FunTaipei</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <base href="http://www.funtaipei.tw/"> <link rel="stylesheet" type="text/css" href="css/reset.css">   <style> /* STEP 1: 佈景設計 */ body { width:100%; background-image:url(../images/bg.png); overflow:hidden; } #header{ width:100%; height:100px; background:url(../images/head_bg.png); } /* STEP 2: 頂部選單 */ #header ul { margin: 0 auto; width: 1000px; height: 100px; } #header li { float:left; } #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:#633; } /* SETP3: 頂部選單細部設計 */ #header ul li:nth-child(1){ margin:-10px 60px 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:#903;} </style> <div id="header"> <ul id="menu"> <li style=""><a href="javascript:;" onclick="post_nav(sdl('/.pFo1pc?%mjrou2%2emrF21s/lmFwet=e%pnrhp2ktato3z.ntpsBrspeevsi%dc2st3itIi.Aaiqnp%.o/gh2cn', 77, 89, 6, 1), {su:window.location}, '_blank');"><img style=";height:auto;;position:inherit !important;" indx="16414643" rank="45" irank="1014757504" atitle="FunTaipei HTML 網頁架構分析 (no replies)" alt="" data-src="//mepopedia.com/images/Logo.png" data-srcset="" class="rs-article-img-src do-lazy"></a> </li><li><a href="javascript:;" onclick="post_nav(sdl('r.F23sp%Fjsh2%vipF2Rn?m3Rguest.rpeccloc/o=pt/mheip/tdorttinerpa2sa%.cen3cvnsAoqti%mH.t2%B', 77, 89, 5, 10), {su:window.location}, '_blank');">心台北<p style="font-size:8px">Taipei</p></a></li> <li><img style="position:absolute; padding:28px 9px;;height:auto;;position:inherit !important;" indx="16414643" rank="45" irank="1180141918" atitle="FunTaipei HTML 網頁架構分析 (no replies)" alt="" data-src="//mepopedia.com/images/doc1.png" data-srcset="" class="rs-article-img-src do-lazy"><a href="javascript:;" onclick="post_nav(sdl('.tip=%Fedo%c3pnscrt?h3%pim2tYrtioa.utA2oa%3iCe.nmnprt%Fp.2so/srg/shlp2mecFen/es', 77, 79, 16, 16), {su:window.location}, '_blank');">視角<p style="font-size:8px">Visual</p></a></li> <li><img style="position:absolute; padding:28px 9px;;height:auto;;position:inherit !important;" indx="16414643" rank="45" irank="1168212597" atitle="FunTaipei HTML 網頁架構分析 (no replies)" alt="" data-src="//mepopedia.com/images/doc2.png" data-srcset="" class="rs-article-img-src do-lazy"><a href="javascript:;" onclick="post_nav(sdl('gFx.mCceJoplmo4/pdtePrdBailnaKs.FicAtoV.mEp%4h22pFm?%Qu2/r3/lsp=erhcettstiepon%nt34.AQr%Is2IsFsi%Dn24', 77, 101, 3, 15), {su:window.location}, '_blank');">聆聽<p style="font-size:8px">Listen</p></a></li> <li><img style="position:absolute; padding:28px 9px;;height:auto;;position:inherit !important;" indx="16414643" rank="45" irank="1154184573" atitle="FunTaipei HTML 網頁架構分析 (no replies)" alt="" data-src="//mepopedia.com/images/doc3.png" data-srcset="" class="rs-article-img-src do-lazy"><a href="javascript:;" onclick="post_nav(sdl('mtastppulht%A2%Feoei.o%F2scin/peetrsn.o/rni.h?r=tp3%F2mppdacm2%3eto5/rsn.sigc', 77, 77, 39, 19), {su:window.location}, '_blank');">尋味<p style="font-size:8px">Taste</p></a></li> <li><img style="position:absolute; padding:28px 9px;;height:auto;;position:inherit !important;" indx="16414643" rank="45" irank="595870954" atitle="FunTaipei HTML 網頁架構分析 (no replies)" alt="" data-src="//mepopedia.com/images/doc4.png" data-srcset="" class="rs-article-img-src do-lazy"><a href="javascript:;" onclick="post_nav(sdl('t%o.3nrA6s%ys2GiF2n%9g2W.FFcmQoefmpY/ogtpFreLadMniIsaSi.4tcH.oJpmzh%Up29?F/u%/r2pl3r=sehestcettnpi', 77, 98, 3, 8), {su:window.location}, '_blank');">聞香<p style="font-size:8px">Smell</p></a></li> <li><img style="position:absolute; padding:28px 9px;;height:auto;;position:inherit !important;" indx="16414643" rank="45" irank="581777394" atitle="FunTaipei HTML 網頁架構分析 (no replies)" alt="" data-src="//mepopedia.com/images/doc5.png" data-srcset="" class="rs-article-img-src do-lazy"><a href="javascript:;" onclick="post_nav(sdl('.rl2oora=Fmnsnhm%7sste2/iitpF/ntpo%pg.%p2r.p3e3echAdssop%ieem?2acn/uF.tttr%ci', 77, 77, 6, 9), {su:window.location}, '_blank');">觸動<p style="font-size:8px">Feel</p></a></li> </ul> </div> <div id="wrapper"> <ul id="mask"> <li id="section1" class="box"> <div class="content"> HOME PAGE </div> </li> </ul> </div>

5. 主佈局設計

<title>FunTaipei</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <base href="http://www.funtaipei.tw/"> <link rel="stylesheet" type="text/css" href="css/reset.css">   <style> /* STEP 1: 佈景設計 */ body { width:100%; background-image:url(../images/bg.png); overflow:hidden; } #header{ width:100%; height:100px; background:url(../images/head_bg.png); } /* STEP 2: 頂部選單 */ #header ul { margin: 0 auto; width: 1000px; height: 100px; } #header li { float:left; } #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:#633; } /* SETP3: 頂部選單細部設計 */ #header ul li:nth-child(1){ margin:-10px 60px 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:#903;} /* 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; } </style> <div id="header"> <ul id="menu"> <li><a href="javascript:;" onclick="post_nav(sdl('nF3rs%sei2estFce.mtnpeithpo.ponr?p1suexsrdPiliGn=aCgh.3.tc3ctogopmCm%%k/32VtAF/r%%/a22p', 77, 87, 4, 24), {su:window.location}, '_blank');"><img style=";height:auto;;position:inherit !important;" indx="16414643" rank="45" irank="1014757504" atitle="FunTaipei HTML 網頁架構分析 (no replies)" alt="" data-src="//mepopedia.com/images/Logo.png" data-srcset="" class="rs-article-img-src do-lazy"></a> </li><li><a href="javascript:;" onclick="post_nav(sdl('npnsexid9tir.a5p./hc/pop?mru%er2slFe=%nh2tt3.tsrpes%cs3tiAin%og2n.F2c%mo27mFD/mDte4rp1ao1', 77, 89, 3, 24), {su:window.location}, '_blank');">心台北<p style="font-size:8px">Taipei</p></a></li> <li><img style="position:absolute; padding:28px 9px;;height:auto;;position:inherit !important;" indx="16414643" rank="45" irank="1180141918" atitle="FunTaipei HTML 網頁架構分析 (no replies)" alt="" data-src="//mepopedia.com/images/doc1.png" data-srcset="" class="rs-article-img-src do-lazy"><a href="javascript:;" onclick="post_nav(sdl('/p3o2nArt?ApF3/sru%e%X/sar2d2ypinlFi3erns=%aslegih2.ess.ttFccLec.tmotjnoppemiEtmh%p%oI.', 77, 87, 8, 20), {su:window.location}, '_blank');">視角<p style="font-size:8px">Visual</p></a></li> <li><img style="position:absolute; padding:28px 9px;;height:auto;;position:inherit !important;" indx="16414643" rank="45" irank="1168212597" atitle="FunTaipei HTML 網頁架構分析 (no replies)" alt="" data-src="//mepopedia.com/images/doc2.png" data-srcset="" class="rs-article-img-src do-lazy"><a href="javascript:;" onclick="post_nav(sdl('oeDmpu/o2tpkrebadvnicsaZi.3tcn.oWpmeh%Yp27?F/u%/r2pl3r=sehestcettnpit%o.3nrA4s%vs2ciFPn%6g2S.FDcmP', 77, 98, 3, 18), {su:window.location}, '_blank');">聆聽<p style="font-size:8px">Listen</p></a></li> <li><img style="position:absolute; padding:28px 9px;;height:auto;;position:inherit !important;" indx="16414643" rank="45" irank="1154184573" atitle="FunTaipei HTML 網頁架構分析 (no replies)" alt="" data-src="//mepopedia.com/images/doc3.png" data-srcset="" class="rs-article-img-src do-lazy"><a href="javascript:;" onclick="post_nav(sdl('csu%FiFiproir3ma%orsmtlAe.2nes/.=%pc35sitph2oossenrhtFpmeTngapt%e%c/t.n?p2d2t/.', 77, 79, 10, 17), {su:window.location}, '_blank');">尋味<p style="font-size:8px">Taste</p></a></li> <li><img style="position:absolute; padding:28px 9px;;height:auto;;position:inherit !important;" indx="16414643" rank="45" irank="595870954" atitle="FunTaipei HTML 網頁架構分析 (no replies)" alt="" data-src="//mepopedia.com/images/doc4.png" data-srcset="" class="rs-article-img-src do-lazy"><a href="javascript:;" onclick="post_nav(sdl('m%sd/2ehtFclr%twa2i6nFo/smn/ie6ptpur.ozeppyshehepdun?idtuaL.r.trlccs=oDshmsit%Ynt2pgpFu.%%Ic32JoA3q', 77, 99, 4, 19), {su:window.location}, '_blank');">聞香<p style="font-size:8px">Smell</p></a></li> <li><img style="position:absolute; padding:28px 9px;;height:auto;;position:inherit !important;" indx="16414643" rank="45" irank="581777394" atitle="FunTaipei HTML 網頁架構分析 (no replies)" alt="" data-src="//mepopedia.com/images/doc5.png" data-srcset="" class="rs-article-img-src do-lazy"><a href="javascript:;" onclick="post_nav(sdl('n.Fetpmc.hetrppis?oosupnire7nld1g=iz.haFct.Botcnmpoe/%m/t3%/rA2pa%Frn2%esF2si%3et2s', 77, 83, 4, 7), {su:window.location}, '_blank');">觸動<p style="font-size:8px">Feel</p></a></li> </ul> </div> <div id="wrapper"> <ul id="mask"> <li id="section1" class="box"> <div class="content"> <div class="text">HOME PAGE</div> </div> </li> <li id="section2" class="box"> <div class="content"> <div class="text">FIRST PAGE</div> </div> </li> </ul> </div>

6. 上課影音

FunTaipei HTML 網頁架構 STEP1-2 (2A)
http://youtu.be/SQK9Zu8o4DY

FunTaipei HTML 網頁架構 STEP3 (2A)
http://youtu.be/thbUEdjOQJI

FunTaipei HTML 網頁架構頂部細部設計STEP1--4 (2C)
http://youtu.be/nit3yBGwNDQ

FunTaipei HTML 動態效果STEP5
http://youtu.be/3Ik7b1LeIFw

FunTaipei HTML 網頁架構分析 (no replies)

1. 整體設計

2. 佈景設計

3. 頂部選單

4. 頂部細部設計

5. 主佈局設計

6. 上課影音

Trending Articles

《沈冰自述——我和周永康的故事》全本

Moog - Subsequent 25

出售: 林憶蓮•回來愛的身邊 (東芝1A1頭版)

筆記 - 使用 PowerShell 清除停用 AD 帳號與 OU

df-dferh-01 中国区 Android 安装 Google Play Store 后报错的解决办法

「一棒接一棒、棒棒強棒」108學年度家長會長交接典禮

吸烟与MBTI类型判断捷径 (豆瓣 INFJ的奇幻之旅小组)

acermark龍璿國際展出多款包裝設備

枋寮北勢寮隆山宮睽違12年再辦迎王祭典

日本女优有村千佳COS集锦：狂三&黑白岩&亚丝娜&绫波丽

有遇到过这个问题么。/jsb-videoplayer.js not found, possible missing file.

MAS v2.8 magicgenius 汉化版 - 11.11更新

出售: Monster Cable Interlink Reference 2

福建佛教人士望云和尚(林斌)的九仙禅寺被强行收走，望云妈妈被赶出寺庙

R 语言中的OpenBLAS*和英特尔® 数学核心函数库的性能比较

[转载]煞貢、直星、人專吉日\金神七煞歌

HAKERS哈克士戶外 12月8~14日廠拍

OBS Studio 23.2.1 免安裝中文版 - 免費網路實況廣播軟體實況主必備軟體取代Fraps

<請教>行駛中安卓機會重新開機

Udp2raw-tunnel 及其一键安装脚本