咕叽咕叽甜水铺子商城无js适合新手用

最新推荐文章于 2024-04-20 00:00:00 发布

steamedbread321

最新推荐文章于 2024-04-20 00:00:00 发布

阅读量204

点赞数

分类专栏： html 文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/weixin_44766633/article/details/128989087

版权

html 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

先来看看效果图
在这里插入图片描述

一共五页就放这么多把，下面是代码哦

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#container{
	width:900px;
	height:1180px;
	margin: 0px auto;
}
#topnav{
	float: right;
	background:url(images/background_5.jpg);
}
#menu{
	background:url(images/background_3.jpg);
	background-repeat: repeat;
	width:730px;
	height:22px;
	float:left;
	padding-top:3px;
	}
#submenu:{
	float:right;
	width:10px;
	height:25px;
}
#left_content{
	width:220px;
	height:700px;
	float:left;
	padding-top:74px;
}
#login{
	border:1px solid #CCCCCC;
	width:206px;
	height:206px;
	padding-left:5px;
	padding-top:5px;
	color:#666;
}
#left-menu1{
	border:1px solid #CCCCCC;
	width:153px;
	height:271px;
	padding-left:58px;
	color:#F90;
}
#left-menu2{
	border:1px solid #CCCCCC;
	width:201px;
	height:215px;
	padding-left:10px;
	padding-top:40px;
	color:#C30;
}
#content{
	width:675px;
	height:700px;
	float:right;
	margin-top:0;
}
#title{
	margin-left:33px;
	margin-top:10px;
	color:#F00;
}
#footer{
	width:890px;
	height:64px;
	clear:both;
	text-align:center;
	position:relative;
	bottom:-80px;
	font-size:9px;
	background-color:#FDE7E1;
}
#wenzi{
	float:right;
	font-size:15px;
	margin:50px 0 20px 0;
}
#picture{
	float:left;
	margin:15px 0 20px 0;
}
a:link{color:#FFF;text-decoration: none;}
a:hover{color:#FC3;text-decoration:none;}
a:visited{color:#FFF;text-decoration: none;}
</style>
</head>

<body>
<div id="container">
 <div id="topnav">
 <a href="#">我的账户</a><a href="#">｜付款方式</a><a href="#">｜帮助中心</a>
 </div>
 <img src="images/gujill.png" width="902" height="231" />
 <div id="menu">
   <a href="#" style="color:#FC3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;首页</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="naicha（2）.html">｜&nbsp;&nbsp;&nbsp;&nbsp;奶茶</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="guoyinxiaochi（3）.html">｜&nbsp;&nbsp;&nbsp;&nbsp;果饮小吃</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="bingqilin（4）.html">｜&nbsp;&nbsp;&nbsp;&nbsp;冰淇淋</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="guanyuwomen（5）.html">｜&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;关于我们</a>
 </div>
 <div id="submenu">
   <input type="button"value="我的购物车"style="background-color:#FCC"/>
   <input type="button"value="常见问题"style="background-color:#FCC"/>
 </div>
 <div id="left_content">
  <div id="login">
  <h4>用户登录</h4><p>账户 <input type="text"name"userName"size="14" style="background-color:#FCC;"></p>
  <p>密码 <input type="password"name"pass"size="14"style="background-color:#FCC;"></p>
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="button"value="登录"style="background-color:#FCC"/>
  &nbsp;&nbsp;&nbsp;&nbsp;<input type="button"value="注册"style="background-color:#FCC"/>
  </div>
  <div id="left-menu1">
  <h4 style="color:#F00;">&nbsp;&nbsp;&nbsp;冬季新品</h4>&nbsp;<img src="images/eight.jpg" />
  <p style="color:#666">桃桃芝士乌龙</p>
  &nbsp;&nbsp;&nbsp;<span style="text-decoration:line-through">¥18</span>    &nbsp; ¥14
  </div>
  <div id="left-menu2">
  <a href="#" style="background-color:#CDE4FE">订阅</a>
   <div id="wenzi"><p>团购十杯七折起！</p><p>快来订购吧！</p></div>
   <div id="picture"><img src="images/one。.jpg"/></div>
  </div>
 </div>
 <div id="content">
   <div id="title">
   <img src="images/guji.jpg"/>&nbsp;&nbsp;咕叽特推
   </div>
 <table border="1"height=""width="680"cellspacing="15"cellpadding="3"frame="void"bordercolor="#CCCCCC">
 <tr>
 <th><p>蓝莓黑糖珠珠</p><img src="images/three.jpg"><p>中：¥15 大：¥17</p><input type="button"value="加入购物车" style="background-color:#FCC"/>&nbsp;&nbsp;<input type="button"value="详细信息" style="background-color:#FC9"/></th>
 <th><p>抹茶布丁珠珠</p><img src="images/five.jpg"><p>中：¥16 大：¥18</p><input type="button"value="加入购物车"style="background-color:#FCC" />&nbsp;&nbsp;<input type="button"value="详细信息" style="background-color:#FC9"/></th>
 <th><p>蓝莓芝士昔昔</p><img src="images/seven.jpg"><p>中：¥16 大：¥18</p><input type="button"value="加入购物车" style="background-color:#FCC"/>&nbsp;&nbsp;<input type="button"value="详细信息"style="background-color:#FC9" /></th>
 </tr>
 <tr>
 <th><p>橙汁汁</p><img src="images/21.png"><p>中：¥12 大：¥13</p><input type="button"value="加入购物车" style="background-color:#FCC"/>&nbsp;&nbsp;<input type="button"value="详细信息" style="background-color:#FC9"/></th>
 <th><p>草莓汁汁</p><img src="images/22.png"><p>中：¥12 大：¥13</p><input type="button"value="加入购物车" style="background-color:#FCC"/>&nbsp;&nbsp;<input type="button"value="详细信息" style="background-color:#FC9"/></th>
 <th><p>缤纷热带果饮</p><img src="images/23.png"><p>中：¥15 大：¥15</p><input type="button"value="加入购物车"style="background-color:#FCC" />&nbsp;&nbsp;<input type="button"value="详细信息"style="background-color:#FC9" /></th>
 </tr>
 <tr>
 <th><p>芒芒冰淇淋</p><img src="images/31.png"><p>中：¥12 大：¥14</p><input type="button"value="加入购物车"style="background-color:#FCC" />&nbsp;&nbsp;<input type="button"value="详细信息" style="background-color:#FC9"/></th>
 <th><p>风味小蛋糕</p><img src="images/32.png"><p>中：¥8 大：¥10</p><input type="button"value="加入购物车"style="background-color:#FCC" />&nbsp;&nbsp;<input type="button"value="详细信息" style="background-color:#FC9"/></th>
 <th><p>三明治</p><img src="images/33.png"><p>中：¥11 大：¥13</p><input type="button"value="加入购物车"style="background-color:#FCC" />&nbsp;&nbsp;<input type="button"value="详细信息" style="background-color:#FC9"/></th>
 </tr>
 </table>
 </div>
 <div id="footer">
 <p>guiji 2021 @1648181094</p>
 <p>咕叽的甜水小铺,24小时均可网上订购，支付宝转账、微信转账，2小时内送达</p>
 <p>欢迎订购</p>
 </div>
</div>
</body>
</html>