使用 HTML/CSS 创建在线支付 UI 设计

对于任何经营在线业务的人来说，结账成为销售过程的重要组成部分，以保持在线销售和快速交易的便利性。吸引人的用户界面 (UI) 将帮助我们吸引潜在访问者并促进用户体验。

在本文中，我们将创建一个用于交易目的的付款页面。这个简单的项目是一个完美的例子，说明我们可以使用 HTML 和 CSS 轻松地进行用户界面设计。

为我们的网页创建结构：我们将首先使用简单的 HTML 创建我们网站的结构方面，然后我们将使用级联样式表 (CSS) 对其进行样式设置，该样式表将描述我们的 HTML 文档及其元素。

HTML 代码：在这个 HTML 文件中，我们主要将我们的网页分成了几个

标签，我们使用了几个类以及“main-content”、“center-content”、“last-content”等。这个 CSS类用于样式化我们的 HTML 元素。

HTML

  
    
    
    
    
  
  
    

      

        
GeeksforGeeks
      
  
      

        
2499/-
        

           Buy DSA Self-Paced Course Now !
        
      
  
      

        
           Apply Coupons
        
        
           Pay with Netbanking
        
  
        
      
  
      

        
Pay using Credit or Debit card
  
        

           Card Number 
          
        
        

        

           Expiry Date 
          
        
  
        

           CVV number 
          
        
        

           Card Holder name 
          
        
        
          submit
        
      
    
  

设计我们的付款页面：使用 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);
}

最终代码：结合以上两个部分，将为您提供我们在线支付页面的最终表示。

输出：