1. 程式人生 > >HTML-網購圖示例

HTML-網購圖示例

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
    <style>
        #images{
            
            width:500px;
            height:150px;
            border:1px solid #000;
            
            overflow:auto;
        }
        #images p{
            width:800px;
            height:100px;
        }

        #images img{
            width:100px;
            border-radius:5px;
            margin-left:5px;
            border:2px solid transparent;
        }

        #images img:hover{
            border-color:#f00;
        }
    </style>
 </head>
 <body>
    /*在本目錄下建立一個資料夾images存放圖片*/
    
  <div id='images'>
        <p>
            <img src="images/p_small_001.jpg">
            <img src="images/p_small_002.jpg">
            <img src="images/p_small_003.jpg">
            <img src="images/p_small_004.jpg">
            <img src="images/p_small_005.jpg">
            <img src="images/p_small_006.jpg">
            <img src="images/p_small_007.jpg">
        </p>
    </div>
 </body>
</html>