HTML을 사용하여 간단하고 아름다운 장바구니 인터페이스 만들기-HTML 튜토리얼-php.cn

HTML을 사용하여 간단하고 아름다운 장바구니 인터페이스 만들기

먼저 장바구니 인터페이스를 보여드리겠습니다.

HTML을 사용하여 간단하고 아름다운 장바구니 인터페이스 만들기

이 페이지는 블로그에서 js 또는 jquery 관련 언어를 사용하지 않고 레이아웃 보기만 구현합니다. 자체 프로그램에 추가하는 것이 더 편리한 것 같습니다. 관련 코드는 다음과 같습니다.

index.html

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

로그인 후 복사

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 ; }

로그인 후 복사