JinJin 的視覺設計專區 :: 網頁設計與語法（HTML/CSS）

Changed By: JinJin
Change Date: May 13, 2014 09:05AM

FunTaipei HTML 網頁架構分析

<h2>整體設計</h2>
<img src="https://fbcdn-sphotos-h-a.akamaihd.net/hphotos-ak-prn2/t1.0-9/10298949_10152452521313729_6564968769040801594_n.jpg" />
<style> .message-body img { width: 83% }</style>
<h2>佈景設計</h2>
<img src="https://fbcdn-sphotos-c-a.akamaihd.net/hphotos-ak-prn2/t1.0-9/10264278_10152452558873729_4623662594193507259_n.jpg" />

step1.html
<xmp><html>
<head>
<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>
</head>

<body>
<div id="header">
</div>

<div id="wrapper">
<ul id="mask">
<li id="section1" class="box">
<div class="content">

</div>
</li>
</ul>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/respond.min.js"></script>
</html></xmp>
<h2>頂部選單</h2>
<img src="https://fbcdn-sphotos-g-a.akamaihd.net/hphotos-ak-frc3/t1.0-9/p417x417/10298672_10152452665943729_2977919713645902284_n.jpg" />

step2.html
<xmp><html>
<head>
<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>
</head>

<body>
<div id="header">
<ul id="menu">
<li><a href="#section1"><img src="images/Logo.png"/></a>
<li><a href="#section2">心台北<p style="font-size:8px">Taipei</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc1.png"><a href="#section3">視角<p style="font-size:8px">Visual</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc2.png"><a href="#section4">聆聽<p style="font-size:8px">Listen</p></a></li>
<li><img style="position:absolute; padding:28px 9px; " src="images/doc3.png"><a href="#section5">尋味<p style="font-size:8px">Taste</p></a></li>
<li><img style="position:absolute; padding:28px 9px; " src="images/doc4.png"><a href="#section6">聞香<p style="font-size:8px">Smell</p></a></li>
<li><img style="position:absolute; padding:28px 9px; " src="images/doc5.png"><a href="#section7">觸動<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>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/respond.min.js"></script>
</html></xmp>
<h2>頂部細部設計</h2>
<xmp><html>
<head>
<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>
</head>

<body>
<div id="header">
<ul id="menu">
<li style=""><a href="#section1"><img src="images/Logo.png"/></a>
<li><a href="#section2">心台北<p style="font-size:8px">Taipei</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc1.png"><a href="#section3">視角<p style="font-size:8px">Visual</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc2.png"><a href="#section4">聆聽<p style="font-size:8px">Listen</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc3.png"><a href="#section5">尋味<p style="font-size:8px">Taste</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc4.png"><a href="#section6">聞香<p style="font-size:8px">Smell</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc5.png"><a href="#section7">觸動<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>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/respond.min.js"></script>
</html></xmp>
<h2>主佈局設計</h2>
<xmp><html>
<head>
<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>
</head>

<body>
<div id="header">
<ul id="menu">
<li><a href="#section1"><img src="images/Logo.png"/></a>
<li><a href="#section2">心台北<p style="font-size:8px">Taipei</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc1.png"><a href="#section3">視角<p style="font-size:8px">Visual</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc2.png"><a href="#section4">聆聽<p style="font-size:8px">Listen</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc3.png"><a href="#section5">尋味<p style="font-size:8px">Taste</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc4.png"><a href="#section6">聞香<p style="font-size:8px">Smell</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc5.png"><a href="#section7">觸動<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>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.funtaipei.tw/js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="http://www.funtaipei.tw/js/jquery.scrollTo-1.4.2-min.js"></script>

<script type="text/javascript" src="http://www.funtaipei.tw/js/respond.min.js"></script>
<script>
$(document).ready(function() {
$('#menu a').click(function () {

$('#wrapper').scrollTo($(this).attr('href'), 1000);

return false;
});
});
</script>
</html></xmp>//www.youtube.com/embed/thbUEdjOQJI?rel=0" frameborder="0" allowfullscreen></iframe>

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

<iframe width="853" height="480" src="//www.youtube.com/embed/nit3yBGwNDQ?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]
<b>FunTaipei HTML 動態效果STEP5</b>
http://youtu.be/3Ik7b1LeIFw

<iframe width="853" height="480" src="//www.youtube.com/embed/3Ik7b1LeIFw?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]//youtu.be/nit3yBGwNDQ

<iframe width="853" height="480" src="//www.youtube.com/embed/nit3yBGwNDQ?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]
<b>FunTaipei HTML 動態效果STEP5</b>
http://youtu.be/3Ik7b1LeIFw

<iframe width="853" height="480" src="//www.youtube.com/embed/3Ik7b1LeIFw?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]

Changed By: JinJin
Change Date: May 06, 2014 04:50PM

FunTaipei HTML 網頁架構分析

<h2>整體設計</h2>
<img src="https://fbcdn-sphotos-h-a.akamaihd.net/hphotos-ak-prn2/t1.0-9/10298949_10152452521313729_6564968769040801594_n.jpg" />
<style> .message-body img { width: 83% }</style>
<h2>佈景設計</h2>
<img src="https://fbcdn-sphotos-c-a.akamaihd.net/hphotos-ak-prn2/t1.0-9/10264278_10152452558873729_4623662594193507259_n.jpg" />

step1.html
<xmp><html>
<head>
<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>
</head>

<body>
<div id="header">
</div>

<div id="wrapper">
<ul id="mask">
<li id="section1" class="box">
<div class="content">

