HTML5
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link href="css/taobao2.css" rel="stylesheet" /> </head> <body> <div class="container"> <div class="title"> <span>猜你喜欢</span> <img src="img/adv_title2.png"/> </div> <ul class="goods"> <li> <a href="#"> <img src="img/g1.jpg_200x200q90.jpg_.webp"/> <span class="gname">卡西欧手表男CASIO MRW-200HC-7B2 学生运动韩版简约防水指针表</span> <div> <span class="rmb">￥</span> <span class="gprice">125</span> <span class="gsales">268人购买</span> </div> </a> </li> <li> <a href="#"> <img src="img/g1.jpg_200x200q90.jpg_.webp"/> <span class="gname">卡西欧手表男CASIO MRW-200HC-7B2 学生运动韩版简约防水指针表</span> <div> <span class="rmb">￥</span> <span class="gprice">125</span> <span class="gsales">268人购买</span> </div> </a> </li> <li> <a href="#"> <img src="img/g1.jpg_200x200q90.jpg_.webp"/> <span class="gname">卡西欧手表男CASIO MRW-200HC-7B2 学生运动韩版简约防水指针表</span> <div> <span class="rmb">￥</span> <span class="gprice">125</span> <span class="gsales">268人购买</span> </div> </a> </li> <li> <a href="#"> <img src="img/g1.jpg_200x200q90.jpg_.webp"/> <span class="gname">卡西欧手表男CASIO MRW-200HC-7B2 学生运动韩版简约防水指针表</span> <div> <span class="rmb">￥</span> <span class="gprice">125</span> <span class="gsales">268人购买</span> </div> </a> </li> <li> <a href="#"> <img src="img/g1.jpg_200x200q90.jpg_.webp"/> <span class="gname">卡西欧手表男CASIO MRW-200HC-7B2 学生运动韩版简约防水指针表</span> <div> <span class="rmb">￥</span> <span class="gprice">125</span> <span class="gsales">268人购买</span> </div> </a> </li> <li> <a href="#"> <img src="img/g1.jpg_200x200q90.jpg_.webp"/> <span class="gname">卡西欧手表男CASIO MRW-200HC-7B2 学生运动韩版简约防水指针表</span> <div> <span class="rmb">￥</span> <span class="gprice">125</span> <span class="gsales">268人购买</span> </div> </a> </li> <li> <a href="#"> <img src="img/g1.jpg_200x200q90.jpg_.webp"/> <span class="gname">卡西欧手表男CASIO MRW-200HC-7B2 学生运动韩版简约防水指针表</span> <div> <span class="rmb">￥</span> <span class="gprice">125</span> <span class="gsales">268人购买</span> </div> </a> </li> <li> <a href="#"> <img src="img/g1.jpg_200x200q90.jpg_.webp"/> <span class="gname">卡西欧手表男CASIO MRW-200HC-7B2 学生运动韩版简约防水指针表</span> <div> <span class="rmb">￥</span> <span class="gprice">125</span> <span class="gsales">268人购买</span> </div> </a> </li> <li> <a href="#"> <img src="img/g1.jpg_200x200q90.jpg_.webp"/> <span class="gname">卡西欧手表男CASIO MRW-200HC-7B2 学生运动韩版简约防水指针表</span> <div> <span class="rmb">￥</span> <span class="gprice">125</span> <span class="gsales">268人购买</span> </div> </a> </li> <li> <a href="#"> <img src="img/g1.jpg_200x200q90.jpg_.webp"/> <span class="gname">卡西欧手表男CASIO MRW-200HC-7B2 学生运动韩版简约防水指针表</span> <div> <span class="rmb">￥</span> <span class="gprice">125</span> <span class="gsales">268人购买</span> </div> </a> </li> </ul> </div> </body> </html>
CSS
* { padding: 0px; margin: 0px; } ul { list-style: none; } a { text-decoration: none; color: #000; } body { background-color: #E8E2E0; } .container { width: 1190px; background-color: #fff; margin: 0px auto; } .title { width: 1190px; height: 64px; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; margin-left: 20px; } .title span { font-size: 24px; margin-right: 10px; } .container .goods { width: 1190px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around; } .container .goods li { width: 215px; height: 345px; display: flex; flex-direction: row; flex-wrap: nowrap; } .container .goods li a { width: 215px; height: 345px; display: flex; flex-direction: column; align-items: center; justify-content: center; } .container .goods li a img { width: 215px; height: 215px; } .container .goods li a .gname { line-height: 22px; width: 215px; height: 44px; font-weight: 400; overflow: hidden; margin-top: 9px; } .container .goods li a div { width: 215px; height: 26px; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: flex-end; margin-top: 7px; } .container .goods li a .rmb { display: inline-block; zoom: 1; *display: inline; letter-spacing: normal; word-spacing: normal; vertical-align: top; margin-right: 2px; font-size: 12px; vertical-align: inherit; color: #ff6700; } .gprice { color: #ff4400; margin-right: 5px; font-size: 20px; } .gsales { color: #999999; }