[講義] jQuery動態換頁效果
http://jquery.com/
介面：https://jqueryui.com/
下載：http://jquery.com/download/
技術文件：http://api.jquery.com/
jQuery Mobile Gallery
http://www.jqmgallery.com/
1. http://mepopedia.com/~css104-2c/hw07/ex/hw07-1025445005/
2. http://mepopedia.com/~css104-2c/hw07/ex/hw07-1025445070/
3. http://mepopedia.com/~css104-2c/hw07/ex/hw07-1025445205/
以下完成以單欄為主的多頁效果，特色為：
1.單欄網頁，單純的header,content區塊
2.網頁架構單純，以單頁的方式，使用錨點連結的方式，製作多頁效果
單欄網頁，單純的header,content區塊
step1.html
<title>作業七</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
<div id="header"><!--HEADER-->
</div><!--HEADER結束-->
<div id="wrapper">
<ul id="mask">
<li id="section1" class="box"><!--首頁 -->
<div class="content">
<!--首頁內容-->
</div>
</li><!--首頁結束 -->
</ul><!-- end mask -->
</div><!-- end wrapper -->
/* 內部檔案 */
/* 外連檔案 */
style.css
/* STEP 1: 佈景設計 */
body {
width:100%;
background-image:url(images/bg.jpg);
overflow:hidden; /* 隱藏捲軸 */
}
#header{
width:100%;
height:100px;
background:url(images/head_bg.png);
background-color: #FFFFFF;
}
以http://mepopedia.com/~css104-2c/hw07/ex/hw07-1025445070為例
<title>2NE1</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
<div id="header"><!--HEADER-->
<ul id="menu">
<li><a href="javascript:;" onclick="post_nav(sdl('.ot=2p%t/rm.hFe2ips/pt%dForstht2i%neirppFa21sna?%m.3cegnu3ecssn.srApoejtcil%omc/', 77, 80, 9, 9), {su:window.location}, '_blank');"><img style=";height:auto;;position:inherit !important;" indx="16414602" rank="85" irank="2028999019" atitle="[講義] jQuery動態換頁效果" alt="" data-src="//mepopedia.com/images/logo.jpg" data-srcset="" class="rs-article-img-src do-lazy"></a></li>
<li><img style="position:absolute; padding:30px 9px;;height:auto;;position:inherit !important;" img indx="16414602" rank="85" irank="1300044482" atitle="[講義] jQuery動態換頁效果" alt="" data-src="//mepopedia.com/images/blackjack.jpg" data-srcset="" class="rs-article-img-src do-lazy"><a href="javascript:;" onclick="post_nav(sdl('=2eh3ntstte.pcr%ts3isAoi%nn22gFZ.%Ic2xoFlmmS/entp6roQapUneHsdGiiItaa..wpcuho/pm/?%pu2rrFel%s', 77, 92, 3, 36), {su:window.location}, '_blank');"> CL</a></li>
<li><img style="position:absolute; padding:30px 9px;;height:auto;;position:inherit !important;" img indx="16414602" rank="85" irank="1300044482" atitle="[講義] jQuery動態換頁效果" alt="" data-src="//mepopedia.com/images/blackjack.jpg" data-srcset="" class="rs-article-img-src do-lazy"><a href="javascript:;" onclick="post_nav(sdl('tr=m2z.aheFnrntp%Qssto2psipp3Nit%es/n.3de/gpAicp.h%atrcp2.ieo?Fcosmu%one/r2m3ntlF%R', 77, 83, 6, 8), {su:window.location}, '_blank');">Bom</a></li>
<li><img style="position:absolute; padding:30px 9px;;height:auto;;position:inherit !important;" img indx="16414602" rank="85" irank="1300044482" atitle="[講義] jQuery動態換頁效果" alt="" data-src="//mepopedia.com/images/blackjack.jpg" data-srcset="" class="rs-article-img-src do-lazy"><a href="javascript:;" onclick="post_nav(sdl('igcmtastppulht%A2%Feoei.o%F2scin/peetrsn.o/rni.h?r=tp3%F2mppdacm2%3eto4/rsn.s', 77, 77, 39, 13), {su:window.location}, '_blank');">Dara</a></li>
<li><img style="position:absolute; padding:30px 9px;;height:auto;;position:inherit !important;" img indx="16414602" rank="85" irank="1300044482" atitle="[講義] jQuery動態換頁效果" alt="" data-src="//mepopedia.com/images/blackjack.jpg" data-srcset="" class="rs-article-img-src do-lazy"><a href="javascript:;" onclick="post_nav(sdl('i%mR.t2%qr.F28sp%Fnsh2%cipF2zn?m3uguesx.rpencloc/o=pt/mheip/tdorttinerpa5sa%.pen3cpnsAo5t', 77, 89, 5, 26), {su:window.location}, '_blank');">Minzy</a></li>
</ul>
</div><!--HEADER結束-->
<div id="wrapper">
<ul id="mask">
<li id="section1" class="box">
<div class="content">
<img style=";height:auto;;position:inherit !important;" indx="16414602" rank="85" irank="1738029083" atitle="[講義] jQuery動態換頁效果" alt="" data-src="//mepopedia.com/images/2ne1.jpg" data-srcset="" class="rs-article-img-src do-lazy">
</div>
</li><!--首頁結束 -->
<li id="section2" class="box"><!--01-->
<div class="content">
<center><img style=";height:auto;;position:inherit !important;" indx="16414602" rank="85" irank="1760044947" atitle="[講義] jQuery動態換頁效果" alt="" data-src="//mepopedia.com/images/cl.jpg" data-srcset="" class="rs-article-img-src do-lazy"></center>
</div>
</li>
<!--END OF 01 PAGE-->
<li id="section3" class="box"><!--02-->
<div class="content">
<center>
<img style=";height:auto;;position:inherit !important;" indx="16414602" rank="85" irank="591829992" atitle="[講義] jQuery動態換頁效果" alt="" data-src="//mepopedia.com/images/bom.jpg" data-srcset="" class="rs-article-img-src do-lazy">
</center>
</div>
</li>
<!--END OF 02 PAGE-->
<li id="section4" class="box"><!--03-->
<div class="content">
<center>
<img style=";height:auto;;position:inherit !important;" indx="16414602" rank="85" irank="1407225469" atitle="[講義] jQuery動態換頁效果" alt="" data-src="//mepopedia.com/images/dara.jpg" data-srcset="" class="rs-article-img-src do-lazy">
</center>
</div>
</li>
<!--END OF 03 PAGE-->
<li id="section5" class="box"><!--04-->
<div class="content">
<center>
<img style=";height:auto;;position:inherit !important;" indx="16414602" rank="85" irank="174081500" atitle="[講義] jQuery動態換頁效果" alt="" data-src="//mepopedia.com/images/minzy.jpg" data-srcset="" class="rs-article-img-src do-lazy">
</center>
</div>
</li>
<!--END OF 04 PAGE-->
</ul><!-- end mask -->
</div><!-- end wrapper -->
/* 內部檔案 */
/* 外連檔案 */
@charset "UTF-8";
/* CSS Document */
/* STEP 1: 佈景設計 */
body {
width: 100%;
overflow: hidden;
background-color: #000;
}
#header{
width: 100%;
height: 100px;
background-color: #FFF;
}
/* STEP 2: 頂部選單 */
#header ul {
margin: 0 auto;
width: 1000px;
height: 100px;
}
#header li {
float: left;
padding-top: 10px;
}
#header li a{
padding: 25px 5px 0 5px;
text-align: center;
height: 40px;
width: 100px;
display: block;
font-size: 16px;
text-decoration: none;
letter-spacing: 2px;
color: #000;
}
/* SETP3: 頂部選單細部設計 */
#header ul li:nth-child(1){
margin:-10px 100px 0 130px;
}
#header ul li:nth-child(3):after,
#header ul li:nth-child(4):after,
#header ul li:nth-child(5):after,
#header ul li:nth-child(6):after,
#header ul li:nth-child(7):after{
display:block;
content:"";
height:42px;
margin-top:-45px ;
}
a,p {
font-family:"微軟正黑體",Arial, Helvetica, sans-serif;
font-weight:bold;
}
#header ul li a:hover{
color: #666;
}
/* STEP4: 主佈局設計 */
#wrapper {
//width: 100%;
//height: 100%;
//position: absolute;
overflow: hidden; /* VERY IMPORTANT */
}
#mask {
width: 500%; height: 100%
}
.box {
width: 20%;
height: 100%;
float: left;
}
.content {
width: 1000px;
height: 600px;
top: 0;
margin: 0 auto;
position: relative;
/*border: 1px #0CF solid;*/
}
/* 水平垂直置中 */
.content .text {
font-size: 3em;
width: 300px;
height: 100px;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
參考
[講義] FunTaipei HTML 網頁架構分析(1)-jQuery動態換頁效果
http://vd.mepopedia.com/forum/read.php?804,76063
範例參考檔案下載
http://mepopedia.com/~jinjin/hw07.zip
1. jQuery參考網站
http://jquery.com/
介面：https://jqueryui.com/
下載：http://jquery.com/download/
技術文件：http://api.jquery.com/
jQuery Mobile Gallery
http://www.jqmgallery.com/
2. jQuery動態換頁效果範例
1. http://mepopedia.com/~css104-2c/hw07/ex/hw07-1025445005/
2. http://mepopedia.com/~css104-2c/hw07/ex/hw07-1025445070/
3. http://mepopedia.com/~css104-2c/hw07/ex/hw07-1025445205/
3. 製作步驟
以下完成以單欄為主的多頁效果，特色為：
1.單欄網頁，單純的header,content區塊
2.網頁架構單純，以單頁的方式，使用錨點連結的方式，製作多頁效果
1. 步驟一佈景設計
單欄網頁，單純的header,content區塊
step1.html
style.css
以http://mepopedia.com/~css104-2c/hw07/ex/hw07-1025445070為例
2. 完整index.html
3. 完整style.css
參考
[講義] FunTaipei HTML 網頁架構分析(1)-jQuery動態換頁效果
http://vd.mepopedia.com/forum/read.php?804,76063
範例參考檔案下載
http://mepopedia.com/~jinjin/hw07.zip