</div>
</li>
</ul>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/respond.min.js"></script>
</html></xmp>
<h2>頂部選單</h2>
<img src="https://fbcdn-sphotos-g-a.akamaihd.net/hphotos-ak-frc3/t1.0-9/p417x417/10298672_10152452665943729_2977919713645902284_n.jpg" />

step2.html
<xmp><html>
<head>
<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>
</head>

<body>
<div id="header">
<ul id="menu">
<li><a href="#section1"><img src="images/Logo.png"/></a>
<li><a href="#section2">心台北<p style="font-size:8px">Taipei</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc1.png"><a href="#section3">視角<p style="font-size:8px">Visual</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc2.png"><a href="#section4">聆聽<p style="font-size:8px">Listen</p></a></li>
<li><img style="position:absolute; padding:28px 9px; " src="images/doc3.png"><a href="#section5">尋味<p style="font-size:8px">Taste</p></a></li>
<li><img style="position:absolute; padding:28px 9px; " src="images/doc4.png"><a href="#section6">聞香<p style="font-size:8px">Smell</p></a></li>
<li><img style="position:absolute; padding:28px 9px; " src="images/doc5.png"><a href="#section7">觸動<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>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/respond.min.js"></script>
</html></xmp>
<h2>頂部細部設計</h2>
<xmp><html>
<head>
<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>
</head>

<body>
<div id="header">
<ul id="menu">
<li style=""><a href="#section1"><img src="images/Logo.png"/></a>
<li><a href="#section2">心台北<p style="font-size:8px">Taipei</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc1.png"><a href="#section3">視角<p style="font-size:8px">Visual</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc2.png"><a href="#section4">聆聽<p style="font-size:8px">Listen</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc3.png"><a href="#section5">尋味<p style="font-size:8px">Taste</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc4.png"><a href="#section6">聞香<p style="font-size:8px">Smell</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc5.png"><a href="#section7">觸動<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>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/respond.min.js"></script>
</html></xmp>
<h2>主佈局設計</h2>
<xmp><html>
<head>
<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>
</head>

<body>
<div id="header">
<ul id="menu">
<li><a href="#section1"><img src="images/Logo.png"/></a>
<li><a href="#section2">心台北<p style="font-size:8px">Taipei</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc1.png"><a href="#section3">視角<p style="font-size:8px">Visual</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc2.png"><a href="#section4">聆聽<p style="font-size:8px">Listen</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc3.png"><a href="#section5">尋味<p style="font-size:8px">Taste</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc4.png"><a href="#section6">聞香<p style="font-size:8px">Smell</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc5.png"><a href="#section7">觸動<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>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript <scrijs/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script>

<script type="text/javascript" src="http://www.funtaipei.tw/" src="http://www.funtaipei.tw/js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="http://www.funtaipei.tw/js/jquery.scrollTo-1.4.2-min.js"></script>

<script type="text/javascript" src="http://www.funtaipei.tw/js/respond.min.js"></script>
<script>
$(document).ready(function() {
$('#menu a').click(function () {

$('#wrapper').scrollTo($(this).attr('href'), 1000);

return false;
});
});
</script>
</html></xmp>//youtu.be/nit3yBGwNDQ

<iframe width="853" height="480" src="//www.youtube.com/embed/nit3yBGwNDQ?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]
<b>FunTaipei HTML 動態效果STEP5</b>
http://youtu.be/3Ik7b1LeIFw

<iframe width="853" height="480" src="//www.youtube.com/embed/3Ik7b1LeIFw?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]

Changed By: JinJin
Change Date: May 06, 2014 03:37PM

FunTaipei HTML 網頁架構分析

<h2>整體設計</h2>
<img src="https://fbcdn-sphotos-h-a.akamaihd.net/hphotos-ak-prn2/t1.0-9/10298949_10152452521313729_6564968769040801594_n.jpg" />
<style> .message-body img { width: 83% }</style>
<h2>佈景設計</h2>
<img src="https://fbcdn-sphotos-c-a.akamaihd.net/hphotos-ak-prn2/t1.0-9/10264278_10152452558873729_4623662594193507259_n.jpg" />

step1.html
<xmp><html>
<head>
<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>
</head>

<body>
<div id="header">
</div>

<div id="wrapper">
<ul id="mask">
<li id="section1" class="box">
<div class="content">

</div>
</li>
</ul>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/respond.min.js"></script>
</html></xmp>
<h2>頂部選單</h2>
<img src="https://fbcdn-sphotos-g-a.akamaihd.net/hphotos-ak-frc3/t1.0-9/p417x417/10298672_10152452665943729_2977919713645902284_n.jpg" />

step2.html
<xmp><html>
<head>
<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>
</head>

<body>
<div id="header">
<ul id="menu">
<li style="margin:-10px 60px 0 130px;"><a href="#section1"><img src="images/Logo.png"/></a>

<li><a href="#section1"><img src="images/Logo.png"/></a>
<li><a href="#section2">心台北<p style="font-size:8px">Taipei</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc1.png"><a href="#section3">視角<p style="font-size:8px">Visual</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc2.png"><a href="#section4">聆聽<p style="font-size:8px">Listen</p></a></li>
<li><img style="position:absolute; padding:28px 9px; " src="images/doc3.png"><a href="#section5">尋味<p style="font-size:8px">Taste</p></a></li>
<li><img style="position:absolute; padding:28px 9px; " src="images/doc4.png"><a href="#section6">聞香<p style="font-size:8px">Smell</p></a></li>
<li><img style="position:absolute; padding:28px 9px; " src="images/doc5.png"><a href="#section7">觸動<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>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/respond.min.js"></script>
</html></xmp>
<h2>頂部細部設計</h2>
<xmp><html>
<head>
<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>
</head>

