《web前端技术》课件-第十四章.pptVIP

p排序：/p a class=active href=#上架时间/a a class= href=#好评率/a a class= href=#价格/a a class= href=#销量/a /div !-- 排序方式选择 end -- !-- 商品列表 start -- ul class=goods-list clearfix li div class=list-goods-img-box img src=img/list/1-1.png alt=商品名称 /div h2￥ 308/h2 p class=goods-name休闲T恤+时尚牛仔裤套装/p 2．制作商品列表模块 14.3 制作全部商品页 div class=goods-bot flex flex-be p class=sale-num销量 2000+/p p class=evaluate-num已有span200人/span评价/p /div /li …（省略部分代码，具体内容详见“素材与案例\第14章\wjshop\list.html”） /ul !-- 商品列表 end -- /div !-- 右侧商品列表区 end -- /div /main !-- 中间内容区域 end -- 2．制作商品列表模块 14.3 制作全部商品页 2．制作商品列表模块 全部商品页商品列表模块未设置样式的效果 14.3 制作全部商品页 /* 商品列表页样式 */ .list-main {margin-top: 10px;padding: 30px 0; min-height: 1000px;} .list-main .inner {align-items: flex-start;} /* 左侧产品分类导航栏 start */ .side-nav {width: 160px;background: #997eef; text-align: center;color: #fff;} .side-nav-title {padding: 16px 0; border-bottom: 2px solid rgba(255, 255, 255, .4);} .side-nav-title p {font-size: 12px;line-height: 18px;} .side-nav-title h3 {font-size: 20px;font-weight: bold;} .side-nav-list {padding: 35px 0;} .side-nav-list a {color: #eae4fd;display: block; margin-bottom: 24px;} .side-nav-list a:last-child {margin-bottom: 0;} .side-nav-list a:hover,.side-nav-list a.active {color: #fff; font-size: 16px;font-weight: bold;} 2．制作商品列表模块 14.3 制作全部商品页 2．制作商品列表模块 /* 左侧产品分类导航栏 end */ /* 右侧产品列表内容区 start */ .right-content {width: 980px;} /* 排序方式 start*/ .sort-order {justify-content: flex-start;padding: 16px 0 40px;} .sort-order p {margin-right: 25px;} .sort-order a {margin-right: 20px;font-size: 12px; width: 68px;height: 24px;line-height: 24px; text-align: center;-webkit-border-radius: 4px; -moz-border-radius: 4px;border-radius: 4px; background: #f0f1f8;} .sort-order a:hover,.sort-order a.active { background: #997eef;color: #fff;} /* 排序方式 end*/ /* 商品列表 start */ 14.3 制作全部商品页 2．制作商品列表模块 .goods-list {width: 100%;background: #fff;margin-bottom: