Welcome! 登入 註冊
專區首頁 專區百科 專區論壇 專區部落格 專區地圖

Advanced

Change History

Message: [講義] FunTaipei HTML 網頁架構分析(1)-jQuery動態換頁效果

Changed By: JinJin
Change Date: May 19, 2015 11:29PM

[講義] FunTaipei HTML 網頁架構分析(1)-jQuery動態換頁效果
<h2>整體設計</h2>
http://www.funtaipei.tw/

1.單欄網頁,單純的header,content區塊
2.細膩的視覺設計,重視畫面之間細緻的關係,手繪風格,利用不同層次的圖,營造畫面空間關係,搭配javascript小動畫,增添畫面豐富度
3.網頁架構單純,以單頁的方式,使用錨點連結的方式,製作多頁效果

<img src="http://i.imgur.com/3kf5Q1B.jpg" width="90%">

[hr]
<h2>步驟一佈景設計</h2>
單欄網頁,單純的header,content區塊

<img src="http://i.imgur.com/wTlkpyV.jpg" width="95%">

step1.html
<b>step1.html</b>
<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">
<!--<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>
</head>

<body>
<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 -->
</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>

[hr]
<h2>步驟二頂部選單</h2>
1.利用ul li加入上方導覽選單,並利用float設計水平選項
2.方便起見,暫時將CSS直接寫在HTML中

<img src="http://i.imgur.com/cEUbBiG.jpg" width="95%">

step2.html
<b>step2.html</b>
<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">
<!--<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>
</head>

<body>
<div id="header"><!--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><!--HEADER結束-->

<div id="wrapper">
<ul id="mask">
<li id="section1" class="box"><!--首頁 -->
<div class="content">
<!--首頁內容-->
</div>
</li><!--首頁結束 -->
</ul><!-- end mask -->
</div><!-- end wrapper -->
</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>

[hr]
<h2>步驟三頂部細部設計</h2>
於CSS中家入細膩的設定,呈現精緻效果,數值可依不同需求設定

<img src="http://i.imgur.com/68SxJse.jpg" width="95%">

step3.html
<b>step3.html</b>
<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">
<!--<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>
</head>

<body>
<div id="header"><!--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><!--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 -->
</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>

[hr]
<h2>步驟四主佈局設計-動態換頁效果</h2>
於html裏加入ㄨjquery語法

<img src="http://i.imgur.com/hg0lpjA.jpg" width="95%">

step4.html
於html裏加入jquery語法

<img src="http://i.imgur.com/hg0lpjA.jpg" width="95%">

<b>step4.html</b>
<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">
<!--<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>
</head>

<body>
<div id="header"><!--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><!--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 -->
</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/main.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>

[hr]
<h2>FunTaipei HTML 網頁架構 頂部細部設計STEP1--4 </h2>
http://youtu.be/nit3yBGwNDQ
<iframe width="853"
" 2>上課影音 </h2>
<h3>FunTaipei HTML 網頁架構 頂部細部設計STEP1-3</h3>
http://youtu.be/nit3yBGwNDQ
<iframe width="853" height="4<h3>src="https://ww動態效果STEP5
動態效果STEP4</h3>
yBGwNDQ?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]
<h3>FunTaipei HTML 動態效果STEP4</h3>
http://youtu.be/3Ik7b1LeIFw
<iframe width="853" height="480" src="https://www.youtube.com/embed/3Ik7b1LeIFw?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]
<h2>學長姐範例</h2>
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/

[hr]
<h2>圖片範例原始碼</h2>
<img src="http://i.imgur.com/IKmoO1M.jpg" width="90%">

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

<body>
<div id="header"><!--HEADER-->
<ul id="menu">
<li><a href="#section3">Blog</a>
<li><a href="#section2">Style</a></li>
<li><a href="#section1">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 src="images/1.jpg" width="800" height="500"></div>

</li><!--首頁結束 -->
<li id="section2" class="box"><!--FIRST-->
<div class="content">
<div align="center"><img src="images/2.jpg" width="818" height="516"></div>
</div>

<li id="section3" class="box"><!--SECEND-->
<div class="content">
<div align="center"><img src="images/3.jpg" width="800" height="500"></div>

<li id="section4" class="box"><!--SECEND-->
</div>
</li><!--END OF FIRST PAGE-->
</ul><!-- end mask -->
</div><!-- end wrapper -->
</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/main.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>
Changed By: JinJin
Change Date: May 19, 2015 11:25PM

[講義] FunTaipei HTML 網頁架構分析(1)-jQuery動態換頁效果
<h2>整體設計</h2>
ww.funtaipei.tw/

ei.tw/

1.單欄網頁,單純的header,content區塊
2.細膩的視覺設計,重視畫面之間細緻的關係,手繪風格,利用不同層次的圖,營造畫面空間關係,搭配javascript小動畫,增添畫面豐富度
3.網頁架構單純,以單頁的方式,使用錨點連結的方式,製作多頁效果

<img src="http://i.imgur.com/3kf5Q1B.jpg" width="90%">