<body>
<div id="header">
<ul id="menu">
<li style=""><a href="#section1"><img src="images/Logo.png"/></a>
<li><a href="#section2">心台北<p style="font-size:8px">Taipei</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc1.png"><a href="#section3">視角<p style="font-size:8px">Visual</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc2.png"><a href="#section4">聆聽<p style="font-size:8px">Listen</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc3.png"><a href="#section5">尋味<p style="font-size:8px">Taste</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc4.png"><a href="#section6">聞香<p style="font-size:8px">Smell</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc5.png"><a href="#section7">觸動<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>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/respond.min.js"></script>
</html></xmp>
<h2>主佈局設計</h2>
<xmp><html>
<head>
<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>
</head>

<body>
<div id="header">
<ul id="menu">
<li><a href="#section1"><img src="images/Logo.png"/></a>
<li><a href="#section2">心台北<p style="font-size:8px">Taipei</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc1.png"><a href="#section3">視角<p style="font-size:8px">Visual</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc2.png"><a href="#section4">聆聽<p style="font-size:8px">Listen</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc3.png"><a href="#section5">尋味<p style="font-size:8px">Taste</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc4.png"><a href="#section6">聞香<p style="font-size:8px">Smell</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc5.png"><a href="#section7">觸動<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>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript <scrijs/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script>

<script type="text/javascript" src="" src="http://www.funtaipei.tw/js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="http://www.funtaipei.tw/js/jquery.scrollTo-1.4.2-min.js"></script>

<script type="text/javascript" src="http://www.funtaipei.tw/js/respond.min.js"></script>
<script>
$(document).ready(function() {
$('#menu a').click(function () {

$('#wrapper').scrollTo($(this).attr('href'), 1000);

return false;
});
});
</script>
</html></xmp>//youtu.be/nit3yBGwNDQ

<iframe width="853" height="480" src="//www.youtube.com/embed/nit3yBGwNDQ?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]
<b>FunTaipei HTML 動態效果STEP5</b>
http://youtu.be/3Ik7b1LeIFw

<iframe width="853" height="480" src="//www.youtube.com/embed/3Ik7b1LeIFw?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]

Changed By: JinJin
Change Date: May 06, 2014 03:12PM

FunTaipei HTML 網頁架構分析

<h2>整體設計</h2>
<img src="https://fbcdn-sphotos-h-a.akamaihd.net/hphotos-ak-prn2/t1.0-9/10298949_10152452521313729_6564968769040801594_n.jpg" />
<style> .message-body img { width: 83% }</style>
<h2>佈景設計</h2>
<img src="https://fbcdn-sphotos-c-a.akamaihd.net/hphotos-ak-prn2/t1.0-9/10264278_10152452558873729_4623662594193507259_n.jpg" />

step1.html
<xmp><html>
<head>
<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>
</head>

<body>
<div id="header">
</div>

<div id="wrapper">
<ul id="mask">
<li id="section1" class="box">
<div class="content">

</div>
</li>
</ul>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/respond.min.js"></script>
</html></xmp>
<h2>頂部選單</h2>
<img src="https://fbcdn-sphotos-g-a.akamaihd.net/hphotos-ak-frc3/t1.0-9/p417x417/10298672_10152452665943729_2977919713645902284_n.jpg" />

step2.html
<xmp><html>
<head>
<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>
</head>

<body>
<div id="header">
<ul id="menu">
<li style="margin:-10px 60px 0 130px;"><a href="#section1"><img src="images/Logo.png"/></a>
<li><a href="#section1"><img src="images/Logo.png"/></a>
<li><a href="#section2">心台北<p style="font-size:8px">Taipei</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc1.png"><a href="#section3">視角<p style="font-size:8px">Visual</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc2.png"><a href="#section4">聆聽<p style="font-size:8px">Listen</p></a></li>
<li><img style="position:absolute; padding:28px 9px; " src="images/doc3.png"><a href="#section5">尋味<p style="font-size:8px">Taste</p></a></li>
<li><img style="position:absolute; padding:28px 9px; " src="images/doc4.png"><a href="#section6">聞香<p style="font-size:8px">Smell</p></a></li>
<li><img style="position:absolute; padding:28px 9px; " src="images/doc5.png"><a href="#section7">觸動<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>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/respond.min.js"></script>
</html></xmp>
<h2>頂部細部設計</h2>
<xmp><html>
<head>
<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>
</head>

<body>
<div id="header">
<ul id="menu">
<li style=""><a href="#section1"><img src="images/Logo.png"/></a>
<li><a href="#section2">心台北<p style="font-size:8px">Taipei</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc1.png"><a href="#section3">視角<p style="font-size:8px">Visual</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc2.png"><a href="#section4">聆聽<p style="font-size:8px">Listen</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc3.png"><a href="#section5">尋味<p style="font-size:8px">Taste</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc4.png"><a href="#section6">聞香<p style="font-size:8px">Smell</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc5.png"><a href="#section7">觸動<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>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/respond.min.js"></script>
</html></xmp>
<h2>主佈局設計</h2>
<xmp><html>
<head>
<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;
.content .text {
font-size: 3em;
width: 300px; height: 100px;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
</style>
</head>

<body>
<div id="header">
-->
tion: 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>
</head>

<body>
<div id="header">
<ul id="menu">
<li><a href="#section1"><img src="images/Logo.png"/></a>
<li><a href="#section2">心台北<p style="font-size:8px">Taipei</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc1.png"><a href="#section3">視角<p style="font-size:8px">Visual</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc2.png"><a href="#section4">聆聽<p style="font-size:8px">Listen</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc3.png"><a href="#section5">尋味<p style="font-size:8px">Taste</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc4.png"><a href="#section6">聞香<p style="font-size:8px">Smell</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc5.png"><a href="#section7">觸動<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>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript <sc $('#wrapper').scrollTo($(this).attr('href'), 1000);

return false;
});
'href'), 1000);

