這是使用 CSS + DIV 標籤製作的裝飾外框
 
image
 
以下是 CSS 完整的語法標籤
<html>
<head>
<title>Simple Gallery</title>
<style type="text/css">
.photo {
margin: 30px;
position: relative;       /* 指定 div 元素的位置是相對值 */
width: 180px;
height: 130px;
float: left;
}

.photo img {
background: #fff;
border: solid 1px #ccc;
padding: 4px;
}

.photo a {
text-decoration: none;
}

.sample5 span {
width: 216px;
height: 166px;
display: block;
position: absolute;       /* 指定 span 元素的位置是絕對值 */
top: -17px;
left: -18px;
background: url(images/gold-frame.png) no-repeat;
}
</style>
</head>
<body>

<div class="photo sample5">
<a href="#"><span></span><img src="images/11.jpg" alt="image" width="170" height="120"></a>
</div>

 </body>
</html>
為了證明這套做法是多麼的靈活多便，作者特別製作 15 種不同風格的範例給你實際瞭解 Go 。

本報導內容或資料，因限人力、時間，非教學會員，不接受任何使用上的教學與 指導，敬請見諒。
如果你喜歡這篇辛苦蒐集整理出來的報導資料，歡迎原文轉載及註明出處，請勿直接盜用，謝謝你的合作。
如果你願意於貴站或部落格中介紹本站，歡迎使用複製網頁研習室連結語法，再次感謝你的支持與愛護。
版權所有 - 網頁研習室 - 李文能于 100 年 11 月 30 日整理