商城小程序源码下载基于Thinkphp完整版多用户支持
94 / 3 / 创建于 1年前 /
scymdz 的个人博客
对于跨第三方平台交易的人来说，一套好的商城小程序源码成为销售过程的重要组成部分，以保持在线销售的便利性和快速交易。一个有吸引力的用户界面(UI)将帮助我们带来潜在的访问者，促进用户体验。
源码及演示：xcxyms.top
在本文中，我们将创建一个用于交易目的的小程序商城源码。这个简单的项目是一个完美的例子，说明我们可以多么容易地使用HTML和CSS进行用户界面设计。
为我们的网页创建结构:我们将从使用简单的HTML创建网站的结构方面开始，然后，我们将使用层叠样式表(CSS)来设计它，它将描述我们的HTML文档及其元素的样式。
HTML代码:在这个HTML文件中，我们主要把我们的网页分成几个
标签，我们还使用了几个类，如“main-content”，“centre-content”，“last-content”等。这个CSS类是用来样式化HTML元素的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
content="width=device-width,
initial-scale=1.0"/>
<link rel="stylesheet" href="style.css"
class="css" />
</head>
<body>
<div class="container">
<div class="main-content">
<p class="text">GeeksforGeeks</p>
</div>
<div class="centre-content">
<h1 class="price">2499<span>/-</span></h1>
<p class="course">
Buy DSA Self-Paced Course Now !
</p>
</div>
<div class="last-content">
<button type="button" class="pay-now-btn">
Apply Coupons
</button>
<button type="button" class="pay-now-btn">
Pay with Netbanking
</button>
<!-- <button type="button" class="pay-now-btn">
Netbanking options
</button> -->
</div>
<div class="card-details">
<p>Pay using Credit or Debit card</p>
<div class="card-number">
<label> Card Number </label>
<input
type="text"
class="card-number-field"
placeholder="###-###-###"/>
</div>
<br />
<div class="date-number">
<label> Expiry Date </label>
<input type="text" class="date-number-field"
placeholder="DD-MM-YY" />
</div>
<div class="cvv-number">
<label> CVV number </label>
<input type="text" class="cvv-number-field"
placeholder="xxx" />
</div>
<div class="nameholder-number">
<label> Card Holder name </label>
<input
type="text"
class="card-name-field"
placeholder="Enter your Name"/>
</div>
<button type="submit"
class="submit-now-btn">
submit
</button>
</div>
</div>
</body>
</html>
设计我们的商品支付页面:使用CSS，我们可以存储所有的样式信息，我们的页面将共享。每当用户访问网页时，浏览器将加载所有相关的信息，以及与页面内容相关的适当样式。在CSS中，类是相同或相似的元素组。您可以在一个类中拥有所需的元素。每个元素可以是多个类的成员。每个类都有特定于该类的CSS属性(如颜色和字体大小)。
CSS代码:CSS允许我们创建独特的和互动的网站。
* {
margin: 0;
padding: 0;
}
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
font-weight: bold;
}
.container {
height: 900px;
width: 400px;
background-image: linear-gradient(#1e6b30, #308d46);
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);
position: absolute;
border-bottom-left-radius: 180px;
border-top-right-radius: 150px;
}
.main-content {
height: 235px;
background-color: #1b9236;
border-bottom-left-radius: 90px;
border-bottom-right-radius: 80px;
border-top: #1e6b30;
}
.text {
text-align: center;
font-size: 300%;
text-decoration: aliceblue;
color: aliceblue;
}
.course {
color: black;
font-size: 25px;
font-weight: bolder;
}
.centre-content {
height: 180px;
margin: -70px 30px 20px;
color: aliceblue;
text-align: center;
font-size: 20px;
border-radius: 25px;
padding-top: 0.5px;
background-image: linear-gradient(#1e6b30, #308d46);
}
.centre-content-h1 {
padding-top: 30px;
padding-bottom: 30px;
font-weight: normal;
}
.price {
font-size: 60px;
margin-left: 5px;
bottom: 15px;
position: relative;
}
.pay-now-btn {
cursor: pointer;
color: #fff;
height: 50px;
width: 290px;
border: none;
margin: 5px 30px;
background-color: rgb(71, 177, 61);
position: relative;
}
.card-details {
background: rgb(8, 49, 14);
color: rgb(225, 223, 233);
margin: 10px 30px;
padding: 10px;
/* border-bottom-left-radius: 80px; */
}
.card-details p {
font-size: 15px;
}
.card-details label {
font-size: 15px;
line-height: 35px;
}
.submit-now-btn {
cursor: pointer;
color: #fff;
height: 30px;
width: 240px;
border: none;
margin: 5px 30px;
background-color: rgb(71, 177, 61);
}
最终代码:结合以上两个部分，商城小程序源码UI界面如下图：
本作品采用《CC 协议》，转载必须注明作者和本文链接
关于 LearnKu
粤公网安备 44030502004330号
推荐文章：