html部分：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>首页</title> <link rel="stylesheet" href="./css/index.css"> </head> <body> <div class="box"></div> <script src="./js/index.js"></script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>商品详情</title> </head> <link rel="stylesheet" href="./css/home.css"> <body> <div class="box"> <div><strong>积分：20</strong> <strong>人气：99</strong> </div> </div> --> </div> <script src="./js/home.js"></script> </body> </html>
css部分：
* { margin: 0; padding: 0; } .box { width: 50%; margin-left: 1%; display: flex; flex-wrap: wrap; margin: 0 auto; } .item { width: 44%; margin: 1% 10px; } .item img { width: 100%; height: 300px; } .item p { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; line-height: 36px; } .item div { width: 100%; display: flex; justify-content: space-between; }
* { margin: 0; padding: 0; } .box { width: 50%; margin-left: 1%; display: flex; flex-wrap: wrap; margin: 0 auto; } .head { width: 100%; display: flex; align-items: center; } .head img { width: 20px; height: 20px; } h1 { margin: 0 auto; } .item { width: 44%; margin-top: 5%; margin-left: 30%; } .item img { width: 100%; height: 300px; } .item p { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; line-height: 36px; } .item div { width: 100%; display: flex; justify-content: space-between; }
JavaScript部分：