[hr]
<h2>步驟一佈景設計</h2>
單欄網頁,單純的header,content區塊

<img src="http://i.imgur.com/wTlkpyV.jpg" width="90%">
<img src="http://i.imgur.com/wTlkpyV.jpg" width="95%">

step1.html
<b>step1.html</b>
<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">
<!--<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>
</head>

<body>
<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 -->
</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>

[hr]
<h2>步驟二頂部選單</h2>
1.利用ul li加入上方導覽選單,並利用float設計水平選項
2.方便起<img src="http://i.imgur.com/cEUbBiG.jpg" width="90%">
見,暫時將CSS直接寫在HTML中

<img src="http://i.imgur.com/cEUbBiG.jpg" width="95%">

step2.html
<b>step2.html</b>
<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">
<!--<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>
</head>

<body>
<div id="header"><!--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><!--HEADER結束-->

<div id="wrapper">
<ul id="mask">
<li id="section1" class="box"><!--首頁 -->
<div class="content">
<!--首頁內容-->
</div>
</li><!--首頁結束 -->
</ul><!-- end mask -->
</div><!-- end wrapper -->
</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>

[hr]
<h2>步驟三頂部細部設計<img src="http://i.imgur.com/68SxJse.jpg" width="90%">
</h2>
於CSS中家入細膩的設定,呈現精緻效果,數值可依不同需求設定

<img src="http://i.imgur.com/68SxJse.jpg" width="95%">

step3.html
<b>step3.html</b>
<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">
<!--<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>
</head>

<body>
<div id="header"><!--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><!--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 -->
</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><img src="http://i.imgur.com/hg0lpjA.jpg" width="90%">
</xmp>

[hr]
<h2>步驟四主佈局設計-動態換頁效果</h2>
於html裏加入ㄨjquery語法

<img src="http://i.imgur.com/hg0lpjA.jpg" width="95%">

step4.html
於html裏加入jquery語法

<img src="http://i.imgur.com/hg0lpjA.jpg" width="95%">

<b>step4.html</b>
<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">
<!--<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>
</head>

<body>
<div id="header"><!--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><!--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 -->
</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/main.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>

[hr]
<h2>FunTaipei HTML 網頁架構 頂部細部設計STEP1--4 </h2>
http://youtu.be/nit3yBGwNDQ
<iframe width="853" 2>上課影音 </h2>
<h3>FunTaipei HTML 網頁架構 頂部細部設計STEP1-3</h3>
http://youtu.be/nit3yBGwNDQ
<iframe width="853" height="4src="https://ww動態效果STEP5
yBGwNDQ?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]
<h3>FunTaipei HTML 動態效果STEP4</h3>
http://youtu.be/3Ik7b1LeIFw
<iframe width="853" height="480" src="https://www.youtube.com/embed/3Ik7b1LeIFw?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]
<h2>學長姐範例</h2>
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/

[hr]
<h2>圖片範例原始碼</h2>
<img src="http://i.imgur.com/IKmoO1M.jpg" width="90%">

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

<body>
<div id="header"><!--HEADER-->
<ul id="menu">
<li><a href="#section3">Blog</a>
<li><a href="#section2">Style</a></li>
<li><a href="#section1">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 src="images/1.jpg" width="800" height="500"></div>

</li><!--首頁結束 -->
<li id="section2" class="box"><!--FIRST-->
<div class="content">
<div align="center"><img src="images/2.jpg" width="818" height="516"></div>
</div>

<li id="section3" class="box"><!--SECEND-->
<div class="content">
<div align="center"><img src="images/3.jpg" width="800" height="500"></div>

<li id="section4" class="box"><!--SECEND-->
</div>
</li><!--END OF FIRST PAGE-->
</ul><!-- end mask -->
</div><!-- end wrapper -->
</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/main.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>
Changed By: HP
Change Date: May 19, 2015 11:12PM

[講義] FunTaipei HTML 網頁架構分析(1)-jQuery動態換頁效果
<h2>整體設計</h2>
ei.tw/

1.單欄網頁,單純的header,content區塊
2.細膩的視覺設計,重視畫面之間細緻的關係,手繪風格,利用不同層次的圖,營造畫面空間關係,搭配javascript小動畫,增添畫面豐富度
3.網頁架構單純,以單頁的方式,使用錨點連結的方式,製作多頁效果

<img src="http://i.imgur.com/3kf5Q1B.jpg" width="90%">

[hr]
<h2>步驟一佈景設計</h2>
單欄網頁,單純的header,content區塊

<img src="http://i.imgur.com/wTlkpyV.jpg" width="90%">
<img src="http://i.imgur.com/wTlkpyV.jpg" width="95%">

step1.html
<b>step1.html</b>
<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">
<!--<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>
</head>

<body>
<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 -->
</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>

[hr]
<h2>步驟二頂部選單</h2>
1.利用ul li加入上方導覽選單,並利用float設計水平選項
2.方便起<img src="http://i.imgur.com/cEUbBiG.jpg" width="90%">
見,暫時將CSS直接寫在HTML中

