html代码
<!doctype html><html><head><meta charset="utf-8"><title>黄菊华：H5+CSS3商城界面实战</title><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"><link rel="stylesheet" href="css/chanpin_fenlei.css"><link rel="stylesheet" href="css/dibu_caidan.css"></head><body><!--商品分类--><div class="fenlei"> <!--商品分类-左侧--><div class="fenlei_zuo"><div class="fenlei_zuo_xiangmu">分类01</div><div class="fenlei_zuo_xiangmu">分类02</div><div class="fenlei_zuo_xiangmu fenlei_zuo_xuanzhong">分类03</div><div class="fenlei_zuo_xiangmu">分类04</div><div class="fenlei_zuo_xiangmu">分类05</div><div class="fenlei_zuo_xiangmu">分类06</div><div class="fenlei_zuo_xiangmu">分类07</div><div class="fenlei_zuo_xiangmu">分类08</div><div class="fenlei_zuo_xiangmu">分类09</div></div><!--商品分类-右侧--><div class="fenlei_you"><div class="cp2_zuixin"> <a href="#" class="cp2_lianjie"> <img src="tupian/cp05.jpg" class="cp2_img" /><p class="cp2_mc">装冬装仿水貂绒外套40岁</p><p class="cp_mc2">¥96.00</p></a> <a href="#" class="cp2_lianjie"> <img src="tupian/cp06.jpg" class="cp2_img" /><p class="cp2_mc">水貂绒外套40岁50中老年女洋气婆婆毛呢上衣短款</p><p class="cp_mc2">¥56.00</p></a> <a href="#" class="cp2_lianjie"> <img src="tupian/cp07.jpg" class="cp2_img" /><p class="cp2_mc">妈装冬装仿水貂绒外套40岁</p><p class="cp_mc2">¥26.00</p></a> <a href="#" class="cp2_lianjie"> <img src="tupian/cp08.jpg" class="cp2_img" /><p class="cp2_mc">仿水貂绒外套40岁50中老年女洋气婆婆毛呢上衣短款</p><p class="cp_mc2">¥66.00</p></a> <a href="#" class="cp2_lianjie"> <img src="tupian/cp09.jpg" class="cp2_img" /><p class="cp2_mc">装冬装仿水貂绒外套40岁</p><p class="cp_mc2">¥16.00</p></a> <a href="#" class="cp2_lianjie"> <img src="tupian/cp10.jpg" class="cp2_img" /><p class="cp2_mc">0中老年女洋气婆婆毛呢上衣短款</p><p class="cp_mc2">¥96.00</p></a> <a href="#" class="cp2_lianjie"> <img src="tupian/cp05.jpg" class="cp2_img" /><p class="cp2_mc">装冬装仿水貂绒外套40岁</p><p class="cp_mc2">¥96.00</p></a> <a href="#" class="cp2_lianjie"> <img src="tupian/cp06.jpg" class="cp2_img" /><p class="cp2_mc">水貂绒外套40岁50中老年女洋气婆婆毛呢上衣短款</p><p class="cp_mc2">¥56.00</p></a> <a href="#" class="cp2_lianjie"> <img src="tupian/cp07.jpg" class="cp2_img" /><p class="cp2_mc">妈装冬装仿水貂绒外套40岁</p><p class="cp_mc2">¥26.00</p></a> <a href="#" class="cp2_lianjie"> <img src="tupian/cp08.jpg" class="cp2_img" /><p class="cp2_mc">仿水貂绒外套40岁50中老年女洋气婆婆毛呢上衣短款</p><p class="cp_mc2">¥66.00</p></a> <a href="#" class="cp2_lianjie"> <img src="tupian/cp09.jpg" class="cp2_img" /><p class="cp2_mc">装冬装仿水貂绒外套40岁</p><p class="cp_mc2">¥16.00</p></a> <a href="#" class="cp2_lianjie"> <img src="tupian/cp10.jpg" class="cp2_img" /><p class="cp2_mc">0中老年女洋气婆婆毛呢上衣短款</p><p class="cp_mc2">¥96.00</p></a> <a href="#" class="cp2_lianjie"> <img src="tupian/cp09.jpg" class="cp2_img" /><p class="cp2_mc">装冬装仿水貂绒外套40岁</p><p class="cp_mc2">¥16.00</p></a> <a href="#" class="cp2_lianjie"> <img src="tupian/cp10.jpg" class="cp2_img" /><p class="cp2_mc">0中老年女洋气婆婆毛呢上衣短款</p><p class="cp_mc2">¥96.00</p></a> </div></div></div><!--底部导航菜单--><div class="dibu_caidan"> <a href="#" class="dibu_caidan_xiangmu"><p class="dibu_caidan_xiangmu_tupian"><img src="img/a-off.png" class="dibu_caidan_xiangmu_tupian_img"></img></p><p class="dibu_caidan_xiangmu_biaoti ">首页</p></a> <a href="#" class="dibu_caidan_xiangmu"><p class="dibu_caidan_xiangmu_tupian"><img src="img/b-on.png" class="dibu_caidan_xiangmu_tupian_img"></img></p><p class="dibu_caidan_xiangmu_biaoti dibu_caidan_xiangmu_biaoti_xuanzhong">分类</p></a> <a href="#" class="dibu_caidan_xiangmu"><p class="dibu_caidan_xiangmu_tupian"><img src="img/c-off.png" class="dibu_caidan_xiangmu_tupian_img"></img></p><p class="dibu_caidan_xiangmu_biaoti">购物车</p><p class="gouwucheshu">5</p></a> <a href="#" class="dibu_caidan_xiangmu"><p class="dibu_caidan_xiangmu_tupian"><img src="img/d-off.png" class="dibu_caidan_xiangmu_tupian_img"></img></p><p class="dibu_caidan_xiangmu_biaoti">会员</p></a> </div></body></html>
防采集标记,黄菊华老师作品，盗版必究
css代码
@charset "utf-8";* {padding: 0;margin: 0;}html, body {height: 100%;}/* 商品分类 */.fenlei {width: 100%;height: 100%;display: flex;}/* 商品分类-左侧 */.fenlei_zuo {width: 25%;height: 100%;background-color: #f6f6f6;}.fenlei_zuo_xiangmu{padding: 5px;}.fenlei_zuo_xuanzhong{background-color: white;border-left: 5px orangered solid;}/* 商品分类-右侧 */.fenlei_you {width: 75%;overflow: scroll;}.cp2_zuixin{display: flex;flex-wrap: wrap;padding-top: 10px;}.cp2_lianjie{width: 33%;padding: 3px;box-sizing: border-box;text-decoration: none;color: gray;}.cp2_img{width: 100%;border: 1px solid #C7C7C7;border-radius: 5px;}.cp2_mc{overflow: hidden;white-space: nowrap;text-overflow: ellipsis;font-size: 14px;}
