商品详情页练习
程序员文章站
2022-03-01 20:36:33
...
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>商品详情页</title><link rel="stylesheet" href="./css/base.css" /><link rel="stylesheet" href="./css/eduwork.css" /><link rel="stylesheet" href="./css/iconfont.css" /><link rel="stylesheet" href="./css/layout.css" /><link rel="stylesheet" href="./css/footer.css" /><link rel="stylesheet" href="./css/info.css" /><link rel="stylesheet" href="https://at.alicdn.com/t/font_2934967_j3h3059l5o.css"></head><body><!--头部标签开始--><header class=" container d-flex jusify-content-between"><div class=""><img src="./img/logo.png" alt=""></div><div class=" d-flex jusify-content-between align-items-center"><div class="px-3"><a href="" class="fontSize14">登录</a><span>|</span><a href="" class="fontSize14">注册</a></div><div class="pl-2 border-bottom border-black py-1"><form action=""><input type="search" class="border-0" placeholder="热门搜索:细说php" name="" id=""><button class="header-button iconfont border-0 bg-transparent textColorRed120 icon-sousuo"></button></form></div><div class="px-3 header-icon d-flex align-items-center"><i class="iconfont icon-31wode textColorRed120"></i><i class="iconfont icon-erweima textColorRed120"></i><i class="iconfont icon-gouwuchekong textColorRed120"></i></div></div></header><!--头部标签结束--><!-- 导航开始--><nav class="container-full "><ul class="d-flex w-40 m-auto text-center"><li class="py-2 px-4 mx-3"><a href="" class="fontSize14">首页</a></li><li class="py-2 px-4 mx-3"><a href="" class="fontSize14">编程图书</a><section class="w-100 position-absolute left-0"><ul class="d-flex w-40 m-auto"><li class="py-2 px-4 mx-3"><a href="" class="text-white">细说PHP</a></li><li class="py-2 px-4 mx-3"><a href=" " class="text-white">细说PHP</a></li><li class="py-2 px-4 mx-3"><a href="" class="text-white">细说PHP</a></li><li class="py-2 px-4 mx-3"><a href="" class="text-white">细说PHP</a></li></ul></section></li><li class="py-2 px-4 mx-3"><a href="" class="fontSize14">算法图书</a></li><li class="py-2 px-4 mx-3"><a href="" class="fontSize14">AI图书</a></li><li class="py-2 px-4 mx-3"><a href="" class="fontSize14">人工智能 </a></li></ul></nav><!--导航栏滚动图片--><section class="banner container-full overflow-hidden border border-box"><div class="d-flex w-300"><img src="../project/img/001.jpeg" alt="" class="w-100"><img src="../project/img/2.jpeg" class="w-100" alt=""><img src="../project/img/3.jpeg" class="w-100" alt=""></div></section><!--侧边栏--><<aside class="posetion-fixed right-10 d-flex flex-column jusify-content-between"><div class="iconfont border p-3 bg-db cursor textColorRed120 icon-gouwuchekong"></div><div class="iconfont border p-3 bg-db cursor textColorRed120 mt-1 icon-sousuo"></div><div class="iconfont border p-3 bg-db cursor textColorRed120 mt-1 icon-31wode"></div><div class="iconfont border p-3 bg-db cursor textColorRed120 mt-1 icon-erweima"></div></aside><!--三级导航栏--><section class="container-full border-bottom"><section class="container py-1"><span><a href="" class="text-777 hover-a-none">首页</a></span><span class="mx-3">/</span><span><a href="" class="text-777 hover-a-none">编程书籍</a></span><span class="mx-3">/</span><span><a href="" class="text-777 hover-a-none">编程书籍</a></span><span class="mx-3">/</span><span>细说PHP</span></section></section><!--商品图片及信息--><section class="container d-flex jusify-content-between"><section class=" w-40 pl-4"><img src="./img/proDet01_big.jpg" alt=""><div><img src="./img/proDet01.jpg" alt=""><img src="./img/proDet01.jpg" alt=""><img src="./img/proDet01.jpg" alt=""><img src="./img/proDet01.jpg" alt=""></div></section><section class=" w-50 d-flex flex-column"><section class="border-bottom pb-4"><h2 class="fontSize18">[细说] 细说PHP</h2><p class="text-777 my-4">【破损补寄】【适合放室内、卧室、书房、餐桌、办公室、客厅、电视柜等地方】【无理由退换货】【包邮】【白色现代简约花瓶】</p><p class="font-weight-bold pb-2 textColorRed120 fontSize16">￥ 159.00</p></section><section class="border-bottom py-2"><div><p class="my-4">颜色分类</p><div><img src="./img/proDet01.jpg" class="w-10" alt=""><img src="./img/proDet01.jpg" class="w-10" alt=""><img src="./img/proDet01.jpg" class="w-10" alt=""><img src="./img/proDet01.jpg" class="w-10" alt=""></div></div><div class="my-4"><p class="py-2">数量 库存<span class="textColorRed120">2000</span>件</p><div class="d-flex mb-4 align-items-center w-20"><div class="fontSize20 cursor border bg-white px-2">-</div><div><input type="text" size="1" name="" class="border-0 px-2 text-center" value="1"></div><div class="py-1 border cursor bg-white px-2">+</div></div></div></section><section class="d-flex mt-4 pt-4 jusify-content-around"><button class="bg-white border px-4 w-30 py-2 bg-dark text-white fontSize12">立即购买</button><button class="bg-white border px-4 w-30 py-3 fontSize12">加入购物车</button></section></section></section><!--商品详情及为你推荐--><section class="container d-flex jusify-content-between align-content-start"><section class="w-90 border-box"><div class="w-90 d-flex border-box r-tobordep border-bottom"><span class="py-2 border-box border-bottom border-dark px-2">商品详情</span><span class="mx-2 py-2 px-2">所有评价</span></div><div><img src="./img/det01.jpg" alt=""><img src="./img/det01.jpg" alt=""><img src="./img/det01.jpg" alt=""><img src="./img/det01.jpg" alt=""><img src="./img/det01.jpg" alt=""></div></section><section class="w-20 border pb-4 h-10"><div class=" py-2 text-center bg-black-30">为你推荐</div><div class="d-flex mt-2 flex-column jusify-content-between"><img src="./img/see01.jpg" class="w-80 m-auto" alt=""><p class="pl-4 my-2">【细说】细说PHP</p><p class="pl-4 my-2">￥158.00</p></div><div class="d-flex mt-2 flex-column jusify-content-between"><img src="./img/see01.jpg" class="w-80 m-auto" alt=""><p class="pl-4 my-2">【细说】细说PHP</p><p class="pl-4 my-2">￥158.00</p></div></section></section><!--猜你喜欢--><section class="container-full p-4 bg-fbfb"><section class="text-center fontSize16 mb-4">猜你喜欢</section><section class="fontSize d-flex jusify-content-between"><section class="w-10 d-flex fontSize50 opacity3 jusify-content-center align-items-center iconfont icon-xiangzuojiantou"></section><section class="w-80 d-flex jusify-content-around"><section class="card border-0"><a href=""><img src="./img/like04.jpg" alt=""></a><section class="card-body bg-fbfb"><p class="fontSize14">【细说】细说PHP</p><p class="fontSize14 textColorRed120">￥158.00</p></section></section><section class="card border-0"><a href=""><img src="./img/like04.jpg" alt=""></a><section class="card-body bg-fbfb"><p class="fontSize14">【细说】细说PHP</p><p class="fontSize14 textColorRed120">￥158.00</p></section></section><section class="card border-0"><a href=""><img src="./img/like04.jpg" alt=""></a><section class="card-body bg-fbfb"><p class="fontSize14">【细说】细说PHP</p><p class="fontSize14 textColorRed120">￥158.00</p></section></section><section class="card border-0"><a href=""><img src="./img/like04.jpg" alt=""></a><section class="card-body bg-fbfb"><p class="fontSize14">【细说】细说PHP</p><p class="fontSize14 textColorRed120">￥158.00</p></section></section></section><section class="w-10 d-flex fontSize50 opacity3 textColordb jusify-content-center align-items-center iconfont icon-xiangyoujiantou"></section></section></section><!--底部标签--><footer class="container-full border-top mt-4 "><section class="container d-flex my-2 jusify-content-around align-items-center"><div class="border-right py-1 flex-grow1 px-2 pr-4 d-flex jusify-content-center align-items-center"><img src="./img/foot1.png" alt=""><p class="pl-1 ml-2 pr-4">7天无理由退货</p></div><div class="border-right py-1 flex-grow1 px-2 pr-4 d-flex jusify-content-center align-items-center"><img src="./img/foot1.png" alt=""><p class="pl-1 ml-2 pr-4">7天无理由退货</p></div><div class="border-right py-1 flex-grow1 px-2 pr-4 d-flex jusify-content-center align-items-center"><img src="./img/foot1.png" alt=""><p class="pl-1 ml-2 pr-4">7天无理由退货</p></div><div class=" py-1 flex-grow1 px-2 pr-4 d-flex jusify-content-center align-items-center"><img src="./img/foot1.png" alt=""><p class="pl-1 ml-2 pr-4">7天无理由退货</p></div></section><section class="bg-black text-center py-3"><p class="text-white">最家家居©2013-2017公司版权所有 京ICP备080100-44备0000111000号<br/>违法和不良信息举报电话：400-800-8200，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p></section></footer></body></html>