return false;
});
type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script>

<script type="text/javascript" src="" src="http://www.funtaipei.tw/js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="http://www.funtaipei.tw/js/jquery.scrollTo-1.4.2-min.js"></script>

<script type="text/javascript" src="http://www.funtaipei.tw/js/respond.min.js"></script>
<script>
$(document).ready(function() {
$('#menu a').click(function () {

$('#wrapper').scrollTo($(this).attr('href'), 1000);

return false;
});
});
</script>
</html></xmp>//youtu.be/nit3yBGwNDQ

<iframe width="853" height="480" src="//www.youtube.com/embed/nit3yBGwNDQ?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]
<b>FunTaipei HTML 動態效果STEP5</b>
http://youtu.be/3Ik7b1LeIFw

<iframe width="853" height="480" src="//www.youtube.com/embed/3Ik7b1LeIFw?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]

Changed By: JinJin
Change Date: May 06, 2014 02:52PM

FunTaipei HTML 網頁架構分析

<h2>整體設計</h2>
<img src="https://fbcdn-sphotos-h-a.akamaihd.net/hphotos-ak-prn2/t1.0-9/10298949_10152452521313729_6564968769040801594_n.jpg" />
<style> .message-body img { width: 83% }</style>
<h2>佈景設計</h2>
<img src="https://fbcdn-sphotos-c-a.akamaihd.net/hphotos-ak-prn2/t1.0-9/10264278_10152452558873729_4623662594193507259_n.jpg" />

step1.html
<xmp><html>
<head>
<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>
</head>

<body>
<div id="header">
</div>

<div id="wrapper">
<ul id="mask">
<li id="section1" class="box">
<div class="content">

</div>
</li>
</ul>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/respond.min.js"></script>
</html></xmp>
<h2>頂部選單</h2>
<img src="https://fbcdn-sphotos-g-a.akamaihd.net/hphotos-ak-frc3/t1.0-9/p417x417/10298672_10152452665943729_2977919713645902284_n.jpg" />

step2.html
<xmp><html>
<head>
<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>
</head>

<body>
<div id="header">
<ul id="menu">
<li style="margin:-10px 60px 0 130px;"><a href="#section1"><img src="images/Logo.png"/></a>
<li><a href="#section1"><img src="images/Logo.png"/></a>
<li><a href="#section2">心台北<p style="font-size:8px">Taipei</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc1.png"><a href="#section3">視角<p style="font-size:8px">Visual</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc2.png"><a href="#section4">聆聽<p style="font-size:8px">Listen</p></a></li>
<li><img style="position:absolute; padding:28px 9px; " src="images/doc3.png"><a href="#section5">尋味<p style="font-size:8px">Taste</p></a></li>
<li><img style="position:absolute; padding:28px 9px; " src="images/doc4.png"><a href="#section6">聞香<p style="font-size:8px">Smell</p></a></li>
<li><img style="position:absolute; padding:28px 9px; " src="images/doc5.png"><a href="#section7">觸動<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>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/respond.min.js"></script>
</html></xmp>
<h2>頂部細部設計</h2>
<xmp><html>
<head>
<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>
</head>

<body>
<div id="header">
<ul id="menu">
<li style=""><a href="#section1"><img src="images/Logo.png"/></a>
<li><a href="#section2">心台北<p style="font-size:8px">Taipei</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc1.png"><a href="#section3">視角<p style="font-size:8px">Visual</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc2.png"><a href="#section4">聆聽<p style="font-size:8px">Listen</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc3.png"><a href="#section5">尋味<p style="font-size:8px">Taste</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc4.png"><a href="#section6">聞香<p style="font-size:8px">Smell</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc5.png"><a href="#section7">觸動<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>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/respond.min.js"></script>
</html></xmp>
<h2>主佈局設計</h2>
<xmp><html>
<head>
<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 {
//wid overflow: hidden;
}
#mask {
width: 500%; height: 100%
}
.box {
width: 20%;
height: 100%;
float: left;
}
.content {
width: 1000px;
height: 600px;
top: 0;
th: 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;
.content .text {
font-size: 3em;
width: 300px; height: 100px;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
</style>
</head>

<body>
<div id="header">
tion: 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>
</head>

<body>
<div id="header">
<ul id="menu">
<li><a href="#section1"><img src="images/Logo.png"/></a>
<li><a href="#section2">心台北<p style="font-size:8px">Taipei</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc1.png"><a href="#section3">視角<p style="font-size:8px">Visual</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc2.png"><a href="#section4">聆聽<p style="font-size:8px">Listen</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc3.png"><a href="#section5">尋味<p style="font-size:8px">Taste</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc4.png"><a href="#section6">聞香<p style="font-size:8px">Smell</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc5.png"><a href="#section7">觸動<p style="font-size:8px">Feel</p></a></li>
</ul>
</div>

<div id="wrapper">
<ul id="mask">
<li id="section1" class="box">
<div class=" <script type="text/javascript" srccontent">

-->
div class="text">HOME PAGE</div>
</div>
</li> <script>
$(document).ready(function() {
$('#menu a').click(function () {

$('#wrapper').scrollTo($(this).attr('href'), 1000);

return false;
});
});
</script>
-END OF FIRST PAGE-->
</ul>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript <sc $('#wrapper').scrollTo($(this).attr('href'), 1000);

return false;
});
type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script>

