<!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"> <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>细说系列</span> </section> </section><!--搜索--> <section class="container-full border-bottom"> <section class="container d-flex jusify-content-between align-items-center"> <h2 class="fontSize18">细说系列</h2> <div class=" bg-white order-list w-15 "> <div class="d-flex border jusify-content-between align-items-center"> <span>排序方式</span> <i class="iconfont icon-xiajiantou"></i> </div> <div class="border ">新品上市</div> <div class="border border-top-0 ">销量从高到低</div> <div class="border border-top-0 ">销量从低到高</div> <div class="border border-top-0 ">价格从高到低</div> <div class="border border-top-0 ">价格从低到高</div> </div> </section> </section><!--商品列表--> <section class="container my-4 d-flex jusify-content-between"> <section class="card border-0"> <img src="./img/pro01.jpg" class="border-radius-5" alt=""> <div class="card-body"> <a href="" class="d-block hover-a-none">【细说】细说PHP</a> <a href="" class="hover-a-none textColorRed120 fontSize14">￥159.00</a> </div> </section> <section class="card border-0"> <img src="./img/pro01.jpg" class="border-radius-5" alt=""> <div class="card-body"> <a href="" class="d-block hover-a-none">【细说】细说PHP</a> <a href="" class="hover-a-none textColorRed120 fontSize14">￥159.00</a> </div> </section> <section class="card border-0 "> <img src="./img/pro01.jpg" class="border-radius-5" alt=""> <div class="card-body"> <a href="" class="d-block hover-a-none">【细说】细说PHP</a> <a href="" class="hover-a-none textColorRed120 fontSize14">￥159.00</a> </div> </section> <section class="card border-0 posetion-relative"> <img src="./img/pro01.jpg" class="border-radius-5" alt="" > <div class="card-body"> <a href="" class="d-block hover-a-none">【细说】细说PHP</a> <a href="" class="hover-a-none textColorRed120 fontSize14">￥159.00</a> </div> </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>
