商城列表页和商品详情页
程序员文章站
2022-04-17 19:51:40
...
商城列表页
<!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/list.css" /><link rel="stylesheet" href="https://at.alicdn.com/t/font_2934967_enobaibly2.css"></head><body><header class="container d-flex jusify-content-between align-items-center"><div class="header-left"><img src="./img/logo.png" ></div><div class="header-right d-flex jusify-content-between align-items-center"><div class="mt-2"><a href="">登录</a><span>|</span><a href="">注册</a></div><div class="header-search border-bottom border-black ml-2"><form action="" method="post"><input type="text" name="" id="" value="" placeholder="热门搜索：细说PHP" class="border-0" /><button type="button" class="icon-sousuo iconfont border-0 bg-transparent textColorRed120"></button></form></div><div class="header-icon"><a href="" class="hover-a-none"><i class="icon-31wode iconfont textColorRed120"></i></a><a href="" class="hover-a-none"><i class="icon-erweima iconfont textColorRed120"></i></a><a href="" class="hover-a-none"><i class="icon-gouwuchekong iconfont textColorRed120"></i></a></div></div></header><div class="container-full navbox"><ul class="d-flex jusify-content-center align-items-center"><li class="px-3 py-2 mx-4"><a class="nav-item fontSize16" href="">首页</a></li><li class="px-3 py-2 mx-4"><a class="nav-item fontSize16" href="">编程图书</a><div class="navbox-child position-absolute left-0 w-100"><div class="d-flex jusify-content-center align-items-center"><div class="py-2 px-2 mx-4"><a href="" class="text-white">细说PHP</a></div><div class="py-2 px-2 mx-4"><a href="" class="text-white">细说PHP</a></div><div class="py-2 px-2 mx-4"><a href="" class="text-white">细说PHP</a></div></div></div></li><li class="px-3 py-2 mx-4"><a class="nav-item fontSize16" href="">算法图书</a></li><li class="px-3 py-2 mx-4"><a class="nav-item fontSize16" href="">AI图书</a></li><li class="px-3 py-2 mx-4"><a class="nav-item fontSize16" href="">人工智能</a></li></ul></div><!-- banner--><section class="banner container-full overflow-hidden border border-box"><div class="d-flex w-300"><img src="./img/001.jpeg" alt="" class="w-100"><img src="./img/2.jpeg" class="w-100" alt=""><img src="./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-31wode"></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-31wode"></div><div class="iconfont border p-3 bg-db cursor textColorRed120 mt-1 icon-31wode"></div></aside><div class="container-full border-bottom"><div class="container py-1"><a href="">首页</a><span class="ml-2 mr-2">/</span><a href="">编程书籍</a><span class="ml-2 mr-2">/</span><a href="">细说系列</a></div></div><div class="container-full border-bottom"><div class="container d-flex jusify-content-between align-items-center"><div class="fontSize18 font-weight-bold">细说系列</div><div class="order-box d-flex jusify-content-between align-items-center border position-relative"><span>排序方式</span><i class="iconfont icon-xiajiantou"></i><div class="order-list position-absolute border"><div><a href="">新品上市</a></div><div><a href="">新品上市</a></div><div><a href="">新品上市</a></div></div></div></div></div><div class="container d-flex jusify-content-around pt-3 pb-3"><div class="goods-item text-center"><div class=""><a href=""><img src="./img/pro01.jpg"></a></div><div class="py-2 fontSize14"><a href="">细说PHP</a></div><div class="textColorRed120">￥159.00</div></div><div class="goods-item text-center"><div class=""><a href=""><img src="./img/pro01.jpg"></a></div><div class="py-2 fontSize14"><a href="">细说PHP</a></div><div class="textColorRed120">￥159.00</div></div><div class="goods-item text-center"><div class=""><a href=""><img src="./img/pro01.jpg"></a></div><div class="py-2 fontSize14"><a href="">细说PHP</a></div><div class="textColorRed120">￥159.00</div></div><div class="goods-item text-center"><div class=""><a href=""><img src="./img/pro01.jpg"></a></div><div class="py-2 fontSize14"><a href="">细说PHP</a></div><div class="textColorRed120">￥159.00</div></div></div><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>
商城详情页
<!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 align-items-center"><div class="header-left"><img src="./img/logo.png" ></div><div class="header-right d-flex jusify-content-between align-items-center"><div class="mt-2"><a href="">登录</a><span>|</span><a href="">注册</a></div><div class="header-search border-bottom border-black ml-2"><form action="" method="post"><input type="text" name="" id="" value="" placeholder="热门搜索：细说PHP" class="border-0" /><button type="button" class="icon-sousuo iconfont border-0 bg-transparent textColorRed120"></button></form></div><div class="header-icon"><a href="" class="hover-a-none"><i class="icon-31wode iconfont textColorRed120"></i></a><a href="" class="hover-a-none"><i class="icon-erweima iconfont textColorRed120"></i></a><a href="" class="hover-a-none"><i class="icon-gouwuchekong iconfont textColorRed120"></i></a></div></div></header><div class="container-full navbox"><ul class="d-flex jusify-content-center align-items-center"><li class="px-3 py-2 mx-4"><a class="nav-item fontSize16" href="">首页</a></li><li class="px-3 py-2 mx-4"><a class="nav-item fontSize16" href="">编程图书</a><div class="navbox-child position-absolute left-0 w-100"><div class="d-flex jusify-content-center align-items-center"><div class="py-2 px-2 mx-4"><a href="" class="text-white">细说PHP</a></div><div class="py-2 px-2 mx-4"><a href="" class="text-white">细说PHP</a></div><div class="py-2 px-2 mx-4"><a href="" class="text-white">细说PHP</a></div></div></div></li><li class="px-3 py-2 mx-4"><a class="nav-item fontSize16" href="">算法图书</a></li><li class="px-3 py-2 mx-4"><a class="nav-item fontSize16" href="">AI图书</a></li><li class="px-3 py-2 mx-4"><a class="nav-item fontSize16" href="">人工智能</a></li></ul></div><!-- banner--><section class="banner container-full overflow-hidden border border-box"><div class="d-flex w-300"><img src="./img/001.jpeg" alt="" class="w-100"><img src="./img/2.jpeg" class="w-100" alt=""><img src="./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-31wode"></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-31wode"></div><div class="iconfont border p-3 bg-db cursor textColorRed120 mt-1 icon-31wode"></div></aside><div class="container-full border-bottom"><div class="container py-1"><a href="">首页</a><span class="ml-2 mr-2">/</span><a href="">编程书籍</a><span class="ml-2 mr-2">/</span><a href="">细说系列</a></div></div><div class="container d-flex jusify-content-center"><div class="goods-img-box w-40"><div class="text-center"><img src="./img/proDet01_big.jpg" ></div><div class=""><ul class="d-flex"><li><img src="./img/proDet01.jpg" ></li><li><img src="./img/proDet01.jpg" ></li><li><img src="./img/proDet01.jpg" ></li><li><img src="./img/proDet01.jpg" ></li></ul></div></div><div class="goods-info-box w-40"><h1 class="fontSize18">[细说] 细说PHP</h1><div class="text-777 py-3">【破损补寄】【适合放室内、卧室、书房、餐桌、办公室、客厅、电视柜等地方】【无理由退换货】【包邮】【白色现代简约花瓶】</div><div class="textColorRed120 font-weight-bold fontSize16 pb-4">￥ 159.00</div><div class="pt-4 border-top"><p>颜色分类</p><div class="py-4"><img src="./img/proDet01.jpg" class="w-10" ><img src="./img/proDet01.jpg" class="w-10" ><img src="./img/proDet01.jpg" class="w-10" ><img src="./img/proDet01.jpg" class="w-10" ></div></div><div class="mb-4"><p>数量 库存<font class="textColorRed120">2000</font>件</p><div class="d-flex align-items-center py-2"><div class="fontSize20 border px-2">-</div><div class=""><input type="text" name="" id="" value="1" class="border-0 text-center width-50" /></div><div class="fontSize20 border px-2">+</div></div></div><div class="pt-4 border-top"><div class="d-flex jusify-content-around"><button type="button" class="border bg-dark w-30 px-4 py-3 text-white fontSize16">立即购买</button><button type="button" class="border w-30 px-4 py-3 text-black fontSize16">加入购物车</button></div></div></div></div><div class="container d-flex jusify-content-between"><div class="info-left w-70"><div class="info-tab d-flex border-bottom w-100"><div class="px-4 py-2 border-bottom border-dark">商品详情</div><div class="px-4 py-2">所有评价</div></div><div class="py-3"><img src="./img/det01.jpg" alt=""></div></div><div class="info-right w-20"><div class="border"><div class="bg-fbfb text-center py-2">为您推荐</div><div class="p-3"><div class=""><img src="./img/see01.jpg" class="w-80" ></div><div class="pt-3 pb-3">【细说】细说PHP</div><div class="">￥158.00</div></div><div class="p-3"><div class=""><img src="./img/see01.jpg" class="w-80" ></div><div class="pt-3 pb-3">【细说】细说PHP</div><div class="">￥158.00</div></div></div></div></div><div class="container-full bg-fbfb pt-2 pb-2"><div class="container"><div class="text-center fontSize16">猜你喜欢</div><div class="d-flex jusify-content-between"><div class="w-10 d-flex align-items-center iconfont icon-xiangzuojiantou fontSize50 text-777"></div><div class="w-80 d-flex jusify-content-around align-items-center"><div class="p-3"><div class=""><img src="./img/like04.jpg" ></div><div class="pt-3 pb-3">【细说】细说PHP</div><div class="textColorRed120">￥158.00</div></div><div class="p-3"><div class=""><img src="./img/like04.jpg" ></div><div class="pt-3 pb-3">【细说】细说PHP</div><div class="textColorRed120">￥158.00</div></div><div class="p-3"><div class=""><img src="./img/like04.jpg" ></div><div class="pt-3 pb-3">【细说】细说PHP</div><div class="textColorRed120">￥158.00</div></div><div class="p-3"><div class=""><img src="./img/like04.jpg" ></div><div class="pt-3 pb-3">【细说】细说PHP</div><div class="textColorRed120">￥158.00</div></div></div><div class="w-10 d-flex jusify-content-center align-items-center iconfont icon-xiangyoujiantou fontSize50 text-777"></div></div></div></div><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>
上一篇： 3阶（次）贝塞尔曲线的JavaScript(JS)实现
下一篇： 炒股可把人害惨了