商品展示样例（前端页面）

html部分!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidth, initial-scale1.0 title商品展示样例/title link relstylesheet href../作业本/css部分/作业3.css /head body div classcontainer div classgoods img srcC:\Users\lenovo\Desktop\前端\picture\2 - 副本.png alt物品 div classprice span classprice99/span span classcounts10000人付款/span /div p a href#游戏盒子,河南直邮/a /p div span classshop-namesteam正版游戏盒子/span span classcounts河南 郑州/span /div /div div classgoods img srcC:\Users\lenovo\Desktop\前端\picture\2 - 副本.png alt物品 div classprice span classprice99/span span classcounts10000人付款/span /div p a href#游戏盒子,河南直邮/a /p div span classshop-namesteam正版游戏盒子/span span classcounts河南 郑州/span /div /div div classgoods img srcC:\Users\lenovo\Desktop\前端\picture\2 - 副本.png alt物品 div classprice span classprice99/span span classcounts10000人付款/span /div p a href#游戏盒子,河南直邮/a /p div span classshop-namesteam正版游戏盒子/span span classcounts河南 郑州/span /div /div div classgoods img srcC:\Users\lenovo\Desktop\前端\picture\2 - 副本.png alt物品 div classprice span classprice99/span span classcounts10000人付款/span /div p a href#游戏盒子,河南直邮/a /p div span classshop-namesteam正版游戏盒子/span span classcounts河南 郑州/span /div /div div classgoods img srcC:\Users\lenovo\Desktop\前端\picture\2 - 副本.png alt物品 div classprice span classprice99/span span classcounts10000人付款/span /div p a href#游戏盒子,河南直邮/a /p div span classshop-namesteam正版游戏盒子/span span classcounts河南 郑州/span /div /div div classgoods img srcC:\Users\lenovo\Desktop\前端\picture\2 - 副本.png alt物品 div classprice span classprice99/span span classcounts10000人付款/span /div p a href#游戏盒子,河南直邮/a /p div span classshop-namesteam正版游戏盒子/span span classcounts河南 郑州/span /div /div div classgoods img srcC:\Users\lenovo\Desktop\前端\picture\2 - 副本.png alt物品 div classprice span classprice99/span span classcounts10000人付款/span /div p a href#游戏盒子,河南直邮/a /p div span classshop-namesteam正版游戏盒子/span span classcounts河南 郑州/span /div /div div classgoods img srcC:\Users\lenovo\Desktop\前端\picture\2 - 副本.png alt物品 div classprice span classprice99/span span classcounts10000人付款/span /div p a href#游戏盒子,河南直邮/a /p div span classshop-namesteam正版游戏盒子/span span classcounts河南 郑州/span /div /div /div /body /htmlcss部分.container{ width: 1200px; height: 2000px; /* border: 1px solid; */ } .goods{ width: 250px; height: 375px; border: 1px solid white; float: left; margin: 10px; } img{ width: 250px; height: 250px; } .price{ color: rgb(255, 38, 0); font-size: 20px; font-weight: bold; font-family: ; margin-left: 10px; } .counts{ color: dimgray; font-size: 15px; font-weight: bold; float: right; margin-right: 5px; } a:hover{ color: red; text-decoration: underline; } .shop-name{ color: black; font-size: 15px; font-weight: bold; margin-left: 5px; } .goods:hover{ border: 1px solid red; } p{ margin: 6px; }效果图展示