★<head>與</head>之間★

<style type="text/css">
<!--
.pic { width: 420px;}
.pic p { float: left; padding: 4px; border: 1px solid #ddd; background: #fff; margin: 5px; }
-->
</style>



★<body>之間★

<div class="pic">
<p><img src="01.jpg" border="0" alt="" /></p>
<p><img src="02.jpg" border="0" alt="" /></p>
<p><img src="03.jpg" border="0" alt="" /></p>
<p><img src="04.jpg" border="0" alt="" /></p>
<p><img src="05.jpg" border="0" alt="" /></p>
<p><img src="06.jpg" border="0" alt="" /></p>
<p><img src="07.jpg" border="0" alt="" /></p>
<p><img src="08.jpg" border="0" alt="" /></p>
</div>


  • 第3行 : 圖片區塊寬度,自行調整可改變圖片排列的行數
  • 第4.5行 : 
            float: left; 圖片橫向排列
            padding: 4px; 圖片邊框空白大小
            border: 1px solid #ddd; 圖片框線大小與色彩
            margin: 5px; 圖片之間的距離

    摘自於：    http://www.hsiu28.net/style/article_detail.php?id=21


    • arrow
    arrow
      全站熱搜
      創作者介紹
      創作者 g7g1g3 的頭像
      g7g1g3

      隨身筆記本

      g7g1g3 發表在 痞客邦 留言(0) 人氣()

      E-mail轉寄