<img src="http://i.imgur.com/cEUbBiG.jpg" width="95%">

step2.html
<b>step2.html</b>
<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">
<!--<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>
</head>

<body>
<div id="header"><!--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><!--HEADER結束-->

<div id="wrapper">
<ul id="mask">
<li id="section1" class="box"><!--首頁 -->
<div class="content">
<!--首頁內容-->
</div>
</li><!--首頁結束 -->
</ul><!-- end mask -->
</div><!-- end wrapper -->
</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>

[hr]
<h2>步驟三頂部細部設計<img src="http://i.imgur.com/68SxJse.jpg" width="90%">
</h2>
於CSS中家入細膩的設定,呈現精緻效果,數值可依不同需求設定

<img src="http://i.imgur.com/68SxJse.jpg" width="95%">

step3.html
<b>step3.html</b>
<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">
<!--<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>
</head>

<body>
<div id="header"><!--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><!--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 -->
</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><img src="http://i.imgur.com/hg0lpjA.jpg" width="90%">
</xmp>

[hr]
<h2>步驟四主佈局設計-動態換頁效果</h2>
於html裏加入ㄨjquery語法

<img src="http://i.imgur.com/hg0lpjA.jpg" width="95%">

step4.html
於html裏加入jquery語法

<img src="http://i.imgur.com/hg0lpjA.jpg" width="95%">

<b>step4.html</b>
<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">
<!--<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>
</head>

<body>
<div id="header"><!--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><!--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 -->
</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/main.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>

[hr]
<h2>FunTaipei HTML 網頁架構 頂部細部設計STEP1--4 </h2>
http://youtu.be/nit3yBGwNDQ
<iframe width="853" 2>上課影音 </h2>
<h3>FunTaipei HTML 網頁架構 頂部細部設計STEP1-3</h3>
http://youtu.be/nit3yBGwNDQ
<iframe width="853" height="4src="https://ww動態效果STEP5
yBGwNDQ?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]
<h3>FunTaipei HTML 動態效果STEP4</h3>
http://youtu.be/3Ik7b1LeIFw
<iframe width="853" height="480" src="https://www.youtube.com/embed/3Ik7b1LeIFw?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]
<h2>學長姐範例</h2>
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/

[hr]
<h2>圖片範例原始碼</h2>
<img 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):a
src=" #header ul li:nth-child(4):after,
http://i.imgur.com/IKmoO1M.jpg" width="90%">

<xmp>
<html>
<head>
<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" h /main.css">--> --[if lt IE 9]>
<l}
ink rel="stylesheet" type="text/css" s/small.css">
}
}
if]-->
<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>
</head>

<body>
<div id="header"><!--HEADER-->
<ul id="menu">
<li><a href="#section3">Blog</a>
<li><a href="#section2">Style</a></li>
<li><a href="#section1">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 src="images/1.jpg" width="800" height="500"></div>

</li><!--首頁結束 -->
<li id="section2" class="box"><!--FIRST-->
<div class="content">
<div align="center"><img src="images/2.jpg" width="818" height="516"></div>
</div>

<li id="section3" class="box"><!--SECEND-->
<div class="content">
<div align="center"><img src="images/3.jpg" width="800" height="500"></div>

<li id="section4" class="box"><!--SECEND-->
</div>
</li><!--END OF FIRST PAGE-->
</ul><!-- end mask -->
</div><!-- end wrapper -->
</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/main.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>
Changed By: HP
Change Date: May 19, 2015 11:09PM

[講義] FunTaipei HTML 網頁架構分析(1)-jQuery動態換頁效果
<h2>整體設計</h2>
ei.tw/

1.單欄網頁,單純的header,content區塊
2.細膩的視覺設計,重視畫面之間細緻的關係,手繪風格,利用不同層次的圖,營造畫面空間關係,搭配javascript小動畫,增添畫面豐富度
3.網頁架構單純,以單頁的方式,使用錨點連結的方式,製作多頁效果

<img src="http://i.imgur.com/3kf5Q1B.jpg" width="90%">

[hr]
<h2>步驟一佈景設計</h2>
單欄網頁,單純的header,content區塊

<img src="http://i.imgur.com/wTlkpyV.jpg" width="90%">
<img src="http://i.imgur.com/wTlkpyV.jpg" width="95%">

step1.html
<b>step1.html</b>
<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">
<!--<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>
</head>

<body>
<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 -->
</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>

[hr]
<h2>步驟二頂部選單</h2>
1.利用ul li加入上方導覽選單,並利用float設計水平選項
2.方便起<img src="http://i.imgur.com/cEUbBiG.jpg" width="90%">
見,暫時將CSS直接寫在HTML中

<img src="http://i.imgur.com/cEUbBiG.jpg" width="95%">

step2.html
<b>step2.html</b>
<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">
<!--<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>
</head>

<body>
<div id="header"><!--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><!--HEADER結束-->

