购物网站常见的展示商品的div - 快车库

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>welcometomywebsite</title>
        <style type="text/css">
             /*reset*/
            *{
                margin:0;
                padding:0;
            }
            body{
                 background: rgba(235,235,235,1.0);
            }
   div.outer:hover{
        box-shadow: 0px 0px 20px 1px #888888;
   }

    div.outer{
            width: 250px;
            height: 500px;
            padding: 2px 2px;
            margin: 10px;
            border: 1px solid rgba(198,198,198,1.0);
            border-bottom: 2px solid rgba(198,198,198,1.0);
            background: white;
            border-radius: 5px;
            float: left;
    }
    div.inner{
            padding: 10px 20px 10px 20px;
            border: dashed 1px rgba(188,188,188,1.0);
            height: 476px;
    }
    div.middle{
            border: solid 1px rgba(231,231,231,1.0);
    }
</style>
    </head>
    <body >
        <!--<h1>welcome to my website</h1>

        <a href="#">锚链接</a>-->
     <!--<div class="comment">
        <p style="background: white;height: 50px;">一些评论</p>
     </div>-->
     <div class="outer">
        <div class="middle">
         <div class="inner">
            <h1>这里是文章的标题</h1>
            <p>这里是文章的段落</p>
         </div>
        </div>
     </div>
      <div class="outer">
        <div class="middle">
         <div class="inner">
            <h1>这里是文章的标题</h1>
            <p>这里是文章的段落</p>
         </div>
        </div>
     </div>
     <div class="outer">
        <div class="middle">
         <div class="inner">
            <h1>这里是文章的标题</h1>
            <p>这里是文章的段落</p>
         </div>
        </div>
     </div>
     <div class="outer">
        <div class="middle">
         <div class="inner">
            <h1>这里是文章的标题</h1>
            <p>这里是文章的段落</p>
         </div>
        </div>
     </div>
    </body>
</html>