<script type="text/javascript" src="" src="http://www.funtaipei.tw/js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="http://www.funtaipei.tw/js/jquery.scrollTo-1.4.2-min.js"></script>

<script type="text/javascript" src="http://www.funtaipei.tw/js/respond.min.js"></script>
<script>
$(document).ready(function() {
$('#menu a').click(function () {

$('#wrapper').scrollTo($(this).attr('href'), 1000);

return false;
});
});
</script>
</html></xmp>//youtu.be/nit3yBGwNDQ

<iframe width="853" height="480" src="//www.youtube.com/embed/nit3yBGwNDQ?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]
<b>FunTaipei HTML 動態效果STEP5</b>
http://youtu.be/3Ik7b1LeIFw

<iframe width="853" height="480" src="//www.youtube.com/embed/3Ik7b1LeIFw?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]

Changed By: JinJin
Change Date: May 06, 2014 02:05PM

FunTaipei HTML 網頁架構分析

<h2>整體設計</h2>
<img src="https://fbcdn-sphotos-h-a.akamaihd.net/hphotos-ak-prn2/t1.0-9/10298949_10152452521313729_6564968769040801594_n.jpg" />
<style> .message-body img { width: 83% }</style>
<h2>佈景設計</h2>
<img src="https://fbcdn-sphotos-c-a.akamaihd.net/hphotos-ak-prn2/t1.0-9/10264278_10152452558873729_4623662594193507259_n.jpg" />

step1.html
<xmp><html>
<head>
<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 height:0;

verflow:hidden;
}
#header{
width:100%;
height:100px;
background:url(../images/head_bg.png);
}
</style>
</head>

<body>
<div id="header">
</div>

<div id="wrapper">
<ul id="mask">
<li id="section1" class="box">
<div class="content">

</div>
</li>
</ul>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/respond.min.js"></script>
</html></xmp>
<h2>頂部選單</h2>
<img src="https://fbcdn-sphotos-g-a.akamaihd.net/hphotos-ak-frc3/t1.0-9/p417x417/10298672_10152452665943729_2977919713645902284_n.jpg" />

step2.html
<xmp><html>
<head>
<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>
</head>

<body>
<div id="header">
<ul id="menu">
<li style="margin:-10px 60px 0 130px;"><a href="#section1"><img src="images/Logo.png"/></a>
<li><a href="#section1"><img src="images/Logo.png"/></a>
<li><a href="#section2">心台北<p style="font-size:8px">Taipei</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc1.png"><a href="#section3">視角<p style="font-size:8px">Visual</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc2.png"><a href="#section4">聆聽<p style="font-size:8px">Listen</p></a></li>
<li><img style="position:absolute; padding:28px 9px; " src="images/doc3.png"><a href="#section5">尋味<p style="font-size:8px">Taste</p></a></li>
<li><img style="position:absolute; padding:28px 9px; " src="images/doc4.png"><a href="#section6">聞香<p style="font-size:8px">Smell</p></a></li>
<li><img style="position:absolute; padding:28px 9px; " src="images/doc5.png"><a href="#section7">觸動<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>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/respond.min.js"></script>
</html></xmp>
<h2>頂部細部設計</h2>
<xmp><html>
<head>
<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>
</head>