<div id="wrapper">
<ul id="mask">
<li id="section1" class="box"><!--首頁 -->
<div class="content">
<!--首頁內容-->
</div>
</li><!--首頁結束 -->
</ul><!-- end mask -->
</div><!-- end wrapper -->
</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.scro</html><xmp>

[hr]
<h2>步驟三頂部細部設計</h2>
於CSS中家入細膩的設定,呈現精緻效果,數值可依不同需求設定

<img src="http://i.imgur.com/68SxJse.jpg" width="90%">

step3.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">
<!--<link rel="stylesheet" type="text/css" href="css/main.css">-->
href="css/main.css">-->
pt>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/respond.min.js"></script>
</html></xmp>

[hr]
<h2>步驟三頂部細部設計<img src="http://i.imgur.com/68SxJse.jpg" width="90%">
</h2>
於CSS中家入細膩的設定,呈現精緻效果,數值可依不同需求設定

<img src="http://i.imgur.com/68SxJse.jpg" width="95%">

step3.html
<b>step3.html</b>
<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">
<!--<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>
</head>

<body>
<div id="header"><!--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><!--HEADER結束--</html><xmp>
>

<div id="wrapper">
<ul id="mask">
<li id="section1" class="box"><!--首頁 -->
<div class="content">
HOME PAGE
</div>
</li><!--首頁結束 -->
</ul><!-- end mask -->
</div><!-- end wrapper -->
</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><img src="http://i.imgur.com/hg0lpjA.jpg" width="90%">
</xmp>

[hr]
<h2>步驟四主佈局設計-動態換頁效果</h2>
於html裏加入ㄨjquery語法

<img src="http://i.imgur.com/hg0lpjA.jpg" width="95%">

step4.html
於html裏加入jquery語法

<img src="http://i.imgur.com/hg0lpjA.jpg" width="95%">

<b>step4.html</b>
<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">
<!--<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>
</head>

<body>
<div id="header"><!--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><!--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</d</html><xmp>
iv>
</div>
</li><!--END OF FIRST PAGE-->
</ul><!-- end mask -->
</div><!-- end wrapper -->
</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/main.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>

[hr]
<h2>FunTaipei HTML 網頁架構 頂部細部設計STEP1--4 </h2>
http://youtu.be/nit3yBGwNDQ
<iframe width="853" 2>上課影音 </h2>
<h3>FunTaipei HTML 網頁架構 頂部細部設計STEP1-3</h3>
http://youtu.be/nit3yBGwNDQ
<iframe width="853" height="4src="https://ww動態效果STEP5
yBGwNDQ?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]
<h3>FunTaipei HTML 動態效果STEP4</h3>
http://youtu.be/3Ik7b1LeIFw
<iframe width="853" height="480" src="https://www.youtube.com/embed/3Ik7b1LeIFw?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]
<h2>學長姐範例</h2>
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/

[hr]
<h2>圖片範例原始碼</h2>
<img 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):a src=" #header ul li:nth-child(4):after,
http://i.imgur.com/IKmoO1M.jpg" width="90%">

<xmp>
<html>
<head>
<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" h /main.css">--> --[if lt IE 9]>
<l}
ink rel="stylesheet" type="text/css" s/small.css">
}
if]-->
<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>
</head>

<body>
<div id="header"><!--HEADER-->
<ul id="menu">
<li><a</html><xmp> href="#section3">Blog</a>
<li><a href="#section2">Style</a></li>
<li><a href="#section1">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 src="images/1.jpg" width="800" height="500"></div>

</li><!--首頁結束 -->
<li id="section2" class="box"><!--FIRST-->
<div class="content">
<div align="center"><img src="images/2.jpg" width="818" height="516"></div>
</div>

<li id="section3" class="box"><!--SECEND-->
<div class="content">
<div align="center"><img src="images/3.jpg" width="800" height="500"></div>

<li id="section4" class="box"><!--SECEND-->
</div>
</li><!--END OF FIRST PAGE-->
</ul><!-- end mask -->
</div><!-- end wrapper -->
</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/main.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>

Original Message

作者: JinJin
Date: May 19, 2015 10:26PM

[講義] FunTaipei HTML 網頁架構分析(1)-jQuery動態換頁效果

整體設計


ei.tw/

1.單欄網頁,單純的header,content區塊
2.細膩的視覺設計,重視畫面之間細緻的關係,手繪風格,利用不同層次的圖,營造畫面空間關係,搭配javascript小動畫,增添畫面豐富度
3.網頁架構單純,以單頁的方式,使用錨點連結的方式,製作多頁效果



[hr]

步驟一佈景設計


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




