实现如下图的HTML+CSS的静态网页 给了一个JS的设计稿，可以查看各个元素的间距、颜色、样式代码等
仿写一个静态的网页
以上的代码，我会打包放在本文的链接中，需要学习交流的小伙伴们可以下载。 实践代码：20201021HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>周黑鸭网站</title> <style> body { background: #f2f2f2; } .box { width: 90%; height: 90%; margin: 0 auto; } .nav { margin-left: 87px; } .tit { color: #ff5500; font-family: Noto Sans SC; font-weight: regular; font-size: 22px; line-height: normal; letter-spacing: 0px; text-align: left; } .img-vector { float: left; } .tit { position: relative; top: -4px; vertical-align: bottom; left: 20px; } .categor { margin-left: 16px; } .content { height: 400px; width: 260px; margin: 4px 50px 0px 0px; display: flex; border-radius: 32px; background: #ffffff; border: 1px solid #ebebeb; } .content-box { border-radius: 10px; } .image-pic { position: relative; top: 2px; left: 2px; margin: 21px 21px 144px 21px; height: 178px; width: 218px; } .desc { color: #666666; font-family: Noto Sans SC; font-weight: regular; font-size: 12px; line-height: normal; letter-spacing: 0px; text-align: left; } .discount { width: 91px; height: 26px; margin-top: 10px; background: #ffffff; border: 1px solid #ff8000; color: #ff8000; line-height: 26px; text-align: center; } .bottom { margin-left: 22px; margin-right: 22px; position: relative; top: -120px; } .container { display: flex; justify-content: center; } .miaosha { color: #ff2200; font-family: Noto Sans SC; font-weight: regular; font-size: 12px; line-height: normal; letter-spacing: 0px; text-align: left; width: 50px; } .fz { font-size: 28px; color: #ff5000; } .fc { color: #999999; font-family: Noto Sans SC; font-weight: regular; font-size: 12px; line-height: normal; letter-spacing: 0px; text-align: left; text-decoration: line-through; } .hot-count { color: #ff2200; font-family: Noto Sans SC; font-weight: regular; font-size: 14px; line-height: normal; letter-spacing: 0px; text-align: left; } .hot-pic { width: 11px; height: 15px; vertical-align: middle; } .hot { margin-top: 8px; } </style> </head> <body> <div class="box"> <div class="nav"> <div class="title"> <img src="../热卖/data/exports/Vector-1@1x.png" class="img-vector" alt="" /> <div class="tit">热卖单品</div> </div> <div class="category"> <img src="../热卖/data/exports/牙膏@1x.png" alt="" /> <img class="categor" src="../热卖/data/exports/口红@1x.png" alt="" /> <img class="categor" src="../热卖/data/exports/帆布鞋@1x.png" alt="" /> <img class="categor" src="../热卖/data/exports/沐浴露@1x.png" alt="" /> <img class="categor" src="../热卖/data/exports/拖鞋@1x.png" alt="" /> </div> <!-- <hr style="border: 1px solid #EBEBEB" /> --> <img src="../热卖/data/exports/Line-1@1x.png" alt="" /> </div> <div class="container"> <div class="content"> <div class="content-box"> <img class="image-pic" src="../热卖/static/imgs/O1CN01T3vKKu1Hgwj0UoVPV_!!2206976340788-0-scmitem6000.jpg_430x430q90.jpg" alt="" /> <div class="bottom"> <div class="desc"> 燕麦巧克力酥好吃的零食糖果牛奶燕麦片儿童网红休闲食品小吃农场... </div> <div class="discount">满200减50</div> <span class="miaoshabox"> <span class="miaosha">秒杀价￥</span> <span class="miaosha fz">268</span> <span class="fc">￥588</span> </span> <div class="hot"> <img class="hot-pic" src="../热卖/static/imgs/hot.png" alt="" /> <span class="hot-count">卖爆15.6万件</span> </div> </div> </div> </div> <div class="content"> <div class="content-box"> <img class="image-pic" src="../热卖/static/imgs/O1CN01T3vKKu1Hgwj0UoVPV_!!2206976340788-0-scmitem6000.jpg_430x430q90.jpg" alt="" /> <div class="bottom"> <div class="desc"> 燕麦巧克力酥好吃的零食糖果牛奶燕麦片儿童网红休闲食品小吃农场... </div> <div class="discount">满200减50</div> <span class="miaoshabox"> <span class="miaosha">秒杀价￥</span> <span class="miaosha fz">268</span> <span class="fc">￥588</span> </span> <div class="hot"> <img class="hot-pic" src="../热卖/static/imgs/hot.png" alt="" /> <span class="hot-count">卖爆15.6万件</span> </div> </div> </div> </div> <div class="content"> <div class="content-box"> <img class="image-pic" src="../热卖/static/imgs/O1CN01T3vKKu1Hgwj0UoVPV_!!2206976340788-0-scmitem6000.jpg_430x430q90.jpg" alt="" /> <div class="bottom"> <div class="desc"> 燕麦巧克力酥好吃的零食糖果牛奶燕麦片儿童网红休闲食品小吃农场... </div> <div class="discount">满200减50</div> <span class="miaoshabox"> <span class="miaosha">秒杀价￥</span> <span class="miaosha fz">268</span> <span class="fc">￥588</span> </span> <div class="hot"> <img class="hot-pic" src="../热卖/static/imgs/hot.png" alt="" /> <span class="hot-count">卖爆15.6万件</span> </div> </div> </div> </div> <div class="content"> <div class="content-box"> <img class="image-pic" src="../热卖/static/imgs/O1CN01T3vKKu1Hgwj0UoVPV_!!2206976340788-0-scmitem6000.jpg_430x430q90.jpg" alt="" /> <div class="bottom"> <div class="desc"> 燕麦巧克力酥好吃的零食糖果牛奶燕麦片儿童网红休闲食品小吃农场... </div> <div class="discount">满200减50</div> <span class="miaoshabox"> <span class="miaosha">秒杀价￥</span> <span class="miaosha fz">268</span> <span class="fc">￥588</span> </span> <div class="hot"> <img class="hot-pic" src="../热卖/static/imgs/hot.png" alt="" /> <span class="hot-count">卖爆15.6万件</span> </div> </div> </div> </div> </div> </div> </body> </html>上面的代码主要使用了图文混排的display布局方式，图文混排是网页中常用的排版方式，本人资质尚浅，代码有误之处，还望指出，鄙人感激不尽！
