您當前位置：首頁 > web前端 > htmlcss > 蘋果瀏覽器（safari）應用實戰（五）

蘋果瀏覽器（safari）應用實戰（五）

來源：程序員人生發布時間：2014-12-15 09:00:10 閱讀次數：3332次

自己動手打造windows版的ibook

前幾篇我們很少觸及網頁中“錨”標簽，現在該<a>標簽登場了。輸入以下代碼并保存為html文件（如：bookrack.html）：

<html>
<head>
<title></title>
<meta charset="gb2312" />
<style type="text/css">
.page {position:absolute;width:100px;height:130px;border:1px solid #ccc;display:block;}
div:hover{background:#fdc;cursor:pointer;}
p,h2{text-align:center;}
h2{color:brown;}
a {text-decoration: none;font-size:12px;color:black;}
</style>
<script type="text/javascript">
var novelstr="<p>文本格式小說系列</p>";
var titles=novelstr+"<p><h2>Deception Point</h2></p><p>By Dan Brown</p>,"+
novelstr+"<p><h2>Last Coyot</h2></p><p>By Connelly</p>,"+
novelstr+"<p><h2>Angel Flight</h2></p><p>By Connelly</p>,"+
novelstr+"<p><h2>Chaseing Dime</h2></p><p>By connelly</p>,"+
novelstr+"<p><h2>Lincoln Lawyer</h2></p><p>By connelly</p>,"+
novelstr+"<p><h2>Swan Thief</h2></p><p>By Elizabeth Kostova</p>,"+
novelstr+"<p><h2>The Grapes Wrath</h2></p><p>By John Steinbeck</p>,"+
novelstr+"<p><h2>phantoms dean</h2></p><p>By kooz</p>,"+
novelstr+"<p><h2>簡愛 </p><p>（中文版）</h2></p>,"+
novelstr+"<p><h2>蝴蝶夢（中文版）</h2></p>,"+
novelstr+"<p><h2>Davinci Code</h2></p><p>By Dan Brown</p>,"+
novelstr+"<p><h2>History Time</h2></p><p>By Hawkings</p>,"+
novelstr+"<p><h2>Elegant Universe</h2></p><p>By Hawkings</p>,"+
novelstr+"<p><h2>Short Stories</h2></p><p>By Maugham</p>,"+
novelstr+"<p><h2>狂妄與偏見（中文版）</h2></p><p>簡.奧斯丁著</p>,"+
novelstr+"<p><h2>Pride and Pre...</h2></p><p>By Jane Austine</p>,"+
novelstr+"<p><h2>燈塔看守人</h2></p><p>顯克微支（波蘭）</p>,"+
novelstr+"<p><h2>射擊<br />（決斗）</h2></p><p>普希金（俄羅斯）</P>,"+
novelstr+"<p><h2>The Whistle</h2></p><p>By Eudora Welty</P>,"+
novelstr+"<p><h2>Farewell to Arms</h2></p><p>By Hayminway</P>,"+
novelstr+"<p><h2>永別了武器</h2></p><p>海明威著</P>,"+
novelstr+"<p><h2>Wise Guy</h2></p><p>By Nicola Pilleggi</P>,"+
novelstr+"<p><h2>Act of Treason</h2></p><p>By Vince Flynn</P>,"+
novelstr+"<p><h2>Consent to Kill</h2></p><p>By Vince Flynn</P>,"+
novelstr+"<p><h2>Extreme Measure</h2></p><p>By Vince Flynn</P>,"+
novelstr+"<p><h2>Churchill</h2></p><p>By Paul Johnson</P>,"+
novelstr+"<p><h2>Small Island</h2></p><p>By Bill Byson</P>,"+
novelstr+"<p><h2>Brave New World</h2></p><p>Aldous Huxley</P>,"+
novelstr+"<p><h2>英語口語1000句</h2></p><p>同名pdf改編</P>,"+
novelstr+"<p><h2>JAVA7</h2></p><p>同名pdf改編</P>,"+
novelstr+"<p><h2>國際海上<br />避碰規則<br />（英文）</h2></p><p></P>";

function getImgText(){
titles=titles.split(",");
var pages=document.getElementsByClassName("page"),j=0;
var k=parseInt(document.body.clientWidth/100),l=0;
for(var i=0;i<pages.length;i++){
if(i<k){
pages[i].style.top=0;
pages[i].style.left=(i*100);
}
else{
if(i>=k*(j+1))j++;
pages[i].style.top=j*135;
pages[i].style.left=(i-k*j)*100;
}
pages[i].innerHTML=titles[i];

}
}

</script>
</head>
<body onload="getImgText()">
<a href="novels/deceptpoint.html"><div class="page"></div></a>
<a href="novels/lastcoyot.html"><div class="page"></div></a>
<a href="novels/angelflight.html"><div class="page"></div></a>
<a href="novels/chasingdime.html"><div class="page"></div></a>
<a href="novels/linconlawer.html"><div class="page"></div></a>
<a href="novels/swanthief.html"><div class="page"></div></a>
<a href="novels/grapewrath.html"><div class="page"></div></a>
<a href="novels/phantoms.html"><div class="page"></div></a>
<a href="novels/janaic.html"><div class="page"></div></a>
<a href="novels/rebeeca.html"><div class="page"></div></a>
<a href="novels/davincicode.html"><div class="page"></div></a>
<a href="novels/historytime.html"><div class="page"></div></a>
<a href="novels/universe.html"><div class="page"></div></a>
<a href="novels/maughamstory.html"><div class="page"></div></a>
<a href="novels/pridec.html"><div class="page"></div></a>
<a href="novels/prideand.html"><div class="page"></div></a>
<a href="novels/lighthouse.html"><div class="page"></div></a>
<a href="novels/shoot.html"><div class="page"></div></a>
<a href="novels/coldwhisle.html"><div class="page"></div></a>
<a href="novels/farewellarms.html"><div class="page"></div></a>
<a href="novels/farewellarmsc.html"><div class="page"></div></a>
<a href="novels/wiseguy.html"><div class="page"></div></a>
<a href="novels/treason.html"><div class="page"></div></a>
<a href="novels/consent2kill.html"><div class="page"></div></a>
<a href="novels/extrememeasure.html"><div class="page"></div></a>
<a href="novels/churchill.html"><div class="page"></div></a>
<a href="novels/smallisland.html"><div class="page"></div></a>
<a href="novels/newworld.html"><div class="page"></div></a>
<a href="novels/intregulation.html"><div class="page"></div></a>
</body>
</html>