step1.html
step1.html
<html><br /> <head><br /> <title>FunTaipei</title><br /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><br /> <base href="http://www.funtaipei.tw/" /><br /> <link rel="stylesheet" type="text/css" href="css/reset.css"><br /> <!--<link rel="stylesheet" type="text/css" href="css/main.css">--><br /> <br /> <!--[if lt IE 9]><br /> <link rel="stylesheet" type="text/css" href="css/small.css"><br /> <![endif]--><br /> <style><br /> body {<br /> width:100%;<br /> background-image:url(../images/bg.png);<br /> overflow:hidden;<br /> }<br /> #header{<br /> width:100%;<br /> height:100px;<br /> background:url(../images/head_bg.png);<br /> }<br /> </style><br /> </head><br /> <br /> <body><br /> <div id="header"><!--HEADER--><br /> </div><!--HEADER結束--><br /> <br /> <div id="wrapper"><br /> <ul id="mask"><br /> <li id="section1" class="box"><!--首頁 --><br /> <div class="content"><br /> <!--首頁內容--><br /> </div><br /> </li><!--首頁結束 --><br /> </ul><!-- end mask --><br /> </div><!-- end wrapper --><br /> </body><br /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><br /> <script type="text/javascript" src="js/jquery.mousewheel.js"></script><br /> <script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script><br /> <script type="text/javascript" src="js/main.js"></script><br /> <script type="text/javascript" src="js/respond.min.js"></script><br /> </html>

[hr]

步驟二頂部選單


1.利用ul li加入上方導覽選單,並利用float設計水平選項
2.方便起
見,暫時將CSS直接寫在HTML中



step2.html
step2.html
<html><br /> <head><br /> <title>FunTaipei</title><br /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><br /> <base href="http://www.funtaipei.tw/" /><br /> <link rel="stylesheet" type="text/css" href="css/reset.css"><br /> <!--<link rel="stylesheet" type="text/css" href="css/main.css">--><br /> <br /> <!--[if lt IE 9]><br /> <link rel="stylesheet" type="text/css" href="css/small.css"><br /> <![endif]--><br /> <style><br /> /* STEP 1: 佈景設計 */<br /> body {<br /> width:100%;<br /> background-image:url(../images/bg.png);<br /> overflow:hidden;<br /> }<br /> #header{<br /> width:100%;<br /> height:100px;<br /> background:url(../images/head_bg.png);<br /> }<br /> /* STEP 2: 頂部選單 */<br /> #header ul {<br /> margin: 0 auto;<br /> width: 1000px;<br /> height: 100px;<br /> }<br /> #header li {<br /> float:left;<br /> }<br /> #header li a{<br /> padding:25px 5px 0 5px;<br /> text-align:center;<br /> height:40px;<br /> width:100px;<br /> display:block;<br /> font-size:16px;<br /> text-decoration:none;<br /> letter-spacing:2px;<br /> color:#633;<br /> }<br /> </style><br /> </head><br /> <br /> <body><br /> <div id="header"><!--HEADER--><br /> <ul id="menu"><br /> <li><a href="#section1"><img src="images/Logo.png"/></a><br /> <li><a href="#section2">心 台 北<p style="font-size:8px">Taipei</p></a></li><br /> <li><img style="position:absolute; padding:28px 9px;" src="images/doc1.png"><a href="#section3">視 角<p style="font-size:8px">Visual</p></a></li><br /> <li><img style="position:absolute; padding:28px 9px;" src="images/doc2.png"><a href="#section4">聆 聽<p style="font-size:8px">Listen</p></a></li><br /> <li><img style="position:absolute; padding:28px 9px; " src="images/doc3.png"><a href="#section5">尋 味<p style="font-size:8px">Taste</p></a></li><br /> <li><img style="position:absolute; padding:28px 9px; " src="images/doc4.png"><a href="#section6">聞 香<p style="font-size:8px">Smell</p></a></li><br /> <li><img style="position:absolute; padding:28px 9px; " src="images/doc5.png"><a href="#section7">觸 動<p style="font-size:8px">Feel</p></a></li><br /> </ul><br /> </div><!--HEADER結束--><br /> <br /> <div id="wrapper"><br /> <ul id="mask"><br /> <li id="section1" class="box"><!--首頁 --><br /> <div class="content"><br /> <!--首頁內容--><br /> </div><br /> </li><!--首頁結束 --><br /> </ul><!-- end mask --><br /> </div><!-- end wrapper --><br /> </body><br /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><br /> <script type="text/javascript" src="js/jquery.mousewheel.js"></script><br /> <script type="text/javascript" src="js/jquery.scro</html><xmp><br /> <br /> [hr]<br /> <h2>步驟三頂部細部設計</h2><br /> 於CSS中家入細膩的設定,呈現精緻效果,數值可依不同需求設定<br /> <br /> <img src="http://i.imgur.com/68SxJse.jpg" width="90%"><br /> <br /> step3.html <br /> <xmp><html><br /> <head><br /> <title>FunTaipei</title><br /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><br /> <base href="http://www.funtaipei.tw/" /><br /> <link rel="stylesheet" type="text/css" href="css/reset.css"><br /> <!--<link rel="stylesheet" type="text/css" href="css/main.css">--><br /> pt><br /> <script type="text/javascript" src="js/main.js"></script><br /> <script type="text/javascript" src="js/respond.min.js"></script><br /> </html>

[hr]

