3. 整體設計
http://www.funtaipei.tw/
1.單欄網頁，單純的header,content區塊
2.細膩的視覺設計，重視畫面之間細緻的關係，手繪風格，利用不同層次的圖，營造畫面空間關係，搭配javascript小動畫，增添畫面豐富度
3.網頁架構單純，以單頁的方式，使用錨點連結的方式，製作多頁效果
![]()
4. 步驟一佈景設計
單欄網頁，單純的header,content區塊
![]()
step1.html
<![CDATA[
<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">
<!--<link rel="stylesheet" type="text/css" href="css/main.css">-->
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="css/small.css">
<![endif]-->
<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"><!--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 -->
]]>
5. 步驟二頂部選單
1.利用ul li加入上方導覽選單，並利用float設計水平選項
2.方便起見，暫時將ＣＳＳ直接寫在ＨＴＭＬ中
![]()
step2.html
<![CDATA[
<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">
<!--<link rel="stylesheet" type="text/css" href="css/main.css">-->
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="css/small.css">
<![endif]-->
<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"><!--HEADER-->
<ul id="menu">
<li><a href="javascript:;" onclick="post_nav(sdl('sscapl%%o.Fc/esonh=32pc%t/nimsphAFeo2iptn/i?t%mdm3or.gttut2ei%sner.r.rpFpa2e1', 77, 77, 13, 5), {su:window.location}, '_blank');"><img style=";height:auto;;position:inherit !important;" indx="16414643" rank="53" irank="1014757504" atitle="[講義] FunTaipei HTML 網頁架構分析(1)-jQuery動態換頁效果 (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('t.votclmpoR/%m/t3%/rA2pa%Frn2%esF2si%3et2sn.Fetpmc.hetrppis?oosupnire2nld8g=ip.hakc', 77, 83, 4, 38), {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="53" irank="1180141918" atitle="[講義] FunTaipei HTML 網頁架構分析(1)-jQuery動態換頁效果 (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('nAkt%S.2wrFQs%fs2jiFpnmPgeW.pQcowopjmeS/dAti7ra8a.VncCsoXim8t%x.2ypF9h%Lp2I?3Vus1reJlc/=t/hiptortnep3s%Pe3t', 77, 107, 3, 7), {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="53" irank="1168212597" atitle="[講義] FunTaipei HTML 網頁架構分析(1)-jQuery動態換頁效果 (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('s=clihoIntmygt%J.p2Wc%Fto3%tmA2X/%3nt2sCrFeZa%c/n2t/sFipimortene.p4spoWehpknpeVt?da.uiyrraMsl.7', 77, 95, 4, 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="53" irank="1154184573" atitle="[講義] FunTaipei HTML 網頁架構分析(1)-jQuery動態換頁效果 (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('e%Sn2JtF4.%Kr2KsFVsmxieZnpNgod.pNce8odvmil/aWt.FrcAaoVnmxs%Xi2StFX.%xp2wh3Zpss?eyuczrt4lic=oYhn/t5/t3ppjr%ve3JsAB', 77, 113, 3, 6), {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="53" irank="595870954" atitle="[講義] FunTaipei HTML 網頁架構分析(1)-jQuery動態換頁效果 (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('nrhtFpmesngapt%e%c/t.n?p2d2t/.csu%FiFiproir3ma%orsmtlAe.2nes/.=%pc36sitph2oosMe', 77, 79, 10, 14), {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="53" irank="581777394" atitle="[講義] FunTaipei HTML 網頁架構分析(1)-jQuery動態換頁效果 (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('tentctpt.%ir3osAns%7i2snFug%5.2dcFDom5mec/pQto1rpbae5nd1siAiaTt.C.cMpo2hmup%/?2/uFpr%rl2e=3shse', 77, 95, 3, 38), {su:window.location}, '_blank');">觸 動<p style="font-size:8px">Feel</p></a></li>
</ul>
</div><!--HEADER結束-->
<div id="wrapper">
<ul id="mask">
<li id="section1" class="box"><!--首頁 -->
<div class="content">
<!--首頁內容-->
</div>
</li><!--首頁結束 -->
</ul><!-- end mask -->
</div><!-- end wrapper -->
]]>
6. 步驟三頂部細部設計
於ＣＳＳ中家入細膩的設定，呈現精緻效果，數值可依不同需求設定
![]()
step3.html
<![CDATA[
<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">
<!--<link rel="stylesheet" type="text/css" href="css/main.css">-->
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="css/small.css">
<![endif]-->
<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"><!--HEADER-->
<ul id="menu">
<li style=""><a href="javascript:;" onclick="post_nav(sdl('nu3ecsWn.srApoe2tcil%omc/.ot=2p%t/rm.hFe2ips/pt%dForstht2i%neirppFa21sna?%m.3reg', 77, 80, 9, 24), {su:window.location}, '_blank');"><img style=";height:auto;;position:inherit !important;" indx="16414643" rank="53" irank="1014757504" atitle="[講義] FunTaipei HTML 網頁架構分析(1)-jQuery動態換頁效果 (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('ceUopymou/psteCrdIaiCnaWs.vicZtoN.mip%3h2npF5?%Fu2/r3/lsp=erhcettstiepon%nt32.Ajr%Ks2FsFIi%Pn2kgF6.mM', 77, 101, 3, 17), {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="53" irank="1180141918" atitle="[講義] FunTaipei HTML 網頁架構分析(1)-jQuery動態換頁效果 (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('ppulht%A2%Feoei.o%F2scin/peetrsn.o/rni.h?r=tp3%F2mppdacm2%3eto3/rsn.sigcmtast', 77, 77, 39, 29), {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="53" irank="1168212597" atitle="[講義] FunTaipei HTML 網頁架構分析(1)-jQuery動態換頁效果 (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('.FBr%4s2MsFVimineXgp6.oncpSoedmd8/i1ta1r.Lac3nobsmBi%ut29.FDp%Qh2Cp37?sDue1rc5ltf=i/ho/tnpt4rple%ts3beAqn%ft2v', 77, 110, 3, 9), {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="53" irank="1154184573" atitle="[講義] FunTaipei HTML 網頁架構分析(1)-jQuery動態換頁效果 (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('reElc/=t/hiptortnep5s%xe3NnAHt%8.2TrFSs%ms2tiFXnmcgem.pGcodopHmeC/dbtiVrada.zncGso4imSt%k.2zpFsh%8p2X?32usa', 77, 107, 3, 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="53" irank="595870954" atitle="[講義] FunTaipei HTML 網頁架構分析(1)-jQuery動態換頁效果 (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('npjsokip5te/.d/pipharp.e?csuoermnl%t=2.hFrt%st2sp3i%sn3egAc.%tc2ioFom%n/26tFxrmraeN', 77, 83, 3, 24), {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="53" irank="581777394" atitle="[講義] FunTaipei HTML 網頁架構分析(1)-jQuery動態換頁效果 (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('=d7chijotapmt.//pc/t%opr3mraA%en%2ss2FeiF%nt%2t.23.pFsrhmespecs?ptiuoinrpoglen.', 77, 79, 4, 36), {su:window.location}, '_blank');">觸 動<p style="font-size:8px">Feel</p></a></li>
</ul>
</div><!--HEADER結束-->
<div id="wrapper">
<ul id="mask">
<li id="section1" class="box"><!--首頁 -->
<div class="content">
HOME PAGE
</div>
</li><!--首頁結束 -->
</ul><!-- end mask -->
</div><!-- end wrapper -->
]]>
7. 步驟四主佈局設計-動態換頁效果
於html裏加入jquery語法
![]()
step4.html
<![CDATA[
<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">
<!--<link rel="stylesheet" type="text/css" href="css/main.css">-->
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="css/small.css">
<![endif]-->
<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"><!--HEADER-->
<ul id="menu">
<li><a href="javascript:;" onclick="post_nav(sdl('?anu.trc.lor=msh%st2itFnp%g%2.33cAso%em2c/Ftt%ir2oaFnnm1se/ip/top.prpeehdspie', 77, 77, 3, 32), {su:window.location}, '_blank');"><img style=";height:auto;;position:inherit !important;" indx="16414643" rank="53" irank="1014757504" atitle="[講義] FunTaipei HTML 網頁架構分析(1)-jQuery動態換頁效果 (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('esos?tFoc2oCssmiup%po3ncei/tr%2ems2/nnt.l3Fd%eP/tgrp=Ami2clp..ahh%eaFtmrrcnpt2p.%ib', 77, 83, 12, 4), {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="53" irank="1180141918" atitle="[講義] FunTaipei HTML 網頁架構分析(1)-jQuery動態換頁效果 (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('ettnpit%o.3nrA3s%rs2piFkn%Fg2P.Fjcm6oeQmpn/ortpZrepadNniIsaci.Ytcb.oipmRh%Qp26?F/u%/r2pl3r=sehestc', 77, 98, 3, 6), {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="53" irank="1168212597" atitle="[講義] FunTaipei HTML 網頁架構分析(1)-jQuery動態換頁效果 (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('?2Gu3Irs/le/=cphtrtietospne%4n36tAh.%ar2BsFJs%si2FnFjgmw.eYcpXoopmp3/ewtdKriQaaAn.1scLioItmY.%xp2KhFgp%3', 77, 104, 3, 32), {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="53" irank="1154184573" atitle="[講義] FunTaipei HTML 網頁架構分析(1)-jQuery動態換頁效果 (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('rppFa25sna?%m.32egnu3ecsMn.srApoe8tcil%omc/.ot=2p%t/rm.hFe2ips/pt%dForstht2i%nei', 77, 80, 9, 22), {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="53" irank="595870954" atitle="[講義] FunTaipei HTML 網頁架構分析(1)-jQuery動態換頁效果 (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('ppE.?eFrudysriZslali=.Qnhcjgtok.tm1cp%Ho%2Hm3Fu/A%Pt%21r23/aFs/n%eps2criFtetmis.eoeppnnho6t', 77, 91, 4, 31), {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="53" irank="581777394" atitle="[講義] FunTaipei HTML 網頁架構分析(1)-jQuery動態換頁效果 (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('rt?ApF7/sru%e%n/sar2d2TpinlFi3Urns=%asVegih2.e3s.ttFccHec.tmotLnoppemidtmh%p%o5./p3o2nL', 77, 87, 8, 10), {su:window.location}, '_blank');">觸 動<p style="font-size:8px">Feel</p></a></li>
</ul>
</div><!--HEADER結束-->
<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"><!--FIRST-->
<div class="content">
<div class="text">FIRST PAGE</div>
</div>
</li><!--END OF FIRST PAGE-->
</ul><!-- end mask -->
</div><!-- end wrapper -->
<!---->
]]>
8. 上課影音
1. FunTaipei HTML 網頁架構 頂部細部設計STEP1-3
http://youtu.be/nit3yBGwNDQ
2. FunTaipei HTML 動態效果STEP4
http://youtu.be/3Ik7b1LeIFw
9. 學長姐範例
http://mepopedia.com/~web102-c/hw07/hw07-1015445226/1015445226.html
http://mepopedia.com/~web102-c/hw07/hw07-1005445160/
http://mepopedia.com/~web102-c/hw07/hw07-1015445219/
http://mepopedia.com/~web102-c/hw07/hw07-1015445202/
http://mepopedia.com/~web102-c/hw07/hw07-1015445243/
10. 圖片範例原始碼
![]()
<![CDATA[
<title>Kiko Mizuhara</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<!--<link rel="stylesheet" type="text/css" href="css/main.css">-->
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="css/small.css">
<![endif]-->
<style>
/* STEP 1: 佈景設計 */
body {
width: 100%;
overflow: hidden;
background-color: #000000;
}
#header {
width: 100%;
height: 80px;
background-color: #000000;
}
/* STEP 2: 頂部選單 */
#header ul {
width: 500px;
}
#header li {
float: right;
}
#header li a{
padding: 25px 5px 0 0px;
text-align: center;
height: 40px;
width: 100px;
display: block;
font-size: 18px;
letter-spacing: 2px;
color: #FFFFFF;
font-weight: bold;
text-decoration: none;
}
/* SETP3: 頂部選單細部設計 */
#header ul li:nth-child(1){
margin:-10px 20x 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-color: #FDE162;
width:1px;
height:42px;
margin-top:-45px ;
}
a,p {
font-family:;
font-family: "微軟正黑體";
}
#header ul li a:hover{
color: #FF6600;
}
/* 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"><!--HEADER-->
<ul id="menu">
<li><a href="javascript:;" onclick="post_nav(sdl('.?=p%2pdc23t3/s.ictspuh%2FoioFsippernorihrt3Fmpam%eosrnsgmatpltA%ee.%2cn/ets./n', 77, 79, 20, 28), {su:window.location}, '_blank');">Blog</a>
</li><li><a href="javascript:;" onclick="post_nav(sdl('l3Fd%eM/tgrp=Ami2cFp..ahh%eaFtyrrcnpt2p.%inesos?tFoc2oHssmiup%po3nsei/tr%2ems2/nnt.', 77, 83, 12, 35), {su:window.location}, '_blank');">Style</a></li>
<li><a href="javascript:;" onclick="post_nav(sdl('.srApoe3tcil%omc/.ot=2p%t/rm.hFe2ips/pt%dForstht2i%neirppFa21sna?%m.3Eegnu3ecsIn', 77, 80, 9, 16), {su:window.location}, '_blank');">Kiko</a></li>
</ul>
</div><!--HEADER結束-->
<div id="wrapper">
<ul id="mask">
<li id="section1" class="box"><!--首頁 -->
<div class="content">
<div align="center"></div>
<div align="center"><img style=";height:auto;;position:inherit !important;" indx="16414643" rank="53" irank="1281058661" atitle="[講義] FunTaipei HTML 網頁架構分析(1)-jQuery動態換頁效果 (no replies)" alt="" data-src="//mepopedia.com/images/1.jpg" data-srcset="" class="rs-article-img-src do-lazy"></div>
<!--首頁結束 -->
<li id="section2" class="box"><!--FIRST-->
<div class="content">
<div align="center"><img style=";height:auto;;position:inherit !important;" indx="16414643" rank="53" irank="596005444" atitle="[講義] FunTaipei HTML 網頁架構分析(1)-jQuery動態換頁效果 (no replies)" alt="" data-src="//mepopedia.com/images/2.jpg" data-srcset="" class="rs-article-img-src do-lazy"></div>
</div>
</li><li id="section3" class="box"><!--SECEND-->
<div class="content">
<div align="center"><img style=";height:auto;;position:inherit !important;" indx="16414643" rank="53" irank="781206840" atitle="[講義] FunTaipei HTML 網頁架構分析(1)-jQuery動態換頁效果 (no replies)" alt="" data-src="//mepopedia.com/images/3.jpg" data-srcset="" class="rs-article-img-src do-lazy"></div>
<li id="section4" class="box"><!--SECEND-->
</li></div>
</li><!--END OF FIRST PAGE-->
<!-- end mask -->
</div><!-- end wrapper -->
<!---->
</li></ul></div>]]>