<body>
<div id="header">
<ul id="menu">
<li style=""><a href="#section1"><img src="images/Logo.png"/></a>
<li><a href="#section2">心台北<p style="font-size:8px">Taipei</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc1.png"><a href="#section3">視角<p style="font-size:8px">Visual</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc2.png"><a href="#section4">聆聽<p style="font-size:8px">Listen</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc3.png"><a href="#section5">尋味<p style="font-size:8px">Taste</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc4.png"><a href="#section6">聞香<p style="font-size:8px">Smell</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc5.png"><a href="#section7">觸動<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>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/respond.min.js"></script>
</html></xmp>
<h2>主佈局設計</h2>
<xmp><html>
<head>
<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-decoratio /* SETP3: 頂部選單細部設計 */
#header ul li:nth-child(1){
margin:-10px 60px 0 130px;
}
#header ul li:nth-child(3):an:none #header ul li:nth-child(4):after,
#header ul li:nth-child(5):after,
;
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 child(5):after,
#header ul li:nth-child(6):after,
#he foader 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 {
//wid overflow: hidden;
}
#mask {
width: 500%; height: 100%
}
.box {
width: 20%;
#mask { width: 500% }
.box {
tent .text {
font-size: 3em;
}
.20%;
300px; {
%;
px;
: 1 float: left;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
sition: .content .text {
font-size: 3em;
width: 300px; height: 100px;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
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;
.content .text {
font-size: 3em;
width: 300px; height: 100px;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
</style>
</head>

<body>
<div id="header">
tion: 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>
</head>

<body>
<div id="header">
<ul id="menu">
<li><a href="#section1"><img src="images/Logo.png"/></a>
<li><a href="#section2">心台北<p style="font-size:8px">Taipei</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc1.png"><a href="#section3">視角<p style="font-size:8px">Visual</p></a></li>
<li><img style="position:absolute; pa <li id="section2" class="box">

<div id="wrapper">
<ul id="mask">
<li id="section1" class="box">
<div class=" <script type="text/javascript" srccontent">

div class="text">HOME PAGE</div>
</div>
</li>-END OF FIRST PAGE-->
</ul>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript <sc $('#wrapper').scrollTo($(this).attr('href'), 1000);

return false;
});
type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script>

<script type="text/javascript" src="" src="http://www.funtaipei.tw/js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="http://www.funtaipei.tw/js/jquery.scrollTo-1.4.2-min.js"></script>

<script type="text/javascript" src="http://www.funtaipei.tw/js/respond.min.js"></script>
<script>
$(document).ready(function() {
$('#menu a').click(function () {

$('#wrapper').scrollTo($(this).attr('href'), 1000);

return false;
});
});
</script>
</html></xmp>//youtu.be/nit3yBGwNDQ

<iframe width="853" height="480" src="//www.youtube.com/embed/nit3yBGwNDQ?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]
<b>FunTaipei HTML 動態效果STEP5</b>
http://youtu.be/3Ik7b1LeIFw

<iframe width="853" height="480" src="//www.youtube.com/embed/3Ik7b1LeIFw?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]

Changed By: HP
Change Date: May 06, 2014 01:05PM

FunTaipei HTML 網頁架構分析

<h2>整體設計</h2>
<img src="https://fbcdn-sphotos-h-a.akamaihd.net/hphotos-ak-prn2/t1.0-9/10298949_10152452521313729_6564968769040801594_n.jpg" />
<style> .message-body img { width: 83% }</style>
<h2>佈景設計</h2>
<img src="https://fbcdn-sphotos-c-a.akamaihd.net/hphotos-ak-prn2/t1.0-9/10264278_10152452558873729_4623662594193507259_n.jpg" />

step1.html
<xmp><html>
<head>
<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 height:0;
verflow:hidden;
}
#header{
width:100%;
height:100px;
background:url(../images/head_bg.png);
}
</style>
</head>

<body>
<div id="header">
</div>

<div id="wrapper">
<ul id="mask">
<li id="section1" class="box">
<div class="content">

</div>
</li>
</ul>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/respond.min.js"></script>
</html></xmp>
<h2>頂部選單</h2>
<img src="https://fbcdn-sphotos-g-a.akamaihd.net/hphotos-ak-frc3/t1.0-9/p417x417/10298672_10152452665943729_2977919713645902284_n.jpg" />

step2.html
<xmp><html>
<head>
<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>
</head>

<body>
<div id="header">
<ul id="menu">
<li style="margin:-10px 60px 0 130px;"><a href="#section1"><img src="images/Logo.png"/></a>
<li><a href="#section1"><img src="images/Logo.png"/></a>
<li><a href="#section2">心台北<p style="font-size:8px">Taipei</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc1.png"><a href="#section3">視角<p style="font-size:8px">Visual</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc2.png"><a href="#section4">聆聽<p style="font-size:8px">Listen</p></a></li>
<li><img style="position:absolute; padding:28px 9px; " src="images/doc3.png"><a href="#section5">尋味<p style="font-size:8px">Taste</p></a></li>
<li><img style="position:absolute; padding:28px 9px; " src="images/doc4.png"><a href="#section6">聞香<p style="font-size:8px">Smell</p></a></li>
<li><img style="position:absolute; padding:28px 9px; " src="images/doc5.png"><a href="#section7">觸動<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>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/respond.min.js"></script>
</html></xmp>
<h2>頂部細部設計</h2>
<xmp><html>
<head>
<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>
</head>

<body>
<div id="header">
<ul id="menu">
<li style=""><a href="#section1"><img src="images/Logo.png"/></a>
<li><a href="#section2">心台北<p style="font-size:8px">Taipei</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc1.png"><a href="#section3">視角<p style="font-size:8px">Visual</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc2.png"><a href="#section4">聆聽<p style="font-size:8px">Listen</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc3.png"><a href="#section5">尋味<p style="font-size:8px">Taste</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc4.png"><a href="#section6">聞香<p style="font-size:8px">Smell</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc5.png"><a href="#section7">觸動<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>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script>
<script type="text/javascript" src 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;
}
#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;*/
}
#mask { width: 500% }
.box {
width: 20%;
height: 100%;
float: left;
}
.content .text {
font-size: 3em;
width: 300px; height: 100px;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
</style>
</head>

<body>
<div id="header">
<ul id="menu">
<li><a href="#section1"><img src="images/Logo.png"/></a>
<li><a href="#section2">心台北<p style="font-size:8px">Taipei</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc1.png"><a href="#section3">視角<p style="font-size:8px">Visual</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc2.png"><a href="#section4">聆聽<p style="font-size:8px">Listen</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc3.png"><a href="#section5">尋味<p style="font-size:8px">Taste</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc4.png"><a href="#section6">聞香<p style="font-size:8px">Smell</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc5.png"><a href="#section7">觸動<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>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/respond.min.js"></script>
</html></xmp> 9px;" src="images/doc4.png"><a href="#section6">聞香<p style="font-size:8px">Smell</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc5.png"><a href="#section7">觸動<p style="font-size:8px">Feel</p></a></li>
</ul>
</div>

<div id="wrapper">
<ul id="mask">
<li id="section1" class="box">
<div class=" <script type="text/javascript" srccontent">

div class="text">HOME PAGE</div>
</div>
</li>-END OF FIRST PAGE-->
</ul>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript <sc $('#wrapper').scrollTo($(this).attr('href'), 1000);

return false;
});
type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script>

<script type="text/javascript" src="" src="http://www.funtaipei.tw/js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="http://www.funtaipei.tw/js/jquery.scrollTo-1.4.2-min.js"></script>