步驟三頂部細部設計


於CSS中家入細膩的設定,呈現精緻效果,數值可依不同需求設定



step3.html
step3.html
<html><br /> <head><br /> <title>FunTaipei</title><br /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><br /> <base href="http://www.funtaipei.tw/" /><br /> <link rel="stylesheet" type="text/css" href="css/reset.css"><br /> <!--<link rel="stylesheet" type="text/css" href="css/main.css">--><br /> <br /> <!--[if lt IE 9]><br /> <link rel="stylesheet" type="text/css" href="css/small.css"><br /> <![endif]--><br /> <style><br /> /* STEP 1: 佈景設計 */<br /> body {<br /> width:100%;<br /> background-image:url(../images/bg.png);<br /> overflow:hidden;<br /> }<br /> #header{<br /> width:100%;<br /> height:100px;<br /> background:url(../images/head_bg.png);<br /> }<br /> /* STEP 2: 頂部選單 */<br /> #header ul {<br /> margin: 0 auto;<br /> width: 1000px;<br /> height: 100px;<br /> }<br /> #header li {<br /> float:left;<br /> }<br /> #header li a{<br /> padding:25px 5px 0 5px;<br /> text-align:center;<br /> height:40px;<br /> width:100px;<br /> display:block;<br /> font-size:16px;<br /> text-decoration:none;<br /> letter-spacing:2px;<br /> color:#633;<br /> }<br /> /* SETP3: 頂部選單細部設計 */<br /> #header ul li:nth-child(1){<br /> margin:-10px 60px 0 130px;<br /> }<br /> #header ul li:nth-child(3):after,<br /> #header ul li:nth-child(4):after,<br /> #header ul li:nth-child(5):after,<br /> #header ul li:nth-child(6):after,<br /> #header ul li:nth-child(7):after{<br /> display:block;<br /> content:"";<br /> background:url(../images/line.png) top right no-repeat;<br /> width:1px;<br /> height:42px;<br /> margin-top:-45px ;<br /> }<br /> a,p {<br /> font-family:"微軟正黑體",Arial, Helvetica, sans-serif;<br /> font-weight:bold;}<br /> #header ul li a:hover{ color:#903;}<br /> </style><br /> </head><br /> <br /> <body><br /> <div id="header"><!--HEADER--><br /> <ul id="menu"><br /> <li style=""><a href="#section1"><img src="images/Logo.png"/></a><br /> <li><a href="#section2">心 台 北<p style="font-size:8px">Taipei</p></a></li><br /> <li><img style="position:absolute; padding:28px 9px;" src="images/doc1.png"><a href="#section3">視 角<p style="font-size:8px">Visual</p></a></li><br /> <li><img style="position:absolute; padding:28px 9px;" src="images/doc2.png"><a href="#section4">聆 聽<p style="font-size:8px">Listen</p></a></li><br /> <li><img style="position:absolute; padding:28px 9px;" src="images/doc3.png"><a href="#section5">尋 味<p style="font-size:8px">Taste</p></a></li><br /> <li><img style="position:absolute; padding:28px 9px;" src="images/doc4.png"><a href="#section6">聞 香<p style="font-size:8px">Smell</p></a></li><br /> <li><img style="position:absolute; padding:28px 9px;" src="images/doc5.png"><a href="#section7">觸 動<p style="font-size:8px">Feel</p></a></li><br /> </ul><br /> </div><!--HEADER結束--</html><xmp><br /> ><br /> <br /> <div id="wrapper"><br /> <ul id="mask"><br /> <li id="section1" class="box"><!--首頁 --><br /> <div class="content"><br /> HOME PAGE<br /> </div><br /> </li><!--首頁結束 --><br /> </ul><!-- end mask --><br /> </div><!-- end wrapper --><br /> </body><br /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><br /> <script type="text/javascript" src="js/jquery.mousewheel.js"></script><br /> <script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script><br /> <script type="text/javascript" src="js/main.js"></script><br /> <script type="text/javascript" src="js/respond.min.js"></script><br /> </html><img src="http://i.imgur.com/hg0lpjA.jpg" width="90%"><br />

[hr]

步驟四主佈局設計-動態換頁效果


於html裏加入ㄨjquery語法



step4.html
於html裏加入jquery語法



