设计一个简单的购物页面（html+css+php）

水平有限，精力有限，很多东西写得可能不那么详细，有不懂可以留言提问，懂的尽量解答

首先讲一下，购物页面肯定会涉及到数据库部分的，我这篇文章数据库方面不会详细讲，就简单给个思路。购物需要用到cookie进行身份验证，这个我在上一个文章有写到
访问链接：https://blog.csdn.net/weixin_42899627/article/details/104741885

博客完整代码获取

设计一个简单的购物页面（html+css+php）
**

先看一下效果图

购物页面

点击【立即兑换】弹窗提示

没有登录弹窗提示

一共3个文件
shop666.html
shop666.css
shop666.php

直接上代码了（含解析）

shop666.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>积分商城</title>//这个随便改，改成购物商场什么的都行，相当于网页标签
<link href="shop666.css" rel="stylesheet" type="text/css" media="all">
//调用css进行页面布局，如果所有文件都放在同一个文件夹，直接文件名调用即可，如果不同文件夹需要更改路径
</head>
<body><div class="shopbox"><div class="shopin"><p class="shoph"><strong>积分兑换</strong>//左上角标题<img src="../home/images/o.png" title="每个人一次只能兑换一件商品" width="16" height="16">
//显示问号，采用的png格式，图像透明，src根据路径自己改动，title是图片信息，鼠标悬停会显示这些文字</p><div class="sss"><ul><li><p><img src="../home/images/yi.png" title="图片仅供参考，一切以实物为准"></p><div class="good"><p>衣架</p><span >30积分</span><br><br><button value="衣架" onclick="myFunction(this.value)" >立即兑换</button>//myFunction(this.value)js函数，获取button的value的值,传递给str参数//str再把值传给 p，然后跳转执行php文件，查询数据库</div></li><li><p><img src="../home/images/pen.jpg" title="图片仅供参考，一切以实物为准"></p><div class="good"><p>脸盆</p><span>30积分</span><br><br><button value="脸盆" onclick="myFunction(this.value)" >立即兑换</button></div></li><li><p><img src="../home/images/xi.jpg" title="图片仅供参考，一切以实物为准"></p><div class="good"><p>洗洁精</p><span>20积分</span><br><br><button value="洗洁精" onclick="myFunction(this.value)" >立即兑换</button></div></li><li><p><img src="../home/images/tuo.jpg" title="图片仅供参考，一切以实物为准"></p><div class="good"><p>拖把</p><span>50积分</span><br><br><button value="拖把" onclick="myFunction(this.value)" >立即兑换</button></div></li><li><p><img src="../home/images/sao.jpg" title="图片仅供参考，一切以实物为准"></p><div class="good"><p>扫把</p><span>40积分</span><br><br><button value="扫把" onclick="myFunction(this.value)" >立即兑换</button></div></li><li><p><img src="../home/images/dai.jpg" title="图片仅供参考，一切以实物为准"></p><div class="good"><p>环保袋</p><span>10积分</span><br><br><button value="环保袋" onclick="myFunction(this.value)" >立即兑换</button></div></li>                                  </ul></div><footer class="fo"><p> 居民生活垃圾分类 © G果出品 | Powered by Gapple </p></footer>//这是底部显示的玩意，纯粹显得逼格高</div></div><script>//这是js函数，确认弹窗，想了解的给个网站：https://www.runoob.com/js/js-popup.html//window.location.href这是js跳转网页的代码格式//后面那个?p= 是传递变量给php文件，然后php通过$_GET["q"]来接受获取数据function myFunction(str){var p= str;var r=confirm("你确定要兑换该商品吗!");if (r==true){window.location.href="http://192.168.43.251/test/login/shop.php?q="+str;}else{window.location.href="http://192.168.43.251/test/login/shop.html";}}</script>
</body>
</html>

shop666.css

/*这段css代码不完全是我自己写的，我参考了一位博主的css代码
放上链接：https://blog.csdn.net/py_1995/article/details/82762559*/
@charset "UTF-8";
*{margin: 0px;padding: 0px}
.shopbox{text-align: center;display: flex;justify-content: center; /* 水平居中 */align-items: center;     /* 垂直居中 */width: 100%;height: 680px;background:#F7F7F0;
}.shopin{border:5px solid gray;border-radius: 20px;justify-content: center; /* 水平居中 */align-items: center;     /* 垂直居中 */width:1200px;height:400px;margin-top:-100px;}.shoph{font-size:1.2em;color:#666666;width:10%;height:30px;margin-bottom:10px;
}           .sss{width:1190px;height:300px;
}.sss>ul>li{float: left;width: 180px;margin-left: 16px;list-style-type:none;
}.sss>ul>li>p{/*做溢出处理  使图片放大时不占其他元素*/width: 190px;height: 190px;overflow: hidden;
}
.sss>ul>li>p>img{width: 190px;/*添加过渡属性*/transition: all 0.3s;
}
.sss>ul>li>p>img:hover{/*设置鼠标移到对应图片上有放大效果*/transform: scale(1.2);
}/*调整购物框下方布局*/
.good{margin-top:10px;
}
.good>p{color: #555;font:16px '宋体'; margin-bottom: 3px;margin-left: 3px;
}
.good>span{margin-left: 3px;font:16px '宋体'; color:red;
}button {width: 90%;background-color: #4CAF50;color: white;padding: 5px 10px;margin: 0 auto;border: none;border-radius: 6px;cursor: pointer;
}button:hover {background-color: #45a049;
}   .fo{width:100%;margin-top:200px;margin-bottom:10px;
}.fo p{text-align:center;font-size:.6em;margin-top:10px;color:#C7C7C7;
}

