基于WEB的HTML5购物网站、H5电商购物平台网上商城网站毕业设计（1）商城首页

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="&nbsp;请输入要查询的内容" /><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">2019年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;
}

基于WEB的HTML5购物网站、H5电商购物平台网上商城网站毕业设计（1）商城首页相关推荐

HTML5期末大作业：电商购物网站设计——电商购物网站设计(55页) 电商网页设计制作简单静态HTML网页作品购物网页作业成品学生商城网站模板
HTML5期末大作业:电商购物网站设计--电商购物网站设计(55页) 电商网页设计制作简单静态HTML网页作品购物网页作业成品学生商城网站模板常见网页设计作业题材有个人. 美食. 公司. 学 ...
基于HTML+CSS+JavaScript (品优购)电商购物项目的设计与实现（计算机毕业设计）
HTML5期末大作业:电商网站设计--仿品优购 (毕业设计含论文) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源码常见网页设计 ...
基于WEB的HTML5购物网站、H5电商购物平台网上商城网站毕业设计（2）商城分类
html代码 <!doctype html> <html> <head> <meta charset="utf-8"> <ti ...
div+css静态网页设计电商购物网站设计(55页) 电商网页设计制作简单静态HTML网页作品购物网页作业成品学生商城网站模板
HTML5期末大作业:电商购物网站设计--电商购物网站设计(55页) 电商网页设计制作简单静态HTML网页作品购物网页作业成品学生商城网站模板文章目录 HTML5期末大作业:电商购物网站设计- ...
ssm电商背景下精品茶网站的设计与实现毕业设计-附源码191732
摘要近年来,随着移动互联网的快速发展,电商背景下精品茶网站越来越受到网民们的欢迎,电商背景下精品茶网站对国家经济的发展也起着越来越重要的作用.简单的流程.便捷可靠的支付方式.快捷畅通的物流快递.安 ...
HTML5期末大作业：电商购物网站设计——仿品优购 (毕业设计含论文) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计学生电商网页作业...
常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. 服装. 体育. 化妆品. 物流. 环保. 书籍. 婚纱. 军 ...
HTML5期末大作业：电商购物网站设计——易购电商购物网页设计与实现(31页) 含论文+答辩+PPT 计算机毕设网页设计源码 HTML+CSS+JavaScript web课程设计网页规划与设计...
HTML5期末大作业:电商网站设计--易购电商购物网页设计与实现(31页) 含论文+PPT 学生DW网页设计作业成品 HTML+CSS+JavaScript web课程设计网页规划与设计计算机毕设网 ...
HTML5期末大作业：电商购物网站设计——红色的服装商城B2C网站(40页) HTML+CSS+JavaScript 电商购物功能齐全 dw网页设计大学生商城购物网站
HTML5期末大作业:电商购物网站设计--红色的服装商城B2C网站(40页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源码常 ...
HTML5期末大作业网页设计：电商购物网站设计(56页) HTML+CSS+JavaScript 毕业设计、课程设计适用...
常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. 服装. 体育. 化妆品. 物流. 环保. 书籍. 婚纱. 军 ...

基于WEB的HTML5购物网站、H5电商购物平台网上商城网站毕业设计（1）商城首页

html界面代码

css样式代码

基于WEB的HTML5购物网站、H5电商购物平台网上商城网站毕业设计（1）商城首页相关推荐

最新文章

热门文章