html学习笔记二

商品demo一：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>mi.com</title>
    <style type="text/css">
    body{
        background:rgb(245,245,245);
    }
    #main{
         240px;
        height: 300px;
        text-align: center;
        background:white;

        transition: 1s ease;
    }
    #main:hover{
        box-shadow: 0 0 5px 5px #ddd;
        transform:translateY(-10px);
    }
    #main #info{
         65px;
        height: 20px;
        background: rgb(255, 172, 19);
        color:white;
        font-weight: bold;
        text-align: center;
        font-size: 10px;
        line-height: 20px;
        margin:0 auto;
    }
    #main img{
         150px;
        height: 130px;
        margin-bottom: 30px;
    }
    #pro-name,#pro-info,#price{
        font-family: '微软雅黑';
        line-height: 28px;
    }
    #pro-info{
        color:#bbb;
    }
    #price{
        line-height: 40px;
        color:orange;
    }
    </style>
</head>
<body>
    <div id="main">
        <div id="info">免邮费</div>
        <img src="http://i3.mifile.cn/a4/376f5f19-d1f5-4f87-8ef9-38e86891bc87" alt="" />
        <div id="pro-name">小米路由器3</div>
        <div id="pro-info">四天线设计，更快更强</div>
        <div id="price">149元</div>
    </div>
</body>
<ml>