網頁：
<div id="container">//大的IDV
<div id="content">//上面包大圖IDV
<h1><a href="photo_gallery.html">Photo Gallery</a> » <a href="photo_gallery.html">Photo: Beautiful Earth</a> » Picture 01</h1>
<p><a href="pg01.html"><img alt="Photo:Beautiful Earth Picture 01" src="../image/pg01.jpg" width="700" height="438"/></a></p>
</div>
</div>
<div id="next">//下面包導覽圖的IDV
<ul>//套用縮圖的導覽功能
<li><a href="pg01.html"><img src="../image/pg01s.jpg" alt="Picture 01" />« Picture 01</a></li>
<li><a href="pg02.html"><img src="../image/pg02s.jpg" alt="Picture 02" />Picture 02 »</a></li>
</ul>
</div>
</div>
CSS原始碼：
body {
margin:0;
padding:0;
background-color:#fff;
font:62.5%/1.75em "Times New Roman", Times, serif;
color:#4d4d4d;
}
//大的IDV
#container {
width:800px;//設定寬度
margin:auto;//置中對齊
padding:0;
}
//下面導覽圖的IDV
#next {
width:500px;//設定寬度
margin:auto;//置中對齊
padding:0;
}
a:link,a {
border-bottom:1px dotted #960;
text-decoration:none;
color:#960;
}
a:hover {
border-bottom:1px solid #960;
}
h1 {
margin:0 6px;
padding:0 0 .5em 0;
font-style:italic;
font-weight:normal;
font-size:1.25em;
line-height:2.375em;
color:#ccc;
}
h1 a:link, h1 a, h1 a:hover {
border-color:#999;
color:#999;
}
p,ul {
margin:0 6px;
padding:0;
}
img {
display:block;//將影像設定為Block類型物件
//這樣導覽圖那排文字才會往下靠
margin:0 auto 5px auto;
border:1px solid #ccc;
border-bottom-color:#eee;
border-left-color:#ddd;
border-top-color:#bbb;
}
p.photo {
margin:0 0 10px 0;
float:left;
width:75%;
text-align:center;
background-color:#fff;
line-height:1em;
}
p.photo a {
display:block;
float:left;
margin:0;
padding:4px 4px 9px 4px;
border:1px solid #ccc;
border-top-color:#eee;
border-right-color:#bbb;
border-bottom-color:#fff;
background-color:#fff;
text-align:center;
}
p.photo a:hover {
border-color:#ccc;
background-color:#eee;
}
#content {//上面的IDV
margin:0 auto 20px 20px;
padding:1em 0 0 0;
width:800px;
background-color:#fff;
font-size:1.25em;
line-height:1.75em;
}
//設定導覽圖
ul.navigation {
margin:0 0 10px 0;
padding:0;
float:left;
text-align:center;//底下那排文字置中
background-color:#fff;
line-height:1em;
list-style:none;//取消圖示
}
ul.navigation li {
display:inline;//讓 li 能並排
margin:0;
padding:0;
}
p.photo a, ul.thumbnails a {
display:block;
float:left;
margin:0;
padding:4px 4px 9px 4px;
border:1px solid #ccc;
border-top-color:#eee;
border-right-color:#ddd;
border-bottom-color:#bbb;
background-color:#fff;
text-align:center;
}
p.photo a:hover,ul.thumbnails a:hover {
border-color:#ccc;
background-color:#eee;
範例網頁
留言列表
