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/shouye.css"><link rel="stylesheet" href="css/dibu_caidan.css"></head><body><!--查询功能--><div class="chaxun"><input class="chaxun_neirong" type="text" placeholder=" 请输入要查询的内容" /><button class="chaxun_anniu">查询</button></div><!--轮播图片--><div class="lunbo"><img class="lunbo_img" src="img/ad01.jpg" /></div><!--导航快捷菜单--><div class="caidan"><a href="#" class="caidan_lianjie"><img src="img/menu01.png" class="caidan_img" /><p>品牌大全</p></a><a href="#" class="caidan_lianjie"><img src="img/menu02.png" class="caidan_img" /><p>最新上架</p></a><a href="#" class="caidan_lianjie"><img src="img/menu03.png" class="caidan_img" /><p>帮助中心</p></a><a href="#" class="caidan_lianjie"><img src="img/menu04.png" class="caidan_img" /><p>品牌大全</p></a></div><!--最新通知--><div class="tongzhi"><a href="#" class="tongzhi_lianjie"><img class="tongzhi_zuo" src="img/news.png" /><p class="tongzhi_neirong">51放假通知！</p><img class="tongzhi_you" src="img/right.png" /></a></div><!--区块标题--><div class="qukuai"><p class="qukuai_zuo"></p><p class="qukuai_zhong">最新上架</p><a href="#" class="qukuai_you"> 更多> </a></div><!--最新上架产品--><div class="cp_zuixin"><a href="#" class="cp_lianjie"><img src="tupian/cp01.jpg" class="cp_img" /><p class="cp_mc">中年妈妈装冬装仿水貂绒外套40岁</p><p class="cp_mc2">¥156.00</p></a><a href="#" class="cp_lianjie"><img src="tupian/cp02.jpg" class="cp_img" /><p class="cp_mc">中年妈妈装冬装仿水貂绒外套40岁50中老年女洋气婆婆毛呢上衣短款</p><p class="cp_mc2">¥136.00</p></a><a href="#" class="cp_lianjie"><img src="tupian/cp03.jpg" class="cp_img" /><p class="cp_mc">中年妈妈装冬装仿水貂绒外套40岁50中老年女洋气婆婆毛呢上衣短款</p><p class="cp_mc2">¥196.00</p></a><a href="#" class="cp_lianjie"><img src="tupian/cp04.jpg" class="cp_img" /><p class="cp_mc">中年妈妈装冬装仿水貂绒外套40岁50中老年女洋气婆婆毛呢上衣短款</p><p class="cp_mc2">¥253.00</p></a></div><!--精品推荐--><div class="qukuai2"><p class="qukuai_zuo"></p><p class="qukuai_zhong">精品推荐</p><a href="#" class="qukuai_you"> 更多> </a></div><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></div><br><br><br><!--底部导航菜单--><div class="dibu_caidan"><a href="#" class="dibu_caidan_xiangmu"><p class="dibu_caidan_xiangmu_tupian"><img src="img/a-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/b-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/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;}/*查询功能*/.chaxun {display: flex;width: 100%;background-color: #f6f6f6;padding: 10px;box-sizing: border-box;}/*查询功能-input输入框*/.chaxun_neirong {flex-grow: 1;border-radius: 5px 0 0 5px;border: 1px solid #D7D7D7;border-right: 0;}/*查询功能-查询按钮*/.chaxun_anniu {border: 1px solid #D7D7D7;border-left: 0;padding: 5px;border-radius: 0 5px 5px 0;}/* 轮播样式 */.lunbo {}.lunbo_img {width: 100%;}/* 快捷菜单 */.caidan {display: flex;padding: 10px;}.caidan_lianjie {width: 25%;display: flex;flex-direction: column;align-items: center;text-decoration: none;color: grey;}.caidan_img {width: 60%;}/* 最新通知 */.tongzhi {width: 100%;padding: 10px;box-sizing: border-box;border-top: 1px #e6e6e6 solid;border-bottom: 1px solid #e6e6e6;}.tongzhi_lianjie {width: 100%;display: flex;align-items: center;text-decoration: none;}.tongzhi_zuo {width: 20px;height: 20px;}.tongzhi_neirong {flex-grow: 1;color: gray;padding-left: 10px;}.tongzhi_you {width: 16px;height: 16px;}/* 区块标题 */.qukuai {display: flex;background-color: #fcfcfc;align-items: center;box-shadow: 2px 2px 2px gainsboro;padding: 5px;box-sizing: border-box;}.qukuai_zuo {width: 3px;height: 18px;background-color: green;box-shadow: 2px 2px 2px gainsboro;}.qukuai_zhong {padding-left: 8px;flex: 1;color: gray;text-shadow: 2px 3px 2px gainsboro;}.qukuai_you {color: gray;text-shadow: 2px 2px 2px gainsboro;text-decoration: none;}/* 最新上架产品 */.cp_zuixin{display: flex;flex-wrap: wrap;padding-top: 10px;}.cp_lianjie{width: 50%;padding: 3px;box-sizing: border-box;text-decoration: none;color: gray;}.cp_img{width: 100%;}.cp_mc{overflow: hidden;white-space: nowrap;text-overflow: ellipsis;font-size: 14px;}.cp_mc2{color: red;}/* 精品推荐 */.qukuai2 {display: flex;background-color: #fcfcfc;align-items: center;box-shadow: 2px 2px 2px gainsboro;padding: 5px;box-sizing: border-box;border-top: 1px solid #f2f2f2;}.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;}