<script type="text/javascript" src="http://www.funtaipei.tw/js/respond.min.js"></script>
<script>
$(document).ready(function() {
$('#menu a').click(function () {

$('#wrapper').scrollTo($(this).attr('href'), 1000);

return false;
});
});
</script>
</html></xmp>//youtu.be/nit3yBGwNDQ

<iframe width="853" height="480" src="//www.youtube.com/embed/nit3yBGwNDQ?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]
<b>FunTaipei HTML 動態效果STEP5</b>
http://youtu.be/3Ik7b1LeIFw

<iframe width="853" height="480" src="//www.youtube.com/embed/3Ik7b1LeIFw?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]

Changed By: HP
Change Date: May 06, 2014 12:33PM

FunTaipei HTML 網頁架構分析

<h2>整體設計</h2>
<img src="https://fbcdn-sphotos-h-a.akamaihd.net/hphotos-ak-prn2/t1.0-9/10298949_10152452521313729_6564968769040801594_n.jpg" />
<style> <style> .message-body img {85% 83% th: 83% }</style>
<h2>佈景設計</h2>
<img src="https://fbcdn-sphotos-c-a.akamaihd.net/hphotos-ak-prn2/t1.0-9/10264278_10152452558873729_4623662594193507259_n.jpg" />

step1.html
<xmp><html>
<head>
<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 height:0;
verflow:hidden;
}
#header{
width:100%;
height:100px;
background:url(../images/head_bg.png);
}
</style>
</head>

<body>
<div id="header">
</div>

<div id="wrapper">
<ul id="mask">
<li id="section1" class="box">
<div class="content">

</div>
</li>
</ul>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/respond.min.js"></script>
</html></xmp>
<h2>頂部選單</h2>
<img src="https://fbcdn-sphotos-g-a.akamaihd.net/hphotos-ak-frc3/t1.0-9/p417x417/10298672_10152452665943729_2977919713645902284_n.jpg" />

step2.html
<xmp><html>
<head>
<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>
</head>

<body>
<div id="header">
<ul id="menu">
<li style="margin:-10px 60px 0 130px;"><a href="#section1"><img src="images/Logo.png"/></a>
<li><a href="#section1"><img src="images/Logo.png"/></a>
<li><a href="#section2">心台北<p style="font-size:8px">Taipei</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc1.png"><a href="#section3">視角<p style="font-size:8px">Visual</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc2.png"><a href="#section4">聆聽<p style="font-size:8px">Listen</p></a></li>
<li><img style="position:absolute; padding:28px 9px; " src="images/doc3.png"><a href="#section5">尋味<p style="font-size:8px">Taste</p></a></li>
<li><img style="position:absolute; padding:28px 9px; " src="images/doc4.png"><a href="#section6">聞香<p style="font-size:8px">Smell</p></a></li>
<li><img style="position:absolute; padding:28px 9px; " src="images/doc5.png"><a href="#section7">觸動<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>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script>
<script type="text/javascript" srctent="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>
</head>

<body>
<div id="header">
<ul id="menu">
<li style=""><a href="#section1"><img src="images/Logo.png"/></a>
<li><a href="#section2">心台北<p style="font-size:8px">Taipei</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc1.png"><a href="#section3">視角<p style="font-size:8px">Visual</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc2.png"><a href="#section4">聆聽<p style="font-size:8px">Listen</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc3.png"><a href="#section5">尋味<p style="font-size:8px">Taste</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc4.png"><a href="#section6">聞香<p style="font-size:8px">Smell</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc5.png"><a href="#section7">觸動<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>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/respond.min.js"></script>
</html></xmp>
<script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script>
<script type="text/javascript" src 9px;" src="images/doc4.png"><a href="#section6">聞香<p style="font-size:8px">Smell</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc5.png"><a href="#section7">觸動<p style="font-size:8px">Feel</p></a></li>
</ul>
</div>

<div id="wrapper">
<ul id="mask">
<li id="section1" class="box">
<div class=" <script type="text/javascript" srccontent">

div class="text">HOME PAGE</div>
</div>
</li>-END OF FIRST PAGE-->
</ul>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript <sc $('#wrapper').scrollTo($(this).attr('href'), 1000);

return false;
});
type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script>

<script type="text/javascript" src="" src="http://www.funtaipei.tw/js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="http://www.funtaipei.tw/js/jquery.scrollTo-1.4.2-min.js"></script>

<script type="text/javascript" src="http://www.funtaipei.tw/js/respond.min.js"></script>
<script>
$(document).ready(function() {
$('#menu a').click(function () {

$('#wrapper').scrollTo($(this).attr('href'), 1000);

return false;
});
});
</script>
</html></xmp>//youtu.be/nit3yBGwNDQ

<iframe width="853" height="480" src="//www.youtube.com/embed/nit3yBGwNDQ?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]
<b>FunTaipei HTML 動態效果STEP5</b>
http://youtu.be/3Ik7b1LeIFw

<iframe width="853" height="480" src="//www.youtube.com/embed/3Ik7b1LeIFw?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]

Changed By: HP
Change Date: May 06, 2014 04:24AM

FunTaipei HTML 網頁架構分析

<h2>整體設計</h2>
<img src="https://fbcdn-sphotos-h-a.akamaihd.net/hphotos-ak-prn2/t1.0-9/10298949_10152452521313729_6564968769040801594_n.jpg" />
<style> <style> .message-body img {85% th: 83% }</style>
<h2>佈景設計</h2>
<img src="https://fbcdn-sphotos-c-a.akamaihd.net/hphotos-ak-prn2/t1.0-9/10264278_10152452558873729_4623662594193507259_n.jpg" />

