Use html to create a simple and beautiful shopping cart interface-HTML Tutorial-php.cn

Use html to create a simple and beautiful shopping cart interface

First, let’s show the shopping cart interface:

(Learning video sharing:html video tutorial)

Use html to create a simple and beautiful shopping cart interface

This page only implements its layout view without using js or jquery related languages. In the opinion of bloggers, it is more convenient for us to add it to our own programs.
The following is the relevant code:

index.html

      
    商品名称 单价 数量 操作
 
  旁氏洗发露 99 1 
 
  旁氏洗发露 99 1 
 
  小计： 总数：

Copy after login

car.css

body{ overflow: hidden; text-align: center; } .car{ width:60%; border: 1px solid #F88020; border-radius: 18px; margin-left: 300px; } .car .good{ background-color: #F88020; height:55px; font-size: 22px; color:white; line-height: 55px; font-weight: 200; border-radius: 18px 18px 0 0; margin-bottom: 20px; } .car .good table{ width:100%; } .car .goods{ height:45px; line-height: 45px; font-size: 20px; font-weight: 200; } .car .goods table{ width:100%; } .car .goods table .btn1{ width: 70px; height:28px; border: 2px solid #46B3E6; background-color: white; color: #46B3E6; border-radius: 4px; font-weight: 600; } .car .goods table button:hover{ background-color: #46B3E6; color: white; } .car .goods1{ margin-top: 10px; background-color: ; height:50px; font-size: 19px; color:white; line-height: 50px; font-weight: 200; border-radius:0 0 10px 10px ; } .car .goods2{ border-top: 1px solid #F88020; margin-top: 10px; height:50px; font-size: 19px; line-height: 50px; font-weight: 200; border-radius:0 0 10px 10px ; } .car .goods1 table{ width:100%; } .car .goods1 .btn2{ width: 70px; height:28px; border: 2px solid #21BF73; background-color: white; color: #21BF73; border-radius: 4px; font-weight: 600; } .car .goods1 .btn2:hover{ color:white; background-color: #21BF73; } .car .goods1 .btn3{ width: 80px; height:30px; border: 2px solid #FF0000; background-color: white; color: #FF0000; border-radius: 4px; font-weight: 600; } .car .goods1 .btn3:hover{ color:white; background-color:#FF0000 ; }

Copy after login

Related recommendations:html tutorial

The above is the detailed content of Use html to create a simple and beautiful shopping cart interface. For more information, please follow other related articles on the PHP Chinese website!