商城列表页和商品详情页
程序员文章站
2022-03-27 09:57:41
...
商城列表页
<!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>
上一篇: python如何生成整数范围内的随机数
下一篇: php7的错误与异常处理