step1.html
<xmp><html>
<head>
<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 height:0;
verflow:hidden;
}
#header{
width:100%;
height:100px;
background:url(../images/head_bg.png);
}
</style>
</head>

<body>
<div id="header">
</div>

<div id="wrapper">
<ul id="mask">
<li id="section1" class="box">
<div class="content">

</div>
</li>
</ul>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/resphotos-g-a.akamaihd.net/hphotos-ak-frc3/t1.0-9/p417x417/10298672_10152452665943729_2977919713645902284_n.jpg" />
<xmp><html>
<head>
<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>
</head>

<body>
<div id="header">
<ul id="menu">
<li style="margin:-10px 60px 0 130px;"><a href="#section1"><img src="images/Logo.png"/></a>
<li><a href="#section2">心台北<p style="font-size:8px">Taipei</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc1.png"><a href="#section3">視角<p style="font-size:8px">Visual</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc2.png"><a href="#section4">聆聽<p style="font-size:8px">Listen</p></a></li>
<li><img style="position:absolute; padding:28px 9px; " src="images/doc3.png"><a href="#section5">尋味<p style="font-size:8px">Taste</p></a></li>
<li><img style="position:absolute; padding:28px 9px; " src="images/doc4.png"><a href="#section6">聞香<p style="font-size:8px">Smell</p></a></li>
<li><img style="position:absolute; padding:28px 9px; " src="images/doc5.png"><a href="#section7">觸動<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>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/respond.min.js"></script>
</html></xmp>2-min.js"></script>
<script type="text/javascript" src
<script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script>
<script type="text/javascript" src 9px;" src="images/doc4.png"><a href="#section6">聞香<p style="font-size:8px">Smell</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc5.png"><a href="#section7">觸動<p style="font-size:8px">Feel</p></a></li>
</ul>
</div>

<div id="wrapper">
<ul id="mask">
<li id="section1" class="box">
<div class=" <script type="text/javascript" srccontent">

div class="text">HOME PAGE</div>
</div>
</li>-END OF FIRST PAGE-->
</ul>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript <sc $('#wrapper').scrollTo($(this).attr('href'), 1000);

return false;
});
type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script>

<script type="text/javascript" src="" src="http://www.funtaipei.tw/js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="http://www.funtaipei.tw/js/jquery.scrollTo-1.4.2-min.js"></script>

<script type="text/javascript" src="http://www.funtaipei.tw/js/respond.min.js"></script>
<script>
$(document).ready(function() {
$('#menu a').click(function () {

$('#wrapper').scrollTo($(this).attr('href'), 1000);

return false;
});
});
</script>
</html></xmp>//youtu.be/nit3yBGwNDQ

<iframe width="853" height="480" src="//www.youtube.com/embed/nit3yBGwNDQ?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]
<b>FunTaipei HTML 動態效果STEP5</b>
http://youtu.be/3Ik7b1LeIFw

<iframe width="853" height="480" src="//www.youtube.com/embed/3Ik7b1LeIFw?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]

Changed By: HP
Change Date: May 06, 2014 03:37AM

funtFunTaipei HTML 網頁架構分析

11111<h2>整體設計</h2>
<img src="https://fbcdn-sphotos-h-a.akamaihd.net/hphotos-ak-prn2/t1.0-9/10298949_10152452521313729_6564968769040801594_n.jpg" />
<style> .message-body img { width: 85% }</style>
<h2>佈景設計</h2>
<img src="https://fbcdn-sphotos-c-a.akamaihd.net/hphotos-ak-prn2/t1.0-9/10264278_10152452558873729_4623662594193507259_n.jpg" />
<xmp><html>
<head>
<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;height:0;
}
#header{
width:100%;
height:100px;
background:url(../images/head_bg.png);
}
</style>
</head>

<body>
<div id="header">
</div>

<div id="wrapper">
<ul id="mask">
<li id="section1" class="box">
<div class="content">

</div>
</li>
</ul>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/respond.min.js"></script>
</html></xmp>2-min.js"></script>
<script type="text/javascript" src
<script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script>
<script type="text/javascript" src 9px;" src="images/doc4.png"><a href="#section6">聞香<p style="font-size:8px">Smell</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc5.png"><a href="#section7">觸動<p style="font-size:8px">Feel</p></a></li>
</ul>
</div>

<div id="wrapper">
<ul id="mask">
<li id="section1" class="box">
<div class=" <script type="text/javascript" srccontent">

div class="text">HOME PAGE</div>
</div>
</li>-END OF FIRST PAGE-->
</ul>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript <sc $('#wrapper').scrollTo($(this).attr('href'), 1000);

return false;
});
type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script>

<script type="text/javascript" src="" src="http://www.funtaipei.tw/js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="http://www.funtaipei.tw/js/jquery.scrollTo-1.4.2-min.js"></script>

<script type="text/javascript" src="http://www.funtaipei.tw/js/respond.min.js"></script>
<script>
$(document).ready(function() {
$('#menu a').click(function () {

$('#wrapper').scrollTo($(this).attr('href'), 1000);

return false;
});
});
</script>
</html></xmp>//youtu.be/nit3yBGwNDQ

<iframe width="853" height="480" src="//www.youtube.com/embed/nit3yBGwNDQ?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]
<b>FunTaipei HTML 動態效果STEP5</b>
http://youtu.be/3Ik7b1LeIFw

<iframe width="853" height="480" src="//www.youtube.com/embed/3Ik7b1LeIFw?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]

Original Message

作者: HP
Date: May 06, 2014 02:45AM

funtaipei HTML 架構分析

111112-min.js">

//youtu.be/nit3yBGwNDQ

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

[hr]

Change History

Original Message