step4.html
<html><br /> <head><br /> <title>FunTaipei</title><br /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><br /> <base href="http://www.funtaipei.tw/" /><br /> <link rel="stylesheet" type="text/css" href="css/reset.css"><br /> <!--<link rel="stylesheet" type="text/css" href="css/main.css">--><br /> <br /> <!--[if lt IE 9]><br /> <link rel="stylesheet" type="text/css" href="css/small.css"><br /> <![endif]--><br /> <style><br /> /* STEP 1: 佈景設計 */<br /> body {<br /> width:100%;<br /> background-image:url(../images/bg.png);<br /> overflow:hidden;<br /> }<br /> #header{<br /> width:100%;<br /> height:100px;<br /> background:url(../images/head_bg.png);<br /> }<br /> /* STEP 2: 頂部選單 */<br /> #header ul {<br /> margin: 0 auto;<br /> width: 1000px;<br /> height: 100px;<br /> }<br /> #header li {<br /> float:left;<br /> }<br /> #header li a{<br /> padding:25px 5px 0 5px;<br /> text-align:center;<br /> height:40px;<br /> width:100px;<br /> display:block;<br /> font-size:16px;<br /> text-decoration:none;<br /> letter-spacing:2px;<br /> color:#633;<br /> }<br /> /* SETP3: 頂部選單細部設計 */<br /> #header ul li:nth-child(1){<br /> margin:-10px 60px 0 130px;<br /> }<br /> #header ul li:nth-child(3):after,<br /> #header ul li:nth-child(4):after,<br /> #header ul li:nth-child(5):after,<br /> #header ul li:nth-child(6):after,<br /> #header ul li:nth-child(7):after{<br /> display:block;<br /> content:"";<br /> background:url(../images/line.png) top right no-repeat;<br /> width:1px;<br /> height:42px;<br /> margin-top:-45px ;<br /> }<br /> a,p {<br /> font-family:"微軟正黑體",Arial, Helvetica, sans-serif;<br /> font-weight:bold;}<br /> #header ul li a:hover{ color:#903;}<br /> /* STEP4: 主佈局設計 */<br /> #wrapper {<br /> //width: 100%;<br /> //height: 100%;<br /> //position: absolute;<br /> overflow: hidden; /* VERY IMPORTANT */<br /> }<br /> #mask {<br /> width: 500%; height: 100%<br /> }<br /> .box {<br /> width: 20%;<br /> height: 100%;<br /> float: left;<br /> }<br /> .content {<br /> width: 1000px;<br /> height: 600px;<br /> top: 0;<br /> margin: 0 auto;<br /> position: relative;<br /> /*border: 1px #0CF solid;*/<br /> }<br /> /* 水平垂直置中 */<br /> .content .text {<br /> font-size: 3em;<br /> width: 300px; height: 100px; <br /> margin: auto;<br /> position: absolute;<br /> top: 0; left: 0; bottom: 0; right: 0;<br /> }<br /> </style><br /> </head><br /> <br /> <body><br /> <div id="header"><!--HEADER--><br /> <ul id="menu"><br /> <li><a href="#section1"><img src="images/Logo.png"/></a><br /> <li><a href="#section2">心 台 北<p style="font-size:8px">Taipei</p></a></li><br /> <li><img style="position:absolute; padding:28px 9px;" src="images/doc1.png"><a href="#section3">視 角<p style="font-size:8px">Visual</p></a></li><br /> <li><img style="position:absolute; padding:28px 9px;" src="images/doc2.png"><a href="#section4">聆 聽<p style="font-size:8px">Listen</p></a></li><br /> <li><img style="position:absolute; padding:28px 9px;" src="images/doc3.png"><a href="#section5">尋 味<p style="font-size:8px">Taste</p></a></li><br /> <li><img style="position:absolute; padding:28px 9px;" src="images/doc4.png"><a href="#section6">聞 香<p style="font-size:8px">Smell</p></a></li><br /> <li><img style="position:absolute; padding:28px 9px;" src="images/doc5.png"><a href="#section7">觸 動<p style="font-size:8px">Feel</p></a></li><br /> </ul><br /> </div><!--HEADER結束--><br /> <br /> <div id="wrapper"><br /> <ul id="mask"><br /> <li id="section1" class="box"><!--首頁 --><br /> <div class="content"><br /> <div class="text">HOME PAGE</div><br /> </div><br /> </li><!--首頁結束 --><br /> <li id="section2" class="box"><!--FIRST--><br /> <div class="content"><br /> <div class="text">FIRST PAGE</d</html><xmp><br /> iv><br /> </div><br /> </li><!--END OF FIRST PAGE--><br /> </ul><!-- end mask --><br /> </div><!-- end wrapper --><br /> </body><br /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><br /> <script type="text/javascript" src="http://www.funtaipei.tw/js/jquery.mousewheel.js"></script><br /> <script type="text/javascript" src="http://www.funtaipei.tw/js/jquery.scrollTo-1.4.2-min.js"></script><br /> <!--<script type="text/javascript" src="http://www.funtaipei.tw/js/main.js"></script>--><br /> <script type="text/javascript" src="http://www.funtaipei.tw/js/respond.min.js"></script><br /> <script><br /> $(document).ready(function() {<br /> $('#menu a').click(function () {<br /> <br /> $('#wrapper').scrollTo($(this).attr('href'), 1000);<br /> <br /> return false;<br /> }); <br /> });<br /> </script><br /> </html>

[hr]

FunTaipei HTML 網頁架構 頂部細部設計STEP1--4


http://youtu.be/nit3yBGwNDQ


[hr]

FunTaipei HTML 動態效果STEP4


http://youtu.be/3Ik7b1LeIFw


[hr]

學長姐範例


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/

[hr]

