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

基于WEB的HTML5购物网站、H5电商购物平台网上商城网站毕业设计(1)商城首页_第1张图片
基于WEB的HTML5购物网站、H5电商购物平台网上商城网站毕业设计(1)商城首页_第2张图片

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">201951放假通知!</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">中年妈妈装冬装仿水貂绒外套4050中老年女洋气婆婆毛呢上衣短款</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">中年妈妈装冬装仿水貂绒外套4050中老年女洋气婆婆毛呢上衣短款</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">中年妈妈装冬装仿水貂绒外套4050中老年女洋气婆婆毛呢上衣短款</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">水貂绒外套4050中老年女洋气婆婆毛呢上衣短款</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">仿水貂绒外套4050中老年女洋气婆婆毛呢上衣短款</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;
}

你可能感兴趣的:(毕业设计)