shop666.php

<?php
$good = $_GET["q"];//获取数据if(isset($_COOKIE["name"],$_COOKIE["pwd"])==true)//验证一下是否已经登录
{$shopna=$_COOKIE["name"];$shoppw=$_COOKIE["pwd"];$con = mysqli_connect("192.168.43.251:3306","admin","admin","mydb");if (!$con){die('Could not connect: ' . mysqli_error($con));}mysqli_query($con , "set names utf8");// 设置编码，防止中文乱码,很关键$result = mysqli_query($con, "SELECT * FROM resident WHERE ID = '$shopna' AND password = '$shoppw' ");if ($result){while($row = mysqli_fetch_array($result, MYSQLI_ASSOC)){$res_credit =$row['credit']; }$result = mysqli_query($con, "SELECT * FROM goods WHERE good_name = '$good' ");if($result){while($row = mysqli_fetch_array($result, MYSQLI_ASSOC)){$good_price = $row['good_cost'];$good_sum = $row['good_sum'];}if( $good_sum >0){if($res_credit>=$good_price){$remain=$res_credit-$good_price;//用户当前积分减去商品所需积分$order_cmd = "INSERT INTO order_list(buyer,good) VALUES('$shopna','$good')";$result=mysqli_query($con,$order_cmd);                   if($result){     //更新居民表：credit是指用户积分，扣除用户积分$result=mysqli_query($con,"UPDATE resident SET credit='$remain' WHERE ID = '$shopna'");if($result){//更新商品表：good_sum 是指库存，库存减一$result=mysqli_query($con,"UPDATE goods SET good_sum=good_sum-1 WHERE good_name = '$good'");if($result){echo "<script language=\"JavaScript\">";echo "alert(\"兑换成功，你当前剩余积分：$remain\\n\你的订单已生成，请耐心等待配送\");history.back();</script>";}}}}else {echo "<script language=\"JavaScript\">";echo "alert(\"你的积分不足，当前积分：$res_credit\");history.back();</script>";                   }}else {echo "<script language=\"JavaScript\">";echo "alert(\"该商品库存不足，当前库存：$good_sum\");history.back();</script>";}}mysqli_free_result($result);}}
else
{echo "<script language=\"JavaScript\">";echo "alert(\"你还没有登录\");history.back();</script>";}
?>

商品表

登录验证身份之类的应该都懂吧，能开始想着做购物页面了，到这一步，相信应该对网页html、php、css都很了解了，不讲太多了，数据库方面自己参考着弄，有问题再问，emmmmm

设计一个简单的购物页面（html+css+php）相关推荐

php用户注册功能设计,利用HTML+CSS设计一个简单的用户注册页面【示例】
本篇文章将要给新手小白们介绍如何使用HTML和css制作简单的注册页面.在开发网站过程中,如果网站内容要求是完善的信息站,那么肯定就离不开用户注册的这个功能.这个用户注册界面对于刚入门的前端新手来说, ...
web课程设计网页规划与设计：个人毕设网站设计 —— 二手书籍(11个页面) HTML+CSS+JavaScript
web课程设计网页规划与设计:网站设计--二手书籍(11个页面) HTML+CSS+JavaScript 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手 ...
HTML网页设计基础期末作业——仿Coco线上订奶茶饮料网站设计与实现6个页面(HTML+CSS+JavaScript)...
HTML网页设计基础期末作业--仿Coco线上订奶茶饮料网站设计与实现 6个页面(HTML+CSS+JavaScript) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTM ...
实现一个简单的登录页面
实现一个简单的登录页面设计了一个登录页面,感觉还挺不错的实现效果设计的还是挺好看的吧分析需要的功能一个登录页面一个注册页面翻转效果输入后的正则判断,给用户提示信息翻转要清空页面的全部信 ...
web课程设计网页规划与设计：个人毕设网站设计 —— 二手书籍(11个页面) HTML+CSS+JavaScript...
web课程设计网页规划与设计:网站设计--二手书籍(11个页面) HTML+CSS+JavaScript 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手 ...
web课程设计网页规划与设计：网页设计——在线书店(12个页面) HTML+CSS+JavaScript 学生网页课程设计期末作业...
web课程设计网页规划与设计 :网页设计--在线书店(12个页面) HTML+CSS+JavaScript 学生网页课程设计期末作业临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头 ...
Android：设计一个简单的调查问卷
设计一个简单的调查问卷,要求用到TextView,Button,CheckBox,RadioButton,EditText等控件今天写了一个demo,里面用到了常用的布局,以及常用的几种控件,这里调 ...
web课程设计网页规划与设计：网页设计——在线书店(12个页面) HTML+CSS+JavaScript 学生网页课程设计期末作业
web课程设计网页规划与设计 :网页设计--在线书店(12个页面) HTML+CSS+JavaScript 学生网页课程设计期末作业临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头 ...
php实现一个简单的购物网站
实现一个简单的购物网站一.考试时间:8小时二.开发工具:DW 三.数据库:见附件四.需要实现的页面: Index:浏览商品页面,显示商品列表,用户可以点击"购买". View ...

设计一个简单的购物页面（html+css+php）

博客完整代码获取

先看一下效果图

直接上代码了（含解析）

设计一个简单的购物页面（html+css+php）相关推荐

最新文章

热门文章