圖片範例原始碼


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):a src=" #header ul li:nth-child(4):after,
http://i.imgur.com/IKmoO1M.jpg" width="90%">

<br /> <html><br /> <head><br /> <title>Kiko Mizuhara</title><br /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><br /> <br /> <link rel="stylesheet" type="text/css" href="css/reset.css"><br /> <!--<link rel="stylesheet" type="text/css" h /main.css">--> --[if lt IE 9]><br /> <l}<br /> ink rel="stylesheet" type="text/css" s/small.css"><br /> }<br /> if]--><br /> <style><br /> /* STEP 1: 佈景設計 */<br /> body {<br /> width: 100%;<br /> overflow: hidden;<br /> background-color: #000000;<br /> }<br /> #header {<br /> width: 100%;<br /> height: 80px;<br /> background-color: #000000;<br /> }<br /> /* STEP 2: 頂部選單 */<br /> #header ul {<br /> width: 500px;<br /> }<br /> <br /> #header li {<br /> float: right;<br /> }<br /> #header li a{<br /> padding: 25px 5px 0 0px;<br /> text-align: center;<br /> height: 40px;<br /> width: 100px;<br /> display: block;<br /> font-size: 18px;<br /> letter-spacing: 2px;<br /> color: #FFFFFF;<br /> font-weight: bold;<br /> text-decoration: none;<br /> }<br /> /* SETP3: 頂部選單細部設計 */<br /> #header ul li:nth-child(1){<br /> margin:-10px 20x 0 130px;<br /> }<br /> #header ul li:nth-child(3):after,<br /> #header ul li:nth-child(4):after,<br /> #header ul li:nth-child(5):after,<br /> #header ul li:nth-child(6):after,<br /> #header ul li:nth-child(7):after{<br /> <br /> display:block;<br /> content:"";<br /> background-color: #FDE162;<br /> width:1px;<br /> height:42px;<br /> margin-top:-45px ;<br /> }<br /> a,p {<br /> font-family:;<br /> font-family: "微軟正黑體";<br /> }<br /> #header ul li a:hover{<br /> color: #FF6600;<br /> }<br /> /* STEP4: 主佈局設計 */<br /> #wrapper {<br /> //width: 100%;<br /> //height: 100%;<br /> //position: absolute;<br /> overflow: hidden; /* VERY IMPORTANT */<br /> }<br /> #mask {<br /> width: 500%; height: 100%<br /> }<br /> .box {<br /> width: 20%;<br /> height: 100%;<br /> float: left;<br /> }<br /> .content {<br /> width: 1000px;<br /> height: 600px;<br /> top: 0;<br /> margin: 0 auto;<br /> position: relative;<br /> /*border: 1px #0CF solid;*/<br /> }<br /> /* 水平垂直置中 */<br /> .content .text {<br /> font-size: 3em;<br /> width: 300px; height: 100px; <br /> margin: auto;<br /> position: absolute;<br /> top: 0; left: 0; bottom: 0; right: 0;<br /> }<br /> </style><br /> </head><br /> <br /> <body><br /> <div id="header"><!--HEADER--><br /> <ul id="menu"><br /> <li><a</html><xmp> href="#section3">Blog</a><br /> <li><a href="#section2">Style</a></li><br /> <li><a href="#section1">Kiko</a></li><br /> <br /> </ul><br /> </div><!--HEADER結束--><br /> <br /> <div id="wrapper"><br /> <ul id="mask"><br /> <li id="section1" class="box"><!--首頁 --><br /> <div class="content"><br /> <div align="center"></div><br /> <div align="center"><img src="images/1.jpg" width="800" height="500"></div><br /> <br /> </li><!--首頁結束 --><br /> <li id="section2" class="box"><!--FIRST--><br /> <div class="content"><br /> <div align="center"><img src="images/2.jpg" width="818" height="516"></div><br /> </div><br /> <br /> <li id="section3" class="box"><!--SECEND--><br /> <div class="content"><br /> <div align="center"><img src="images/3.jpg" width="800" height="500"></div><br /> <br /> <li id="section4" class="box"><!--SECEND--><br /> </div><br /> </li><!--END OF FIRST PAGE--><br /> </ul><!-- end mask --><br /> </div><!-- end wrapper --><br /> </body><br /> <br /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><br /> <script type="text/javascript" src="http://www.funtaipei.tw/js/jquery.mousewheel.js"></script><br /> <script type="text/javascript" src="http://www.funtaipei.tw/js/jquery.scrollTo-1.4.2-min.js"></script><br /> <!--<script type="text/javascript" src="http://www.funtaipei.tw/js/main.js"></script>--><br /> <script type="text/javascript" src="http://www.funtaipei.tw/js/respond.min.js"></script><br /> <br /> <script><br /> $(document).ready(function() {<br /> $('#menu a').click(function () {<br /> <br /> $('#wrapper').scrollTo($(this).attr('href'), 1000);<br /> <br /> return false;<br /> }); <br /> });<br /> </script><br /> </html>